iOS の position:fixed バグ回避方法【日記 2014/01/26】
前: ボタンの左右位置次: 雪・科学館・おゆうぎ会 iOS の position:fixed バグ回避方法 2014-01-26 17:32:32 コンピュータ お手伝いしている仕事で、バッドノウハウばかりが溜まっていく気がする… デザイン上の都合で、CSS で position:fixed が使われていた。 テキスト入力を促す箇所で、画面の真ん中に入力窓が出てくる。 まぁ、ネットではよく見るインターフェイスです。 ところが、これは iOS では「使ってはならない」技だった。 バグ報告があり、たまたまバグが出た個所が僕の担当箇所だったので僕が調べることに。 でも、プログラムのバグではなく、iOS のバグだと判明。 position:fixed では、ページをスクロールさせても、ウィンドウに対して常に同じ位置に要素を表示できる。 常に同じ、というとスクロールさせるのをサボるだけで難しくな
iOS Safari でキーボード表示時にフッターを固定するもう1つの方法 - *iroi*
zenn.dev エディタを作っていると iOS Safari でキーボードを開いたときの挙動は本当に大変ですよね。 この記事では、キーボードを開いたままスクロールしてもフッターを固定できるようなワークアラウンドを最近見つけたので紹介します。 Safari 16 以降が必要。キーボード開閉時に追従が遅れる挙動は改善しません。 デモは https://mechairoi.github.io/ios-safari-virtual-keyboard/。iPhone か iOS Simulator でお試しください。 GitHub - mechairoi/ios-safari-virtual-keyboard Virtual Keyboard の挙動 Virtual Keyboard を開いたときには以下のようなことが起こっていると推測しています。 Visual_Viewport_API で取得で
iOSのSafariで100vhを使うとはみ出てしまうときはsvh,lvh,dvhを使おう！
iOSで100vhを使った場合、大きいviewportを基準にするため、小さいviewportの時はアドレスバーの分はみ出てしまったりステータスバーで予想外に隠れてしまったり…ということがあったりしますよね。 そんな時は新しい単位『svh』『lvh』『dvh』を使いましょう。 ちなみにこちらはiOS15.4以上から対応している単位なのでandroid対応も含めご注意ください。 『svh』について 『svh』では小さいviewportの方に合わせてくれます。 たぶんsmall viewport heightの略だと思います。 これを使えば先ほどのアドレスバーなどの分はみ出てしまう、などは解決します。が作成するサイトにもよりますが大きいviewportの時は注意が必要ですね。 『lvh』について 『lvh』はつまるところvhと同じような挙動をすると解釈していただいて大丈夫です。 たぶんLarg
ios上のブラウザ(safari,chrome)での表示がおかしいです
ios 14.2のchrome version87.0.4280.77とsafari(最新)で、以下のindex.htmlを表示させたところ 本来であれば、４つの正方格子が表示されるところ、高さ方向が潰れて表示されます。 なお、pcのほとんどのブラウザでは、意図した表示になっております。 サイトにもアップしておきます。 https://atxrtc.firebaseapp.com/ おわかりになる方、おしえてください。 以上、よろしくおねがいします。 ------------------- index.html ------------------- <!DOCTYPE html> <html lang="ja"> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="IE=edge,chrome=1"> <m
CSS | ios で position:absolute top: 50% がずれる
質問をすることでしか得られない、回答やアドバイスがある。15分調べてもわからないことは、質問しよう！新規登録して質問してみよう
iOS11以降でピンチインアウトで拡大縮小禁止 | 株式会社WEBインレット
スマホやタブレットでピンチインアウトによる画面の拡大縮小を禁止させたいことがあったのでメモ。 「ピンチインアウト禁止」はブラウザの仕様変更のせいで、その手段には歴史がある。 黎明期はviewport指定 昔はviewportにuser-scalable=noを指定していれば拡大縮小を禁止できていた。 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" > ただ、拡大縮小の可否をユーザーに委ねられないのはユーザービリティ的にいかがなものなのか？という議論があったのを覚えている。 2016年以降はpreventDefault() iOS10ぐらいからviewportによる制御が効かなくなってきた。 ユーザ
iPadでお絵かき掲示板｜さとぴあ
PaintBBS NEOはHTML5で作られたしぃお絵かき掲示板のクローンです。 見た目と動作が同じになるようにしぃちゃんとは別の作者の方が1から新しく作り直しました。 対応環境 Chrome/FireFox/Safari/Edge（最近のバージョンのみ） iOS(Mobile Safari) iOS対応です。iPadで描く事ができるお絵かき掲示板です。 PCでは右クリックでスポイトやマスクの操作をします。しかしモバイル端末には右クリックがないのでそのかわりになる「右ボタン」があります。 JavaアプレットのオリジナルのPaintBBSはブラウザの拡大率をあげてもキャンバスの周囲が大きくなるだけです。 1920x1080のフルHD環境では24インチモニターでもUIが小さくて操作が大変です。 しかし、NEOはHTML5なのでブラウザの拡大率をあげればUIもキャンバスも大きくなります。 iPa
inputに対するlabelタグが効かないiOS版のSafari。これを回避するには…。
なんとなく html を書いているときに気がついたのでメモメモ。 例えば「チェックボックスを設置したとき、説明文をクリックしても反応する」ようにするためには、
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[javascript] ダブルタップでブラウザが拡大するのを防ぐ - Qiita![[javascript] ダブルタップでブラウザが拡大するのを防ぐ - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/22052d5c40d951f4fddd3d66ca1a02f3a497f1ca/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCamF2YXNjcmlwdCU1RCUyMCVFMyU4MyU4MCVFMyU4MyU5NiVFMyU4MyVBQiVFMyU4MiVCRiVFMyU4MyU4MyVFMyU4MyU5NyVFMyU4MSVBNyVFMyU4MyU5NiVFMyU4MyVBOSVFMyU4MiVBNiVFMyU4MiVCNiVFMyU4MSU4QyVFNiU4QiVBMSVFNSVBNCVBNyVFMyU4MSU5OSVFMyU4MiU4QiVFMyU4MSVBRSVFMyU4MiU5MiVFOSU5OCVCMiVFMyU4MSU5MCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9MGVkYWFlM2RhNzUzYmY0YWRmYTg2ZTk1YzU1OGM0Mjk%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBFTElYSVImdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTk5YzAzNjNkZmI5ZmYxNTNiNWM2Y2FmMmYwYTkyNGI3%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D096f13f43dd22f695ca612fdbba1f5e8)
スマホでJavaScriptのアラートが表示されない
iPhoneを使用しているのですが、iOS10にアップデートしてからSafariの画面でダブルタップすると拡大されるように... - Yahoo!知恵袋