使用设备模式计算的 chrome 宽度答案

【问题标题】：Computed width in chrome with device mode使用设备模式计算的 chrome 宽度
【发布时间】：2017-07-14 20:08:45
【问题描述】：

请看简单的sn-p。我正在使用 chrome 58。

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

为什么会有这种差异？

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

&lt;div&gt;&lt;/div&gt;

【问题讨论】：

标签： html css google-chrome mobile

【解决方案1】：

这并非特定于 Chrome，而是因为屏幕分辨率不等于浏览器窗口大小。 CSS 单元vw 代表viewport width，与viewport 相关。这是您的屏幕减去浏览器 chrome 的保留空间。记住有多少不同的设备和浏览器，这个保留的空间可能会有很大的不同。有关这方面的更多信息，请参阅 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 提供了一个很好的图表，说明了不同设备的各种不同“安全区域”。

希望这会有所帮助！ :)

【讨论】：