Menu
For some reason device emulation mode is not reading my media queries. It works on other sites including my own sites that I made with bootstrap, but it's not working on media queries I am using from scratch (clicking the media queries button turns the button blue but no media queries are displayed). Test file below. Is this a bug in Chrome or is there something I need to change in my file?
<!DOCTYPE html> <!-- Media Queries Example 1 Sam Scott, Fall 2014 --> <html> <head> <title>MQ Example 1</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { font-family: sans-serif; } h1 { color: red; } h2 { color:blue; } p { color:green; } @media (max-width: 768px) and (min-width: 481px) { h1 { color: green; } h2 { color:red; } p { color:blue; } } @media (max-width:479px), print { h1,h2,p { color:black; } } @media print { body { font-family: serif; } } </style> </head> <body> <h1>I'm a first level heading</h1> <p>I'm a paragraph.</p> <h2>I'm a second level heading</h2> <p>I'm another paragraph.</p> </body> </html> 
566
Media Query Not Working on Mobile Devices If media queries work on desktop and not on mobile devices, then you most likely haven't set the viewport and default zoom. Note: You only need to add one of the code lines above, and usually, the first one does the job.
To add a custom emulated device in Chrome, first open the dev tools with your favorite method. Then select toggle the device toolbar by clicking the phone/tablet icon or using the shortcut ctrl / cmd + shift + m . Open the dropdown to see all of the default devices available in Chrome.
I fixed this problem by adding a meta tag to my page:
<meta name="viewport" content="width=device-width"> UPDATE (December 2019):
It looks like you may also need to set the initial scale and minimum scale, like so:
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-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
