响应式设计 - 媒体查询在 iPhone 上不起作用？
Posted
技术标签:
【中文标题】响应式设计 - 媒体查询在 iPhone 上不起作用？【英文标题】：Responsive design - Media Query not working on iPhone? 【发布时间】：2012-10-11 17:58:56 【问题描述】：我正在尝试为我的网站创建一个适合移动设备的版本，以使我的网站能够响应较小的屏幕尺寸并相应地进行缩放。
我创建了一些媒体查询，当在桌面上调整大小时，它们在浏览器中的行为正确。
在我的 iPhone 上，safari 只是缩小了整个网站，但仍保持全尺寸网站的纵横比。如何让媒体查询被观察？我错过了什么吗？
这是一个沙箱链接，我正在努力使其正常工作 - 任何帮助或建议都值得赞赏：
http://www.preview.brencecoghill.com/
【问题讨论】：
【参考方案1】：您的 html 中是否有用于查看端口的元数据？
<meta name="viewport" content="width=device-width, initial-scale=1.0">
更多信息在这里：http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/
【讨论】：
非常感谢您的回答..这个答案对我有很大帮助..但我的朋友 coopersita 的小修正..您的标签上缺少一个结束 ";) 我尝试编辑此答案以修复不正确的语法，但被拒绝。应该是（几乎就像 user1506194 的回答）：<meta name="viewport" content="width=device-width, initial-scale=1.0">【参考方案2】：
我想你会在 Chrome 中找到一个带有 ; 的警告。代替 ， 这应该可以正常工作：
<meta name="viewport" content="width=device-width, initial-scale=1">
【讨论】：
【参考方案3】：在解决同样的问题一天后，我刚刚经历了最奇怪的事情。如果一切都失败了，可以尝试一下......
在开发过程中，我的页面在笔记本电脑上的响应非常好，但在我的 iPhone、iPad 或三星上却没有。我终于发现我必须在 DOCTYPE 语句之后和 html lang 语句之前放置一个注释行，如下所示：
<!DOCTYPE html>
<!-- This comment line needed for bootstrap to work on mobile devices -->
<html lang="en">
最后，我的网页可以在移动设备上响应。奇怪！
【讨论】：
虽然我已经包含了所有评论行和元标记，但我的应用程序仍然无法运行以上是关于响应式设计 - 媒体查询在 iPhone 上不起作用？的主要内容，如果未能解决你的问题，请参考以下文章
响应式设计损坏（仅在 iPhone 上）- 可以使用 javascript 强制执行媒体查询吗？
响应式设计 - Media Query无法在iPhone上运行？