CSSの高さの単位にvhを使用しないほうが良い理由

CSSの高さの単位にvhを使用しないほうが良い理由

高さの単位vhとは

単位「vh」とは「viewport height」の略で、1vhはブラウザの高さの1%になります。

100%にしたい時は「100vh」、90%にしたい時は「90vh」を指定すればOKです。(コリスより引用)

[CSS]スクリプト無しで、縦長ページの各セクションごとの高さを設定するテクニック

ブラウザの高さに合わせたコンテンツを複数配置したい場合に利用すると便利だが使用できるブラウザが限られるため注意が必要だ。

IE8以下では使用できない

cssのvhはIE9以上なら使用できるがIE8以下では使用できない。PCサイトでIE8をサポートしているサイトはいまだに多く、vhが適用されないとレイアウトが大幅に崩れるため使用を控えたほうが良い。

Androidブラウザでまともに使用できない

スマートフォンのブラウザは多くのCSS3のプロパティを使用することが出来る場合が多いがAndroidだと4.4以上でないとサポートされていないため現状のシェア数を考えると使用できない。(iOS Safariは6以上でサポート)

CSSの高さの単位vhのサンプル

カテゴリーcss