Chrome DevTools dimensions don't match ruler or device size

Question

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?

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

score 1 · Answer 1 · edited Dec 22 '22 at 02:09

1

I resolved this by setting the browser zoom to 100%

edited Dec 22 '22 at 02:09

Vickel

7,879
6
35
56

answered Dec 19 '22 at 12:49

Capucine

21
3

Yes I did figure this out. I just posted an answer with what I found – pyjamas Dec 19 '22 at 21:27
Nice to know what was your issue. Mine was pretty dumb ^^. When you initialize your project with a toolbox (like create react app) the environment is configured and the is the following: – Capucine Dec 21 '22 at 08:13

score 1 · Accepted Answer · answered Dec 19 '22 at 21:26

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.

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

Chrome DevTools dimensions don't match ruler or device size

2 Answers2