我使用的是Chromium Version 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
你会注意到的两件事:-在开发人员工具箱模型视图中,您将看到尺寸为490 × 100在设备工具栏中,你会看到屏幕是360x640
这是怎么回事?那么490就是新的180吗?
你错过了
<meta content="initial-scale=1.0, width=device-width" name="viewport">
在你的<head>
.
Devtools没有坏,它只是模拟你在一些手机上得到的实际像素。