媒体查询在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

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

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

如何从iPhone / iPod Touch / iPad连接
如何从iPhone / iPod Touch / iPad连接本文将介绍从iPhone / iPod Touch / iPad等设备连接到已启用L2TP over IPsec功能的PacketiX ...
IOS margin失效问题,以及CSS媒体查询区分iPhone 6、 iPhone8、iPhone8 Plus和iPhoneX
CSS媒体查询区分iPhone 6. iPhone8.iPhone8 Plus和iPhoneX /*iPhone6和iPhone8*/ @media only screen and (device-w ...
iPhone / iPod Touch 文件传输解决方案 – 开源框架：Cocoa Web Resource Project
到目前为止,也就是iPhone SDK 2.2 ,苹果仍然没有为开发者提供一个文件传输的解决方案.如果一个应用需要为用户提供往iPhone上传文件的功能,大抵会采用下面几种方法之一: 通过一个链接从网 ...
【转】Downgrade iOS 4 to OS 3.1.3/3.1.2 (iPhone, iPod Touch)
http://www.iphoneheat.com/2010/07/downgrade-ios-4-to-os-3-1-3-3-1-2-iphone-ipod-touch/ 请注意红色部分,没有备份s ...
怎样在iPhone、iPad上的Safari浏览器中快速关闭所有标签页？
Safari 是 iPhone 上使用最广泛的网络浏览器,可以在 iPhone 和 iPad 上的 Safari 中轻松打开额外的标签页,也可以一次关闭所有标签页.如何快速做到这一点,而不必一一关闭它 ...
safari浏览器_用了这么多年iPhone才知道，原来?Safari浏览器这么好用
Chrome 浏览器好用,应该是很多差友们的共识.而让 Chrome 脱颖而出的应该就是它五花八门功能丰富的插件了. 你想在浏览器中增加什么功能,只要找到相应的插件就可以了. 比如你想要去广告,那就安 ...
CSS媒体查询判断iphone设备
判断iphone设备兼容iphone4/4s @media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){ } 兼容iph ...
The bundle does not contain an app icon for iPhone / iPod Touch of exactly '57x57' pixels
遇到这个问题问题,搜索了一圈要么不知道,要么喊改deploymenet target, 最后我是在项目属性-info-icon files(ios5)-下面添加了一个icon,然后弄了个icon.pn ...
CSS媒体查询区分iPhone 6、 iPhone8、iPhone8 Plus和iPhoneX
/*iPhone6和iPhone8*/ @media only screen and (device-width : 375px) and (device-height : 667px) and (- ...

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

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

最新文章

热门文章