媒体查询在iPhone iPod touch中使用safari浏览器失效的原因

在iphone和ipod touch中使用的Safari浏览器会出现媒体查询失效这是为什么呢

---

这是因为在iphone中使用Safari浏览器在进行页面显示时，将窗口宽度当做980px像素进行显示。所以即使在界面中已经写好了页面在小尺寸窗口中运行时的样式，iphone中的Safari浏览器也不会使用这个样式，而是选择窗户宽度为980px时所使用的样式。在这种情况下，可以使用<meta>标签，在界面中制定Safari浏览器在处理本界面是按照多少像素的窗口宽度来进行，制定方法如下所示：

<meta name="viewport" content="width=600px"/>

这样在iPhone中重新运行界面时，Safari浏览器将窗口宽度作为600像素来处理。

因此，如果在界面中已经准备好了在小尺寸的窗口中使用的样式，并且有可能在iPhone或iPod touch中被打开时，不要忘了加入<meta>标签，并在标签中写入指定的窗口宽度。

 

如有其它情况的媒体查询失效，请参考笔者转载的另一篇文章，链接如下：

https://blog.csdn.net/Clara_G/article/details/89541559

如有问题，欢迎大家指正补充。