@media查询在桌面浏览器中起作用，而不在移动浏览器中起作用

Question

I recently updated my site to make it mobile friendly. On my laptop, when I physically make the browser window smaller or larger, the @media queries fire and change the CSS. However, on my actual mobile browser, I'm getting the desktop site. Can someone please tell me what's going on?

Answer 1

Include in the

<meta name="viewport" content="width=device-width, initial-scale=1">

And it will work

Answer 2

You should add <meta name="viewport" content="width=device-width, initial-scale=1"> in you webpage.
so that the virtual viewport matches the device dimensions.

Add the Meta tag into your head section of your website. You will want to place the Meta tag below the other Meta tags in your head section or above your title tag.

Without a viewport meta tag, your site will be rendered into the device's default virtual viewport.

This Meta tag tells the mobile device to not zoom. This allows the Responsive Template for mobile devices to be loaded in the scripts.