123

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>
Sam Scott
  • 1,256
  • 2
  • 9
  • 7
  • 2
    Sam Scott: @BananaNeil's answer is more satisfactory then mine, if you can, mark his as the best answer. – Digger Aug 29 '16 at 22:14

7 Answers7

340

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" />
BananaNeil
  • 10,322
  • 7
  • 46
  • 66
  • 8
    this worked for me as well. Any idea why this solves the problem? – Richie Thomas Aug 20 '16 at 02:58
  • @BananaNeil : even i am curious to know what is the reason behind this solution to work ? any thoughts ? – dreamweiver Feb 13 '17 at 06:25
  • 3
    It looks like the chrome emulator always tries to render and scale down a `946px` page into whatever sized screen it is emulating. You can see this is true by checking that the width of your body tag of your problematic page is always `946px` in the emulator. The viewport tag tells the browser how it should try to render the page. `width=device-width` acts the way you would expect, while `width=100px` scales everything up. You can read more about it here: http://www.w3schools.com/css/css_rwd_viewport.asp – BananaNeil Feb 13 '17 at 20:45
  • 2
    It can also behave quirkily if you have overzoomed... You only get dimensions you can enter. On a Mac, If you do cmd shift -, eventually the mobile emulator list pops up again wtih Galaxy S5, iPhone 6 etc in it... – JGFMK Oct 09 '17 at 16:08
  • 1
    It's hard to remember this isn't the default ;) – doublejosh Nov 16 '17 at 19:06
  • This still works in chrome(67.0.3396.99). Sigh, I spent half day checking with firefox(61.0), safari(11.1.1), they are alright even no this meta tag exist. However, this meta tag must exist in chrome, otherwise it doesn't work. – karl li Jul 06 '18 at 01:55
  • But the `` tag is already in OP's code. – BairDev Jan 28 '21 at 10:46
  • Still helpful in 2021. Fixed exactly what my problem was. Not only did it fix the device emulation, it also fixed the actual device CSS rendering on a mobile device! – Kay Angevare Jun 01 '21 at 10:16
  • I can confirm that this still works as of July 2, 2021 on Chrome 91.0.4472.124. – Daniel Rudy Jul 02 '21 at 17:13
  • Why is this still an issue in 2022? – cyclingLinguist May 08 '22 at 22:53
  • No worky Nov 2022 :'( Chrome 105.0.5195.125 – stormdrain Oct 04 '22 at 13:41
28

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" />
sanjsanj
  • 1,003
  • 9
  • 20
6

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.

Digger
  • 718
  • 1
  • 9
  • 22
6

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>
williamvivas
  • 189
  • 2
  • 4
0

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>
Nati Kamusher
  • 533
  • 5
  • 9
0

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 ;

}

}
polendina
  • 110
  • 3
  • 10
0

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.

TheNuggitMan
  • 400
  • 3
  • 5