iphone6和6s中webview的bug

技术鸡汤

好久没有更新博客了,还是来说说最近做的事情吧。先从一个bug说起,由于在app中无论是ios还是android,展示和控制富文本都不是一件容易的事情,所以由于业务需求,我们会采用嵌套webview的形式来完成相应的功能。webview适配的方案有很多,但是其中也隐藏了许多的bug。

皓眸大前端开发学习
常用的适配方案(rem方案):
1.基于media query设置html和body的基准。(缺点比较繁琐,不好适配所有机型)
2.基于JS动态设置html和body的基准,动态设置viewport,基于设备像素比设置高清方案。
3.阿里的flexible方案 https://github.com/amfe/article/issues/17

动态设置viewport

关于viewport 这里 有介绍。动态设置viewport是一种投机的方法,这种方法是有缺陷的,
比如iphone6 和 iphone6s中,动态设置viewport会导致webview的宽度还是设置之前的宽度,虽然试图更新了,但是webview的宽度比计算后的viewport的宽度要大一些。导致如果绑定了webview的左右滑动事件,webview水平方向由于保留了之前的宽度,会有滚动条,虽然并没有展示滚动条,但是会响应左右滚动的事件,导致页面左右滚动的事件先被webview捕获了,导致左右滑动不流畅,出现bug。所以,动态改变viewport是不妥的。

这里还是奉上flexible方案:https://github.com/amfe/article/issues/17
奉上两个有用的脚本:
px2rem.js
_px2rem.scss

谢谢!

转载请注明出处:http://www.haomou.net/2016/09/07/2016_ios_webview/
有问题请留言。T_T 皓眸大前端开发学习 T_T