css Chrome DevTools尺寸与标尺或设备大小不匹配

3bygqnnd 于 2022-12-20 发布在其他

关注(0)|答案(2)|浏览(315)

当我在Chrome设备工具栏中选择设备尺寸时，HTML元素上标注的尺寸不匹配。此处的设备尺寸为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>

css

来源：https://stackoverflow.com/questions/72661837/chrome-devtools-dimensions-dont-match-ruler-or-device-size

2条答案

按热度按时间

pn9klfpd1#

你发现问题了吗？
我遇到了同样的问题，发现我的浏览器缩放不是100%。

赞(0）回复(0）举报 2022-12-20

nr7wwzry2#

我通过在<head>中添加以下行来解决这个问题：
<meta name="viewport" content="width=device-width" />
出现这种情况的原因是，使用Chrome DevTools模拟移动的设备尺寸时，也会模拟移动设备的其他方面，包括设备像素比2.0。在大多数设备预设中，DPR值锁定为2.0，可以使用Dimensions: Responsive选项手动设置。
在...菜单中，有一个用于切换显示DPR的选项。