我已经建立了一个使用媒体查询的网站,以使其具有响应性,并且在我开发它的同时,我更改了浏览器的宽度以测试the page,并且媒体查询似乎可以与我设置的断点一起正常工作。
问题是,当在iPhone上测试实际页面时,似乎根本无法识别媒体查询,而是在浏览器中显示完整的桌面视图。
为什么要想出为什么iPhone会做到这一点的想法?
这是我得到的Litmus浏览器测试结果:https://litmus.com/pub/b78644d
最佳答案
可以更进一步
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
我还建议清除掉其中的一些!important,至少要在您设置的宽度之外,这样响应性才能很好地发挥。
Annnnnd Chrome内置了一个不错的(相对较新的)仿真工具,您可以在其中使用它,还可以使用它来查看按比例缩放到移动设备的网站-它位于Javascript控制台旁边。
关于css - 媒体查询不适用于iPhone Safari浏览器,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/24957447/