问题
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?
回答1:
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...
回答2:
No need for user-scalabe=0, it works fine without it.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
来源：https://stackoverflow.com/questions/40346439/chrome-developer-tools-displaying-screen-larger-than-i-set-in-responsive-mode