Question

我使用的是Chromium版本51.0.2704.63（64位）

<html>
<head>
<style>

html, body {
  margin: 0;
}

div  {
  background-color: black;
  height: 100px;
  width: 50vw;
  max-width: 100vw;
  min-width: 360px;
}

</style>
<body>
<div></div>
</body>
</html>

尝试将此标记粘贴到记事本中，另存为.html文件并运行它。进入Chrome的设备工具栏，然后选择Lumia 950

你会注意到的两件事： - 在开发人员工具的框模型视图中，您将看到尺寸为490x100 - 在设备工具栏中，您将看到屏幕为360x640

那么这里发生了什么？ 490是新的180？

Answer 1

你错过了

<meta content="initial-scale=1.0, width=device-width" name="viewport">

在<head>。

中

Devtools没有破坏，它只是模拟你在某些手机上获得的实际像素。

Chrome的设备工具栏是否有问题？

1 个答案: