Search code examples
htmlcssgoogle-chromegoogle-chrome-devtools

Chrome DevTools dimensions don't match ruler or device size

When I select a device size in the Chrome Device Toolbar, the dimensions labelled on my HTML elements don't match. The device here is 600x600, but hovering the html element in DevTools shows 980x980. The box shadow shows that the element isn't overflowing. My zoom is at 100%. Why don't the numbers match?

enter image description here

<!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>
Solution

  • I resolved this by adding the following line inside <head>:

    <meta name="viewport" content="width=device-width" />

    The reason this happens is because using Chrome DevTools to simulate mobile device dimensions also simulates other aspects of a mobile device including a device pixel ratio of 2.0. The DPR value is locked to 2.0 in most device presets, and can be set manually with the Dimensions: Responsive option.

    In the ... menu there is an option to toggle showing the DPR.

    enter image description here

    enter image description here

    References:
    https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag https://stackoverflow.com/a/61410406/3620725