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?

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