IOS 9 window.innerWidth 取值异常

操作系统:IOS 10以下

浏览器:safafi,微信内置浏览器,其他

异常现象说明:同事在写Web移动端页面时,设置了viewport width=device-width, 用javascript获取window.innerWidth的值,出现两种异常情况。

1.【IOS 9.1】在第一次进入页面时值为正常的视窗宽度(320宽度),刷新当前页面时window.innerWidth的值变为980。

2.【IOS 8】在第一次进入页面时值为980,刷新当前页面后才是正常的视窗宽度(320宽度)。

解决方法:

1.window.onload 后再取window.innerWidth

2.meta viewport的content中加 shrink-to-fit=no 

3.用document.documentElement.clientWidth 或 document.body.clientWidth(IE9以下)替换 window.innerWidth

拓展:

1.window.innerWidth 的值包含滚动条,$(window).width()不包含滚动条

2.shrink-to-fit 是啥?

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容