[h5]解决华为x5浏览器底部栏兼容问题,的后续

milobluebell

上一回说过,华为荣耀系列手机做h5兼容的问题后,又进一步发现了其它问题。当时我们采用的最后一种解决方案,按照我们的思路,的确可以做到一屏内显示,样式完全符合我们的预期。

BUT😢!在一屏下,如果继续下滑,会因手势操作而开启浏览器的“全屏模式”。在此之后,再上滑关闭此模式。本来fixed在底部95px的footer上的button等元素,就会因错位而无法点击。如图所示:
WechatIMG22.jpeg

在我们视角力,红色地方是这些绑定了click事件的dom所在的位置,按照正常逻辑,我们应该按红色位置。但是实际上,经历过“全屏-非全屏”切换后,我们点击红色区域是没有用的,需要点击黄色区域一次,窗口才能正确识别,然后再点红色位置才正确!(我大致算了算,黄色区域整好就是从非全屏切到全屏后,这些dom上移到的位置。也就是怀疑,是从全屏切回非全屏时,dom位置没有被浏览器正确判定😂)。

我看了手机百度 ,也是通过开启全屏模式的方式(即《解决华为x5浏览器底部栏兼容问题》的解决思路1.)来解决荣耀系浏览器兼容问题的。

目前来看,荣耀系浏览器的这一兼容问题,应该是倾向于无解。目前和ui及PL沟通后,希望对此系列为代表的x5内核浏览器进行交互修改。将底部操作提升到页面安全位置。 我们通过ua.tolowercase()是否includes("mqqbrowser")且!includes("micromessenger")来进行判定,做出针对性样式调整。

阅读 3.2k

i am a weirdo

14 声望
1 粉丝
0 条评论

i am a weirdo

14 声望
1 粉丝
文章目录
宣传栏