媒体查询在浏览器上看起来与移动设备上的不同

Posted 2023-02-26

【中文标题】媒体查询在浏览器上看起来与移动设备上的不同

【英文标题】：Media query looks way different on Browser than Mobile Devices

【发布时间】：2013-03-05 14:29:48

【问题描述】：

使用此查询导入布局：

@media screen and (min-width : 320px) and (max-width : 640px)

这是网址：http://www2.madeinweb.com.br/jobs/adc/prototype/html/

我一开始只使用调整大小的浏览器。但是当我尝试在移动设备（iphone 4、5、ipod 4 和 Galaxy S2）上查看时，情况就大不相同了。

所以我开始专注于移动视图（它是一个 web 视图，所以浏览调整大小不是问题），但是当我尝试从 Galaxy S3 中查看它时，结果与浏览器几乎相同（糟糕）。

我知道 S3 正在以它应该的方式运行（据我所知），因为它与浏览器的方式相同，但是其他设备呢，我在那里做错了什么？

【问题讨论】：

查看 Galaxy S2 上的链接似乎可以正常工作。内容对于屏幕来说有点太大了，所以有些部分被截断了，但其他都可以。

我看到你已经在我的问题中添加了元标记，所以也许这解决了这个问题，因为我只在发布答案后在移动设备上进行了测试:)

@DominicM，我已经添加标签很久了。

【参考方案1】：

移动设备通常会缩放内容以适应屏幕，您需要告诉设备该网站适合移动设备而不是缩放像素。

在你的 html 文件的头部添加这个：

<meta content="True" name="HandheldFriendly">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<meta name="viewport" content="width=device-width">

这应该适用于大多数安卓设备，iPhone 可能需要也可能不需要不同的元标记。

【讨论】：

您确定maximum-scale=1.0; 是个好主意吗？它不会阻止放大页面吗？

我刚刚在 Galaxy S2 上进行了测试，是的，您无法放大，但缩放会使任何媒体查询变得无用，所以我认为这是一个公平的权衡。我不知道另一种防止缩放的方法。此外，如果您使用响应式设计，您实际上并不需要缩放，因为如果操作正确，网站应该完全适合设备，因此缩放毫无用处，因为缩放无法获得质量或额外的细节。

很高兴听到，如果它解决了您的问题，请接受答案。

正如我之前发布的，我已经在使用它了。仍然遇到同样的问题。

啊。在某些情况下，可能需要缩放（在平板电脑或其他设备上查看）。既然他不需要它，那很好:)