エントリーの編集
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
visualViewportでスマホのキーボードの開閉に合わせて要素の高さを変えるぞ。 | Ginpen.com
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
visualViewportでスマホのキーボードの開閉に合わせて要素の高さを変えるぞ。 | Ginpen.com
スマホ向けの画面で大きめ入力フォームを使う時、キーボードの開閉を考慮した高さにしたいなと思うこと... スマホ向けの画面で大きめ入力フォームを使う時、キーボードの開閉を考慮した高さにしたいなと思うことはままあるかと思います。でもできないんですよねー。CSS の vh/dvh はキーボード開閉に反応しません。 どうしたもんかと調べていたところ VisualViewport という仕様が利用できることを知りました。 先にまとめ JavaScript の window.visualViewport.height で、キーボード分を除いた高さを取れる 全ブラウザー対応済み resize イベントも反応する CSS 変数(カスタムプロパティ)に保管しておけば CSS からも利用できる キーボードが出てくると良い感じに縮まるダイアログができた。やったぜ pic.twitter.com/IHKa6xGTmH — 高梨ギンペイ (@ginpei_jp) August 8, 2023 VisualViewpo