解决h5华为浏览器底部栏兼容问题

2019-11-05 admin
现状

产品需求是做一个带底部吸底支付的支付页面,如下图所示:WX20191105-114601@2x.png

但是在部分(大多数)华为系统原生浏览器上会显示如下: 1060e0b891d40c5dd8da81fbe65e9b6a.jpg 下拉页面,就会发现,是因为华为浏览器下方的工具栏,遮住了支付组件,造成了这个样式兼容问题。 也就是说,在华为浏览器中下方工具条的高度不算在浏览器自身bom高度上,而是算网页dom的一部分。更通俗地理解可以为,它就是个z-index:无限高;position:fixed;bottom:0的<div/>,坑啊!


那么随之而来的几种解决思路是:

1.有没有那么一种设置,可以让这个浏览器组件像ios或vivo oppo等其它手机的浏览器一样正常算在其自身高度内? 经百度,并没有。但是有个x5内核强制“开启全屏”的meta设置:

// 开启x5内核浏览器的全屏模式
<meta name="x5-fullscreen" content="true">

相对应的,还有个亲测也是可以的:

// 据称是uc浏览器开始全屏模式,但是我在x5内核中测试也是可以的
<meta name=”full-screen” content=”yes”>

本来很开心地看到页面完美地如期展现。但是几番操作,发现这种方法不稳定,主要有两个问题:

  • 全屏模式下,x5浏览器会自动开启一个悬浮按钮,来进行“全屏-非全屏”状态的切换。这个是设计图之外的东西,在一定程度上对设计图的实现造成了破坏,且会给用户带来迷茫感。
  • 全屏模式的保持并不稳定。在某些路由跳转时刻、某些布局下,会退出全屏模式,没有根治样式兼容性缺陷。比如上图中的支付页面的确样式正常了,但是点击支付跳转到“选择支付方式”页面时,就不知所以地退出了全屏模式,下方“立即支付”按钮,又被遮住了。

2.处理交互障碍。也就是说,这个缺陷带来的问题是,用户在第一屏看不到支付渠道,且无法通过下拉显示(因为它不是不存在,而是被一个更高层的div盖住了),那么我们就把支付组件的padding-bottom增高:

.pay-btn-container{
  padding-bottom: 95px; // 因为95px是后面讲到的,在移动浏览器中实际算出的
                        // 距离差,所以不需要换算为rem,直接使用即可。
}

撑起下部被遮挡部分;或者将document的height增高,同样达到撑起被遮挡部分的作用。

document,.root{
  height: calc(100vh + 95px);
}

但是这样带来的问题是,用户现在确实可以通过下拉页面,最终看到支付按钮了。但依旧不是在一屏以内。这种改进方式和产品、设计的初始预期出入较大,很容易被否掉,后期还是要改。 且作为一名有良好“产品感”的前端攻城狮,本身应该也很难接受这种调整方案。

3.将非全屏模式下,底部工具栏占用的空间减掉,作为下方支付组件的bottom值。就是算出在“全屏和非全屏模式”下,由于底部虚拟工具栏的出现,而造成浏览器视窗的高度差。将其作为底部支付组件距离下方的距离值即可。这种解决方式主要有一点需要考虑:改虚拟工具栏,在多台设备上的高度是否统一。若不统一,那么此方法不可行,更难受的是,那么就面临着此题无解的尴尬局面。于是我找测试人员借来4台华为设备,通过计算发现高度几乎完全一致(长吁一口粗气),其值大概是95px,那么我们修改支付组件:

.pay-btn-container{
  position: fixed;
  bottom: 95px;
  width: 100%;
  ...
}

综合考虑三种方式,最终选择最后一种方式,他相对第一种比较稳定,相对第二种对交互侵入性最小,是目前最适合的答案。 但是因为x5内核并没有给出一个方法获取虚拟工具栏的实际高度,且发现其在多台设备上高度确有2px的差距,所以这点也算是隐患。

