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

Posted

技术标签:

【中文标题】媒体查询在浏览器上看起来与移动设备上的不同【英文标题】: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 上进行了测试,是的,您无法放大,但缩放会使任何媒体查询变得无用,所以我认为这是一个公平的权衡。我不知道另一种防止缩放的方法。此外,如果您使用响应式设计,您实际上并不需要缩放,因为如果操作正确,网站应该完全适合设备,因此缩放毫无用处,因为缩放无法获得质量或额外的细节。 很高兴听到,如果它解决了您的问题,请接受答案。 正如我之前发布的,我已经在使用它了。仍然遇到同样的问题。 啊。在某些情况下,可能需要缩放(在平板电脑或其他设备上查看)。既然他不需要它,那很好:)

以上是关于媒体查询在浏览器上看起来与移动设备上的不同的主要内容,如果未能解决你的问题,请参考以下文章

CSS 媒体查询:桌面上的设备宽度

viewport user-scalable=yes 和媒体查询

在桌面、ipad、移动设备上显示不同元素的媒体查询

响应式网页在开发工具上的外观与实际手机上的不同

媒体查询适用于移动版Firefox但不适用于移动版Chrome

CSS 媒体查询在移动设备上不起作用