ngyukiのブックマーク / 2020年10月29日

ngyuki id:ngyuki

2020年10月29日のブックマーク (2件)

これで解決！height: 100vh;を定義したのに、iOSのスマホで高さいっぱいに表示されないのを解決するCSSのテクニック
iOSのスマホでheight: 100vh;を定義してビューポートの高さいっぱいに表示したいのに、アドレスバーが表示されているとその分下が隠れて表示されてしまい、高さいっぱいにならないのを解決する方法を紹介します。 CSSのみのテクニックで、JavaScriptは必要ありません。 height: 100vh;だけでなく、min-heightやmax-heightでも機能します。 PostCSS 100vh Fix -GitHub PostCSS 100vh Fix 注意点使い方 PostCSS 100vh Fix PostCSS 100vh Fixは、100vhのiOSの挙動（バグ？）を修正するPostCSSのプラグインです。ピュアCSSのソリューションで、JavaScriptは必要ありません。高さいっぱいに表示したい時に、height: 100vh;だけを定義してもiOSでは期待通り
ngyuki 2020/10/29
-webkit-fill-available を使えば「画面いっぱい」なら出来る・・けど Android の Chrome でダメ？

css
リンク
[CSS]スマホで要素を高さいっぱいに表示したいのに、期待通りに表示されない時の解決方法
ビューポートを使った単位（vw, vhなど）は、特にスマホの各ブラウザにおいて複雑です。例えば、vwのスクロールバーを考慮する必要がありますか？サイトのナビゲーションやページコントロールはどうでしょうか？それらは計算に含まれますか？スマホで要素をビューポートの高さいっぱいに表示したいのに、期待通りに表示されない時の解決方法を紹介します。 The trick to viewport units on mobile 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。ビューポートの高さ（vh）の仕様高さいっぱいの要素を表示する方法ビューポートのリサイズにも対応するビューポートの高さ（vh）の仕様 W3Cの仕様では、ビューポートの単位をどのように計算するかは漠然としています。スマホでは高さが重要になることが多いので、ビューポー
ngyuki 2020/10/29
スマホで画面いっぱいに表示したいだけなのに css で 100vh だけでは実現できなくて window.innerHeight 使う必要があるものなのね・・

css
リンク
- 2020年10月31日
- 2020年10月29日
- 2020年10月27日