最后想说,x5真的巨坑,不亏其“移动端IE6”的大名。腾讯在加入一些安全措施的同时,将本来很好用的webkit改得一团乱麻,严重影响它的可用性。说得不偿失,一点不过分。最可恨的是,还没有完全文档,对开发者十分不友好。而那些将自己系统浏览器套用x5内核的“拿来者”也是开发者不友好团队的簇拥。抛开AGZY情怀不谈,我始终无法相信这样一家公司能颠覆什么人类通信技术的难关。

最后附上一个x5内核坑汇总的链接,希望有用:《QQ浏览器X5内核问题汇总》,如有问题欢迎留言。

[转载]原文链接:https://segmentfault.com/a/1190000020911506

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-78842.html

文章标题:解决h5华为浏览器底部栏兼容问题

相关文章
v-charts | 饿了么团队开源的基于 Vue 和 ECharts 的图表工具
在使用echarts生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts的出现正是为了解决这个 痛点。基于Vue2.0和echarts封装的v-charts图表组件,只需要统一提供一种对前后端都友好的数据格式 设置简...
2018-05-24
国内外html5游戏引擎排行
一个好的HTML5游戏引擎,能够大大简化游戏的开发实现。 排名列表: Construct 2 ImpactJS EaselJS pixi.js Phaser GameMaker Three.js PlayCanvas Turbulenz ...
2015-11-12
详解HTML5游戏玩家流失原因
对任何类型的电子游戏来说,玩家流失都是一个无法回避的问题。玩家为什么离开游戏?近日,HTML5游戏设定师纳森·洛维托(Nathan Lovato)在游戏开发者网站Gamasutra撰写文章,解读了玩家离开游戏的16个理由。 HTML5游戏 ...
2015-11-12
YouTube正式默认使用HTML5视频播放器
YouTube视频网站现在默认使用HTML5播放器,这意味着更好的性能、 稳定性、 电池寿命和甚至是更好的安全性。现在用户通过Chrome、IE 11、Safari 8和Beta版本的Firefox进行浏览的时候都默认使用HTML5视频播放...
2015-11-12
JavaScript常用特效chm下载
下载地址:JavaScript常用特效chm下载 对了,如果打开空白,在手册上右键属性解除锁定即可。 ...
2015-11-12
three.js实现围绕某物体旋转
话不多说,请看代码: 可以拖动右上角观察变化 &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot; style=&quot;width: 100%; height:100%;&quot;&gt...
2017-02-17
HTML5的5个不错的开发工具推荐
HTML5规范终于在今年正式定稿,对于从事多年HTML5开发的人员来说绝对是一个重大新闻。数字天堂董事长,DCloud CEO王安也发表了文章,从开发者和用户两个角度分析了HTML对两个人群的优势。其实,关于HTML5的开发工具,我们以往的...
2015-11-12
HTML5凭什么可以代替Flash
本世纪初,全球网络建设仍处于早期阶段,发达国家网民刚刚在从窄带向宽带网络过渡。由于网络带宽、PC运算速度等因素限制,早期的网站基本以静态文字和图片内容为主。但随着宽带网络在全球范围快速普及,网民对内容的需求也不断变化。死板的文字加图片的网站...
2015-11-12
JS中的语音合成——Speech Synthesis API
JS中的语音合成——Speech Synthesis API 简介 HTML5中和Web Speech相关的API实际上有两类,一类是“语音识别(Speech Recognition)”,另外一个就是“语音合成(Speech Synthes...
2018-05-17
零基础-5小时开发一个electron应用-[实践]
一、背景 三、技能升级 ​ 明明可以用颜值取胜,非要靠才华?不对,明明可以用代码搞定,非要搞设计?步入正题,正好最近对electron比较感兴趣,又是要做工具,那就直接怼 1.electron介绍 ​ electron最开始不叫这个名字,叫...
2017-12-26
回到顶部