webview上方被其他元素遮盖时无法获取获取屏幕宽高
在小米、vivo手机上(机型没有记录,不确定是否是全部机型),在无论是window.innerWidth
还是zepto的$(window).width()
,获取到的屏幕宽度都为0。
事情的来龙去脉:
在我们的应用场景中,外站拉起App,App冷起会有五秒的开机广告,此时正文也在同步渲染,但是广告是盖在正文上方。广告结束之后正文的内容无论同步还是异步数据,都可以展示,但是图片就是只显示默认图。
在经历了排查异步事件是否提前触发(图片加载是异步事件,客户端提前下载好图后给我们传递本机地址)、本地图片是否被清除 之后,把app连接到chrome上进行调试,才发现宽度被设置为0,这个0的来源是Math.min(屏幕最大宽度,图片本身宽度)
,(为什么不设宽度100%?这就牵扯到另一个坑,有些Android手机屏幕分辨率有问题,例如最大屏宽360,100%宽度获取到的宽度是720...因为他是二倍屏...总是有这种奇葩手机的存在)。
解决方案:
(1) 客户端在检测到webView.onResume
再去执行所有的异步事件(需要一点延时)。
可能因为系统认为webview已经获取焦点,但实际还没有完全切换成功。此时立刻调用window.innerWidth
得到的扔会是0。当然可以采用万能的延时几十毫秒再去触发,但是认为此方法有些治标不治本,放弃。
(2) 客户端传递屏宽。
既然本身就有异步事件,在我们自己获取不到的时候,使用客户端传过来的即可。需要注意的是,前端的px单位,在客户端那里对应的是dpi,也就是3倍屏,前端获取屏宽为360px,客户端获取的会是1080px,他们对应的dpi是360。属性冲突
使用JS动态设置动画的时候,为了考虑兼容,一般的写法如下:
dom.style.cssText += ';transform:translate3D(0,0,0);-webkit-transform:translate3D(0,0,0);';
在安卓某些机型下(已知的有vivo),动态写入后只有前者transform:translate3D(0,0,0)
发生了改变,-webkit-transform:translate3D(0,0,0);
并没有被赋值上,导致动画错误。
解决方案:
判断出来是安卓就只写-webkit-
的属性Android直接调用JS方法
有时候会有这样的需求,需要展示一个列表,端上直接调用JS方法,把数据给前端渲染,点击的时候前端把数据回传(例如跳转链接)。
但是在使用loadUrl
方法直接执行js时,安卓4.4后,loadUrl的方式调用js,会自动进行decode。
Android webview踩坑记录
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
推荐阅读更多精彩内容
- Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...