Chrome developer tools not loading @media queries when switching to device view

Question

I have this @media query inside my CSS:

@media screen and (max-width: 767px) {

/* some styles*/

} /*end @media 767s*/

When I manually resize the page, it switch to the responsive layout when it hits the 767px break point.

However, when I select any device layout from the Chrome's dropdown

the default page is loaded instead of the media query, even if the device's width is smaller than the 767px break point. What am I doing wrong?

Answer 1

Try this

<meta name="viewport" content="width=device-width">