デバイスモードでのクロムの計算幅

Question

シンプルスニペットをご覧ください。 490px：私は、デバイスモード、iphone 6（* 667px 375）、計算された幅 番組になっている間、私はクローム58

• を使用しています。
• デバイスモードをオフにし、ビューポートの幅を の375pxに狭めると、計算された幅は187pxになります。

なぜこのような違いがありますか？

div { 
 
    height:100px; 
 
    background-color:green; 
 
    width:50vw; 
 
}

<div></div>

Answer 1

これはクロムに特異的ではなく、画面の解像度は、ブラウザウィンドウのサイズに等しいないからです。 CSSユニットvwは、ビューポート幅を表し、ビューポートを基準にしています。これはあなたの画面からブラウザのクロムの予約されたスペースを引いたものです。いくつの異なるデバイスとブラウザが存在するかを意識して、この予約されたスペースは大きく異なる場合があります。詳細については、Screen Resolution != Browser-Windowを参照してください。

この問題を回避するには、デバイス幅のオフに測定することが<meta>にビューポートの幅を設定することができます。

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width" /> 

また、特定のブレークポイントをターゲットにmedia queriesを使用することをお勧めします。あなたは空想を得たい場合は、specific devicesをターゲットにすることもできます。これを助けるために、WebSiteDimensionsには、さまざまなデバイスの様々な異なる「安全領域」を示す素晴らしい図があります。

希望すると便利です。 :)