CODEWITHSUNDEEP
htmlcssmedia-queriesgoogle-chrome-devtools
Victor Ferreira
Victor Ferreira

Reputation: 6449

Chrome Developer Tools displaying screen larger than I set in responsive mode

I'm on chrome developer tools and opened the responsive mode. Set the width and height to mobile size (320 x 568, 360 x 640, things like that).

Media queries to mobile are not getting loaded. Both jQuery and the size-helper in the chrome dev-tools shows 980px of width, much larger than I set.

Extra info: I put my webpage in a deploy server and also used a chrome extension as a emulator because I couldn't trust the Chrome's measures.

In the deploy server it somehow works like chrome (so there is probably something weird with the code), but in the emulator plugin AND resizing the chrome window (without using the reponsive tools) I can see my breakpoints getting reached.

Anyone has faced this problem before? Can anyone at least explain why chrome is ignoring the size I ask it to be?

Upvotes: 7

Views: 8367

Answers (2)

Peter Umoren
Peter Umoren

Reputation: 560

No need for user-scalabe=0, it works fine without it.

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

Upvotes: 4

Daniel Kanis
Daniel Kanis

Reputation: 406

You may need to include:

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

At the top of your html file...

Upvotes: 38

Related Questions