媒体查询无法在移动浏览器上运行？

Question

我目前正在开发一个网站的移动版本，该版本在默认浏览器中运行良好，例如Firefox＆amp;铬。 Base是一种流畅的布局，媒体查询最大宽度为440px（@media屏幕和（最大宽度：440px）到目标肖像模式。

默认浏览器中的字体大小正在变化以及其他一些设置，如较小的图像和div等。但是，当我使用默认浏览器在我的HTC Android手机上测试网站时，它只显示最大宽度440样式而不是正常基于宽度为480px的样式。

这种行为可能是什么问题？移动版本可在https：//www.seeyouzoeningouda.nl/m

上找到

没有发布CSS，因为我真的不知道代码的哪一部分会向您展示。 css基于默认的HTMl5样板模板（www.html5boilerplate.com）

Answer 1

您使用哪些移动设备进行测试？
如果它们是三星Galaxy s3或苹果iphone 4，那么它们的设备分辨率已经翻倍，因此这可能是媒体查询无效的原因。

因此，对于I-phone 4，尝试将最大宽度从480px加倍到960px，对于三星galaxy s3，如果你在写入媒体查询的同时将最大宽度从360px加倍到720px，那么它可能会完美地工作。

例如。
@media掌上电脑，屏幕和（最大宽度：960px）
@media掌上电脑，屏幕和（最大宽度：720px）

我认为这可能会帮助您定位纵向模式。

Answer 2

移动设备有时会被@media handheld定位。尝试使用@media all代替屏幕。