android - 媒体查询在移动浏览器上不起作用？

Question

我目前正在开发一个网站的移动版本，该版本在 Firefox 和 Chrome 等默认浏览器中运行良好。Base 是一个流畅的布局，带有一个媒体查询，最大宽度为 440 像素（@media 屏幕和（最大宽度：440 像素）以定位纵向模式。

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

这种行为可能有什么问题？移动版可在 httpp://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 手持设备，屏幕和（最大宽度：960 像素）
@media 手持设备，屏幕和（最大宽度：720 像素）

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

Answer 2

移动设备有时会成为@media handheld. 尝试使用@media all而不是屏幕。