视口和 CSS 媒体查询的宽度不同？

Posted 2023-03-06

【中文标题】视口和 CSS 媒体查询的宽度不同？

【英文标题】：Viewport and CSS media query gets different width?

【发布时间】：2013-03-15 05:52:45

【问题描述】：

我在为智能手机创建 CSS 媒体查询时遇到问题，尤其是对于三星 Galaxy S3 等 android 设备。

似乎<meta name="viewport" content="width=device-width, initial-scale=1.0" /> 和 CSS 媒体查询在设备宽度上获得了不同的数据。

如果我将 Galaxy S3 保持在纵向模式，它的屏幕是 720 x 1280，并且元视口中的 content="width=device-width 似乎给了我相同的宽度。

但是，如果我在横向模式下查看同一页面，元视口中的 content="width=device-width 似乎仍然给我 720 宽度，同时收听更大尺寸的媒体查询，可以说是 1280。

这导致网页加载时视图有些放大，可能是因为它认为 720 是最大宽度。

检查屏幕：

Galaxy S3 肖像（Chrome）

Galaxy S3 Landscape（Chrome）

以上是在三星 Galaxy S3 上使用 Chrome 浏览器测试的。

我有一个类似的问题，实际上更糟糕的是使用名为“Internet”的默认 Android 浏览器。在那里，它似乎忽略了所有 CSS 媒体查询，同时仍在监听视口。

检查屏幕：

Galaxy S3 纵向（默认）

【问题讨论】：

您是否尝试在手机上查看dpi.lv 以查看视口通过的 dpi 和宽度？

我希望能回答这个问题，因为它现在处于非活动状态

【参考方案1】：

尝试在手机中使用检查器来玩转值和标签，或向我们发布演示。如果您的问题没有附加任何代码，很难指出确切的问题。