Android WebView的坑总结

桃扇骨 2022-08-24 04:17 351阅读 0赞

最近把做好的iPad HybridApp向Android迁移，碰到的坑太多了，让我这个折腾过Android接近4年的老鸟都头疼！现在把前人遇到的都列出来，再慢慢解决自己的，目前已经解决了android键盘覆盖问题，下面最棘手的问题就是屏幕高度的适配问题了！本文会不断更新

1、Andrid4.1事件穿透BUG 原因不明

2、 Android2.X 中文不支持粗体  
  
  
3、 目前发现的WEBVIEW尺寸宽度有320、 360、 400等多个尺寸   
  
  
该分辨率或许和屏幕尺寸有关  
                                    目前测试结果  
320-640分辨率-》320  
720分辨率 –》360  
800 分辨率 –》400

难道是手机宽度的一半？

屏幕密度的的问题啊 ！！！

4、 原尺寸图片放到WEBVIEW里会显得很模糊，建议采用大图进行缩小   
比如 需要为300\*100大小的图片，请使用600\*200的来进行缩小  
  
  
5、 ANDROID 2.X  TEXTAREA|INPUT等空间可能会出现移位的情况，原因也许与position:fix有关  
  
  
6、 text-overflow:ellipsis;（字符串CSS截取）功能BUG：截取长度会把margin-left一起计算进去，导致含有margin-left的容器被截取内容过多。  
  
  
7、 使用translate3d的位移会导致position:fixed的内置元素一起移动。此BUG更恶心的是，在IPHONE里会直接移掉，可在ANDROID里显示不会移动，但如果有事件的话，事件的可点击区域会位移。估计是ANDROID尝试修复没修复好。  
  
  
8、 WEBVIEW内存限制12M（目前此问题尚未出现）  
  
  
9、 ANDROID2.X不支持BOX-SHADOW  
  
  
10、 不支持MASK  
  
  
11、 支持CALC，使用时请注意防止被LESS预编译  
  width:~"-webkit-calc(100% - 100px)";  
margin: 0px 50px;

通过此方法可以很容易实现浮动元素居中，而不用去计算TOP LEFT

12、android4.4 不支持target-densitydpi=device-dpi，Android4.3 以下版本支持，后面开发不能用这个target-densitydpi了

13、键盘弹出问题，Android软键盘会总是覆盖在Webview上，会遮挡输入框，让用户看不到输入的是什么，解决方法是键盘弹出时native层发出事件，javascript负责把页面上拉。IOS7.1键盘弹出的处理很好，页面会自动上拉

14、获取web页面的宽带和高度

。就是屏幕的宽度和高度。

可以用screen.width和screen.height， 但实际测试发现有的设备会考虑屏幕密度，有的不考虑，比如有1280\*720的手机用screen取得1280\*720的分辨率，但实际对应的css分辨率只要640\*360

outerWidth谷歌官方不推荐用  
var screenW = window.outerWidth ;   
var screenH = window.outerHeight; $("\#msg").text("width:"+screenW+";height:"+screenH+";");   
window.outerHeight在android上获取的还不是真正的屏幕分辨率高度。比如480×800的高度在海豚浏览器上获取的高度是762.宽度是480。在webkit的内置浏览器上也是这个值。说明跟浏览器无关。而这个差值可能是浏览器工具栏的高度。因为若开启了海豚浏览器的底部工具栏。这个高度值就变成了697.   
而在ipad2 上获取到的是768×1024.