媒体查询无法在iPhone Safari浏览器上运行

Question

我已经使用媒体查询构建了一个网站以使其具有响应性，而在我开发它时，我已经将浏览器的宽度更改为测试the page，并且媒体查询似乎可以正常运行我设定的要点。

问题是，在测试iPhone上的实际页面时，它似乎根本没有识别媒体查询，而是在浏览器中显示完整的桌面视图。

为什么iPhone会为什么会这样做呢，任何手机都能解决这个问题？

以下是我拥有的Litmus浏览器测试结果：https://litmus.com/pub/b78644d

Answer 1

解决了在HTML中将此行添加到头部的问题： -

<meta name="viewport" content="width=device-width">

Answer 2

可以更进一步

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

我还建议删除其中的一些！重要的，至少在你设置的宽度之外，所以响应性很好。

Annnnnd Chrome内置了一个甜蜜的（相对较新的）仿真工具，您可以随意使用它来查看缩小到移动设备的网站 - 它隐藏在Javascript控制台旁边。