CODEWITHSUNDEEP
androidhtmlcss
Rogach
Rogach

Reputation: 27190

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

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 bars (both horizontal and vertical), and html element size is 980x1742. Where does this come from? Shouldn't it be at least zero height?

Upvotes: 3

Views: 2153

Answers (2)

user2255592
user2255592

Reputation: 167

To make your page the exact size of the screen (no zooming or otherwise), place this in the header:

<meta name="viewport" content="width=device-width, initial-scale=1">

There's some more info about it, as well as additional parameters you may find useful, on Mozilla's developer site here.

Upvotes: 5

tmndungu
tmndungu

Reputation: 358

I had to do:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>

Upvotes: 2

Related Questions