响应式设计 - 媒体查询在 iPhone 上不起作用？答案

【问题标题】：Responsive design - Media Query not working on iPhone?响应式设计 - 媒体查询在 iPhone 上不起作用？
【发布时间】：2012-10-11 17:58:56
【问题描述】：

我正在尝试为我的网站创建一个适合移动设备的版本，以使我的网站能够响应较小的屏幕尺寸并相应地进行缩放。

我创建了一些媒体查询，当在桌面上调整大小时，它们在浏览器中的行为正确。

在我的 iPhone 上，safari 只是缩小了整个网站，但仍保持全尺寸网站的纵横比。如何让媒体查询被观察？我错过了什么吗？

这是一个沙箱链接，我正在努力使其正常工作 - 任何帮助或建议都值得赞赏：

【问题讨论】：

【解决方案1】：

您的 html 中是否有用于查看端口的元数据？

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

【讨论】：

非常感谢您的回答..这个答案对我有很大帮助..但我的朋友 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">

最后，我的网页可以在移动设备上响应。奇怪！

【讨论】：