Chrome Device Mode Emulation Media Queries Not Working
CssGoogle ChromeMedia QueriesDeveloper ToolsCss Problem Overview
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>
Css Solutions
Solution 1 - Css
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" />
Solution 2 - Css
The accepted answer didn't do it for me, I had to add a minimum-scale=1 as well.
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
Solution 3 - Css
Device emulation in Chrome is still a WIP. To be honest I think they pushed it to Chrome a little too soon. Try using Canary (the chrome beta browser) to test the emulation, I find that it's working way better than the one in Chrome.
Solution 4 - Css
Kept having the same problem till I noticed that if I have more than one implementation for the same set of rules depending on the screen size:
Specify both the minimum and maximum width for the same media query so that it doesn't get overwritten by the subsequent one:
@media screen and (min-width:9px , max-width:9px) {
css.selector {
style rules gets applied : in this range of screen sizes ;
}
}
css.selector{
the other style get applied : starting from 10px ;
}
Or set at least one breakpoint to all :
@media screen and (min-width:9px) {
some styles get applied : starting from this point ;
}
}
@media screen and (min-width:99px) {
some styles gets applied : starting from this point ;
}
}
Solution 5 - Css
I would like to add - along with the accepted answer - media queries only work (for me) on chrome's inspect when the @media query is written below the rest of the CSS code.
Solution 6 - Css
Works for me.
Just put a viewport meta tag in the head section of your page. See example:
<head>
<!--include the following meta tag to make chrome dev tools recognize media queries: -->
<meta name="viewport" content="width=device-width">
</head>
Solution 7 - Css
Include this meta tag in your code:
<head>
<!--include the following meta tag to make chrome dev tools recognize media queries: -->
<meta name="viewport" content="width=device-width">
</head>