Menu
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?
937
Open Chrome Developer Tools. Click the Toggle Device Mode option near top left of the developer tools section. Choose Responsive from the dropdown menu at the top of the screen. Edit the dimensions, which are also at the top of screen, right next to the dropdown.
To zoom the UI of DevTools: Make sure it has focus first (click somewhere in DevTools). Use the Ctrl + + and Ctrl + - keyboard shortcuts to zoom in or out (replace Ctrl with Cmd on Mac).
Hover your mouse to developer tools then hold the CTRL , scroll up or down the wheel of your mouse. Hold CTRL and SHIFT then press + or - , it will change your screen resolution.
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...
189
No need for user-scalabe=0, it works fine without it.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
