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
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
