镀铬的计算宽度与设备模式

Question

请参阅简单代码段。我正在使用chrome 58。

• 当我打开设备模式时，iphone 6（375 * 667px），计算宽度 示出了：490px
• 当我关闭设备模式，并将视口宽度缩小到 正好是375px，计算出的宽度显示为187px。

为什么会有这种差异？

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

<div></div>

Answer 1

这不是特定于Chrome，而是因为屏幕分辨率不等于浏览器窗口大小。 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 有一个很好的图表，说明了不同设备的各种不同“安全区域”。

希望这有帮助！ ：）