我的 iPhone 认为它是 980 像素宽

Posted 2023-03-06

【中文标题】我的 iPhone 认为它是 980 像素宽

【英文标题】：My iPhone thinks it's 980px wide

【发布时间】：2013-11-25 13:47:44

【问题描述】：

我正在尝试创建一组三个非常简单的媒体查询来处理一系列屏幕尺寸。这是我经过一番摸索后得出的结论：

@media all and (min-width: 0px) and (max-width: 480px)   styles here   
@media all and (min-width: 481px) and (max-width: 1023px)     styles here  
@media all and (min-width: 1024px)   styles here  

这在浏览器中可以正常工作，但是当我将 iphone 指向它时，它坚持显示中等大小的样式。玩弄这些数字，我发现只有最大宽度为 980 像素的 iphone 才会响应该查询中的样式。

请注意，我在这些查询中使用了“全部”来排除是否编写“手持”或“屏幕、手持”等代码。尝试简化以帮助我理解问题。

我认为这可能与我正在开发的页面的内容有关，因此我创建了一个无内容测试页面来尝试确定问题所在。它位于：

http://rgdaniel.com/test-mediaquery.php

如果我使用桌面浏览器查看该页面，当我将窗口大小调整得越来越小时，它的行为与预期一致。但是 iPhone 会在任何指定的最大宽度低于 980 像素时报告我的“中等分辨率”消息。任何帮助表示赞赏，在此先感谢。

【问题讨论】：

为什么需要结合min-width和max-width？我只看到 min-width 逐渐增加被使用。

如果您专门针对移动设备，另请参阅 stephen.io/mediaqueries。

我首先在第一个上只使用了 max-width，然后在另外两个上使用了 min-width。它仍然给我描述的问题，所以我玩弄了这些查询。这正是我降落的地方。

是的，我确实使用了 stephen.io 中的那些查询，完全按照编码的方式使用，无法让事情正常运行...

你把这个加入了吗，<meta name="viewport" content="width=device-width, initial-scale=1.0">？我在您拥有的链接中没有看到它，如果没有，您需要将其包含在您的 head 标记中。

【参考方案1】：

当使用media queries 时，您需要将其添加到您的head 标记中。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

这允许网站检测到它正在设备上使用。

你也可以这样做，

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">

这部分 user-scalable=0; 可防止用户用手指进行缩放，如果您有 position: fixed 元素，这将非常有用。

【讨论】：

没问题！我建议您在 media queries 上找到一个非常好的教程并深入研究！

@LihO 我很高兴能帮上忙。祝你设计好运！

我一直用头撞墙，直到找到这个。谢谢。

@BlakeFrederick 再也不用敲你的脑袋了！祝你好运。

@JoshPowell Chrome 说Error parsing a meta element's content: ';' is not a valid key-value pair separator. Please use ',' instead.。如果你有一个额外的键值对，你应该去掉分号，或者使用逗号，因此这是投票最多的问题。