媒体查询可在移动Firefox上运行，但不能在移动Chrome上运行 [英] Media query works on mobile Firefox but doesn't work on mobile Chrome

问题描述

我正面临移动设备上媒体查询的问题. 我有这样的东西:

I'm facing the problem with media queries on mobile devices. I've got something like this:

@media screen and (min-device-width : 320px) and (max-device-width : 480px){
/* Some styles*/
}

我正在Galaxy S6上测试我的网站.在Firefox中，一切看起来都不错，样式也确实会发生变化，但是当我在Chrome中加载相同的网站时-没有任何变化，而且媒体查询似乎无法正常工作. Chrome是否需要一些特殊查询?

I'm testing my website on Galaxy S6. In Firefox everything looks fine and styles do change but when i load the same website in Chrome - there's no change and it looks like the media query doesn't work. Does Chrome need some special queries?

推荐答案

将此元标记添加到HTML文件的标题中:

Add this meta tag into the header of your HTML file:

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

这应该可以解决您的问题.否则，浏览器可能无法调整大小，因为它不接受屏幕大小符合媒体查询条件.

This should solve your problem. Otherwise the browser might not resize because it will not accept that the screen size is meeting your media query criteria.

这篇关于媒体查询可在移动Firefox上运行，但不能在移动Chrome上运行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！