在设备模式下的镶边中计算出宽度

请参阅简单的片段。我正在使用铬 58。

为什么会有这种差异？

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

<div></div>

这不是特定于 Chrome 的，而是因为屏幕分辨率不等于浏览器窗口大小。CSS 单元vw代表视口宽度，并且相对于视口。这是您的屏幕减去浏览器镶边的保留空间。请记住有多少种不同的设备和浏览器，此保留空间可能会有很大差异。有关此内容的详细信息，请参阅屏幕分辨率！= 浏览器窗口。

要解决此问题，您可以在要测量的设备宽度的<meta>中设置视口宽度：

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

还建议使用媒体查询来定位特定断点。如果你想变得花哨，你甚至可以瞄准特定的设备。为了帮助解决这个问题，WebSiteDimensions有一个很好的图表，说明了不同设备的各种不同"安全区域"。

希望这有帮助！ :)

相关内容