Chrome Device Mode Emulation Media Queries Not Working

Solution 1:

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:

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:

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.