Chrome DevTools显示尺寸与标尺、设定设备尺寸不匹配问题

问题现象 #

• 在Chrome开发者工具的设备工具栏（Device Toolbar）中设置模拟设备尺寸为600x600时，鼠标悬停在DevTools元素面板的html节点上，标注显示的元素尺寸为980x980，和设置的设备尺寸不符。
• 已通过给元素添加内阴影的方式确认无内容溢出，且页面当前缩放比例为100%。

复现代码 #

<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            html,
            body {
                box-shadow: 0 0 0 10px red inset;

                margin: 0;
                padding: 0;

                width: 100vw;
                height: 100vh;
            }
        </style>
    </head>
    <body></body>
</html>

问题原因 #

核心原因是页面缺少移动端视口（viewport）配置标签：

• 开启DevTools移动端模拟后，如果页面没有显式配置视口规则，Chrome会使用移动端默认的布局视口宽度980px，由于设置的模拟设备尺寸是1:1的正方形，布局视口高度也会同比例计算为980px。你在设备工具栏设置的600x600是模拟设备的视觉视口（即屏幕物理显示区域尺寸），和布局视口不是同一个概念。
• 代码中给html、body设置的100vw、100vh单位是相对于布局视口计算的，因此元素的实际布局尺寸就是980x980，DevTools悬停提示显示的就是这个真实布局尺寸。浏览器会自动将980px宽的页面整体缩放，适配到600px宽的视觉视口中展示，所以你看到内阴影刚好铺满整个屏幕，这是页面整体缩放后的效果，不代表元素本身尺寸是600x600。

修复方法 #

在页面的<head>标签内添加标准视口配置标签即可：

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

添加后布局视口宽度会和设备视觉视口宽度完全对齐，也就是你设置的600px，此时再查看html元素尺寸就会显示为600x600，和预期值一致。

内容的提问来源于stack exchange，提问作者pyjamas