Android webview踩坑记录

  1. 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。

  2. 属性冲突
    使用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-的属性

  3. Android直接调用JS方法
    有时候会有这样的需求,需要展示一个列表,端上直接调用JS方法,把数据给前端渲染,点击的时候前端把数据回传(例如跳转链接)。
    但是在使用loadUrl方法直接执行js时,安卓4.4后,loadUrl的方式调用js,会自动进行decode。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,491评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,856评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,745评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,196评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,073评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,112评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,531评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,215评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,485评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,578评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,356评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,215评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,583评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,898评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,174评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,497评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,697评论 2 335

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,056评论 25 707
  • 常见试题 行内元素:会在水平方向排列,不能包含块级元素,设置width无效,height无效(可以设置line-h...
    他大舅啊阅读 2,389评论 1 5
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 11,945评论 4 60
  • 小烦躁的一周,不过还好有你们,还好卷卷还能逗卷卷开心。 遇到点挫折坎坷就把自己塑造成痛苦不堪不能忍受的模样;遇到点...
    L先生不爱说阅读 403评论 0 4
  • 这是小晰母亲节送给我的花,我用它做完供后就把它扔到了垃圾筐,小晰看到了,说她还要,还用瓶子把花养了起来。我忽...
    如水的日记阅读 368评论 0 0