スマートフォン用サイトを制作するデザイナーさんに伝えたいWebブラウザのViewport(表示領域)の話。エンジニアにも役立つかも。 Part2｜Takumi Hasegawa (unshift)｜note

スマートフォン用サイトを制作するデザイナーさんに伝えたいWebブラウザのViewport(表示領域)の話。エンジニアにも役立つかも。 Part2 今回は ・少し厄介なランドスケープ時のViewportの高さの話 ・かゆいところに手が届きそうで届かないCSSのvw/vhの話 ・これまた厄介なアプリ内ブラウザ (WebView)でのvhの話 の三本立てでお送りしたいと思います。 ・・・ 少し厄介なランドスケープ時のViewportの高さの話Webコンテンツ閲覧中に、スマートフォンを横向きで使うシチュエーションって個人的にはそんなにないですが、全画面 (html, bodyのwidth, heightが100%)のコンテンツだったり、キービジュアルをViewportに合わせた大きさにする、といったようなコンテンツではランドスケープ時の挙動に注意が必要です。 Android Chromeの場合 A

[labduck]

ありがたい情報！ですけど、涙しか出ない…

[aTn]

丁寧な解説ありがとうございます。MFIに移行してるのだから、スマホ縦持ちだけでもいいので、表示を統一して欲しいです。

[daizo1117]

“ービジュアルを全画面にする場合は、PCサイトの場合はwindowのresizeイベント、スマホサイトの場合はwindowのorientationchangeイベントでキービジュアルの高さをwindow.innerHeightにしています。”