[h5]解决华为x5浏览器底栏兼容问题

，z-index:infiniteheight;位置：固定；bottom:0，好坑啊！那么接下来有几种解决方案：1.有没有这样的设置，让这个浏览器组件像ios或者vivooppo等其他手机的浏览器一样，可以算在自己的高度里？根据百度，没有。但是x5内核有个meta设置强制“启用全屏”：//Enablethefullscreenmodeofthex5kernelbrowser对应的还有亲测也是可以的如果页面如预期般完美显示，我会很高兴。但是经过几次操作，我发现这个方法不稳定，主要有两个问题：在全屏模式下，x5浏览器会自动打开一个浮动按钮来切换“全屏和非全屏”状态.这是设计图之外的东西，在一定程度上对设计图的实现造成了损害，会给用户带来困惑。全屏模式的持久性不稳定。在某些路由跳转时刻和某些布局下，会退出全屏模式，对于样式兼容的缺陷没有根本的解决办法。比如上图中的支付页面确实是普通样式，但是当你点击支付跳转到“选择支付方式”页??面时，不知为何就退出了全屏模式，而“立即支付”"下面的按钮再次被覆盖。2.处理交互障碍。换句话说，这个缺陷导致的问题是用户在首屏看不到支付通道，无法通过下拉显示（因为不存在，只是被更高层的div覆盖了）),那么我们就增加payment组件的padding-bottom:.pay-btn-container{padding-bottom:95px;//因为后面会说到95px，在手机浏览器中其实是计算的//距离差，所以不用换算就是rem，可以直接使用。}撑起遮挡部分的下部；或增加文档的高度，以达到支撑遮挡部分的相同效果。document,.root{height:calc(100vh+95px);}但由此带来的问题是，用户现在确实可以下拉页面，最后看到支付按钮。但仍然不在一屏之内。这种改进方式与最初对产品和设计的预期相差较大，很容易被否决，后期还是要改。而作为一个“产品感”不错的前端攻城狮，应该很难接受这样的调整方案。3、减去非全屏模式下底部工具栏占用的空间，作为下方支付组件的底部值。就是计算在“全屏和非全屏模式”下，由于底部虚拟工具栏的出现，浏览器窗口的高度差。将其作为底部支付组件距离下的距离值即可。该方案主要需要考虑：虚拟工具栏的高度在多个设备上是否统一。如果不统一，那么这个方法是行不通的，更难受的是，你将面临这个问题无解的尴尬境地。于是找测试人员借了4台华为设备，通过计算发现高度几乎一模一样（呼吸沉重），其值约为95px。然后我们通过ua判断是不是x5内核。如果是x5内核下，则支付组件的样式为：style={{position:`fixed`,width:`100%`,left:0,bottom:navigator.userAgent.toLowerCase().includes(`qq浏览器`）？`95px`:0,...etc,}}三种方法综合考虑，最后选择最后一种方法。与第一种方式相比，更加稳定，与第二种方式相比，对交互的干扰最小。这是目前最合适的答案。但是由于x5内核并没有提供获取虚拟工具栏实际高度的方法，而且在多台设备上发现确实存在2px的高度差距，所以这也是一个隐患。最后想说的是，x5真是个大坑，不负“移动IE6”的名头。腾讯在增加一些安全措施的同时，把本就好用的webkit改得一塌糊涂，严重影响了它的可用性。毫不夸张地说，得不偿失。最可恨的是没有完整的文档，对开发者很不友好。而那些将自家系统浏览器应用到x5内核的“带货者”，身边也围满了不友善的开发者团队。不管AGZY的感受如何，我还是不敢相信这样的公司能够颠覆人类通信技术的难关。最后附上x5内核坑总结的链接，希望对你有用：《QQ浏览器X5内核问题汇总》，有问题请留言。