iOSでも100vhをいい具合に調整して画面の高さいっぱいに要素を表示させる

TAK(@tak_dcxi)です。今回もCSSに関する投稿です。 以前このようなツイートをしました。 メインビジュアルなど、画面いっぱいに要素を表示するためにheightやmin-heightに100vhを指定する。そして、iOSで表示確認した時に以下のような問題が起こるわけです…。 iOSのSafariでの100vhが気に食わない問題 iOSのSafariでは100vhの計算にアドレスバーが考慮されていないため、アドレスバー分押し出されて格好悪く表示されます。ちなみにiOSのGoogle Chromeは中身SafariなのであれもSafariです。 この問題に立ち向かうために、実装者はJavaScriptを利用して高さを指定したり、height: 100%;のバケツリレーを行ってアドレスバーまで考慮した画面いっぱいの表示を実現するために頑張ってきたわけです。 そんな中、先程のツイートから

[cacacactus]

css解釈コロコロ変えるのがクソなのはそれはそうなんだけどヒーローエリアを100vhどーんが必要なサイトって本当はそんなにないのではと思う。大体は自己満で終わってる。

[diveintounlimit]

このネタつい最近コリスで見たとこだ

[ichi404]

無理矢理height設定しなくてもflexのcolumnで解決する事ちょいちょいある

[ttkazuma]

かれこれ20年は同じようなことを繰り返してる

[arapro]

chromeはほんとcss解釈をコロコロコロコロ変えるよな…

[hamaco]

“CSS変数はJavaScriptやメディアクエリで値を変えられるのでとても便利”しらんかった…。

[Dragoonriders]

画面回転は誰が管理すべきものか、アドレスバー表示は誰のものか、どちらもユーザーのものだろう。そう考えずにクライアントの言いなりに作り込むのは「デザイン」による押しつけだろうな。

[gaku_ds]

もう飽きた。でも止まれないんだよね

[boxshiitake]

iOSめんどくせ

[otchy210]

100vh の話より、こっちの方が有用な情報だった。知らなかったよ。これクソ便利では？→ "CSS変数はJavaScriptやメディアクエリで値を変えられるのでとても便利"

[flirt774]

chromeがどうと言ってる人は内容見てない。Safari(iOS)の独自仕様でしょ

[circled]

chrome is new IE

[nicht-sein]

というか、これはIE滅びろ案件ではなくvhにアドレスバーを考慮しないSafari修正しろ案件なのでは疑惑。最近はSafariが非対応っていうのが増えてきた気がする。いや、Google先走り過ぎも否定できないけどねｗ

[poponponpon]

resizeはaddEventListenerよりアレでやったほうがいいんじゃないかな、あのあれ名前忘れたけどアレよ

[buhoho]

自分のサイトは7割iPhoneユーザーだけど、手元にiOSに無いからスタイルどうなってるのか正直わからないな。伝統的なWebレイアウトにしときゃ大丈夫だろう精神

[primedesignworks]

Francfranc に置いてあるサンプル表示用のパソコンのブラウザを見る度に、「Chrome がシェアトップになる日が現実になり、IE がシェアトップという地獄から抜け出せて感謝してる」と心から思ってる。

[k3akinori]

またiOS Safariか

[mayumayu_nimolove]

そういうのちゃちゃってやってくれるライブラリとかないの？

[cartman0]

正直従来のウェブアクセシビリティのようにスクロール頼ったほうが早いのよな

[AzuLitchi]

見出しに「〜問題」とか「〜の件」とか入れてるのを見ると鳥肌立つほど寒いので気をつけようと思った。

[gachapining]

"-webkit-touch-callout" このハックは Chrome が対応した瞬間に崩れるからなぁ

[kvx]

使う場所が限定されないし、IEは100vhになるし、かなりいい方法かも。100vwにスクロールバー含まれる問題もどうにかできないかなぁ。/勘違いしてる人いるけど—vhはブラウザ仕様に影響受けない方法でしょ？

[d4-1977]

100vhというか、vhの上手い使い方がまだまだわからない…