Why Chrome Developer Tools set such a big viewport size when emulating mobile?

J

JackToncatridr

New member
I have a test document as follows:

<html>
<head></head>
<body></body>
</html>

So it's just an empty document. In normal browser mode, I get an nice empty page, no scrolls.

But when I open devtools and turn on mobile emulation (for example, Sony Xperia Z, Z1), I see scroll echat bars (both horizontal and vertical), and html element size is 980x1742. Where does this come from? Shouldn't omeglz it be at least zero height?
 
Last edited:
J

Joshankerti

New member
When you turn on mobile emulation, the browser is simulating a mobile device with a specific screen size and resolution. The 980x1742 size you see is likely the default screen size of the simulated device.

To remove the scroll bars and make the document display as expected, you can add the following CSS to your document:
html, body {
overflow: hidden;
height: 100%;
}

This will set the height of the document to 100% of the viewport and hide any overflow, effectively removing the scroll bars.
 
M

MitchelBraybh

New member
When you open devtools and turn on mobile emulation, you may see scroll bars even though the document is empty. This is because the mobile emulation mode in devtools simulates a mobile device with a specific screen size and resolution.

In the case of the Sony Xperia Z and Z1, the screen resolution is 1080 x 1920 pixels. When you emulate this device in devtools, the viewport size is set to 980 x 1742 pixels, which is the available area for displaying content within the browser. This means that the browser will display scroll bars if the content is larger than the available viewport area.

Even though your test document is empty, the browser still considers it to have a height of 1742 pixels in mobile emulation mode because that is the available height of the viewport. The width of the HTML element is set to 980 pixels to fit the width of the viewport.

If you want to remove the scroll bars in mobile emulation mode, you can add the following CSS to your HTML document:
html, body {
margin: 0;
padding: 0;
overflow: hidden;
}

This will remove any margins and padding around the HTML and body elements, and set the overflow property to hidden, which will prevent scroll bars from appearing.
 
You must log in or register to reply here.
Top