web-dev-qa-db-ja.com

CSS：ビューの高さ（vh）とビューの幅（vw）の単位は広くサポートされていますか？

100vhを使用して、divを行の高さで垂直方向に中央揃えしています。 このサイト vhとvwのサポートを約70％にしていますが、それは公正な評価ですか？サイトを構築するときにビューポートユニットを使用することをお勧めしますか？私はこれが少し主観的であることを知っています。私よりも経験豊富なウェブ開発者からの意見を探しています。

編集：皆の入力に感謝します、私はそれがモバイルで良く見えることを望みます、それで私はvhを忘れなければならないと思います。

cssviewport-units
37
Ber

統計は明確であり、私の観点では、公正な評価です。

私はあなたによって決定されなければならないと思います。最新の最高の技術を使用してWebサイトを将来的に保証したいが、現在いくつかの落ち込みがあることを認識している場合は、それでいいです。

オンラインプレゼンスにもう少し投資する準備ができていない場合は、古い方法に固執してください。これは決して間違っていません。

編集：レスポンシブデザインを作成する場合は、モバイルデバイスの開発を最初に開始し、次にデスクトップバージョンを作成します。モバイルサポートが一部のポイント（特にvmax）で不足しているため、ビューポートがすべて正しく機能することを確認します。しかし、これについては、50人の男性に尋ねることができ、彼らがすべて他の何かを言う可能性はかなり良いです。

16
CodeFanatic

cSS vhとjQueryの両方を使用すると、より安全です。
jQueryの例：

var clientHeight = $( window ).height();
  $('.element').css('height', clientHeight);

およびCSS：

.element {height: 100vh;}
35
user1473054

ビューポートユニットは優れていますが、ほとんどのモバイルブラウザーベンダーはvhを実際に使用できなくすることができました。

スクロールを開始するか、スクロールの方向を変更すると、アドレスバーが消えるか元に戻ります。その後、停止して指を離すと、vh値がそれを使用する要素と一緒に突然更新され、UXの悪夢になります（ユーザーはスクロールの最後にサイズ変更を期待せず、既存の要素の比率を変更し、 -コンテンツのレイアウトなど）。

8
Dario M. Mannu

リンクしたページ ）が質問に答えます .

どのブラウザをサポートする必要があるかによります。

IE9の部分的なサポートとは、「vmin」ではなく「vm」をサポートすることです。 iOS7の部分的なサポートは、vhユニットのバグのある動作によるものです。他のすべての部分的なサポートは、「vmax」ユニットをサポートしないことを指します。

これは、ビューポートユニットの使用がiOS7で「バギー」になる可能性があることを示しています。ビューポートユニットの使用はお勧めしませんが、代わりに次を使用します。

  • ピクセル：例height: 500px;
  • 割合：例height: 50%;

これらの値は広くサポートされており、最良の結果が得られます。

4
AfromanJ

まあ、デスクトップブラウザー用に既に存在していることがわかります。モバイルデバイスでのサポートは非​​常に限られています。そのため、実際には、コンピューターで見栄えの良いサイトを作成するか、電話でも機能するより互換性のあるピクセルベースのサイトを作成するかによって異なります。

3
Kroltan