html5解决华为原生浏览器底部栏兼容问题

更新日期: 2024-03-28阅读: 922标签: 兼容

我们之前开发的H5网页,有客户反馈页面底部被浏览器下方的工具栏遮住了,经过测试发现目前只有华为原生x5浏览器底部栏出现这个兼容问题,它遮住了底部页面,造成了这个样式兼容问题。

可以看出:在华为浏览器中下方工具条的高度不算在浏览器自身bom高度上,而是算网页dom的一部分。更通俗地理解可以为,它就是个z-index:无限高;position:fixed;bottom:0的<div/>。

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


1.x5内核强制“开启全屏”

有没有那么一种设置,可以让这个浏览器组件像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增高:

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

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

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

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


3.将非全屏模式下,底部工具栏占用的空间减掉

就是算出在“全屏和非全屏模式”下,由于底部虚拟工具栏的出现,而造成浏览器视窗的高度差。将其作为底部组件距离下的距离值即可。这种解决方式主要有一点需要考虑:改虚拟工具栏,在多台设备上的高度是否统一。若不统一,那么此方法不可行,更难受的是,那么就面临着此题无解的尴尬局面。于是我找测试人员借来4台华为设备,通过计算发现高度几乎完全一致,其值大概是95px,那么我们通过ua判定是否为x5内核,如果是x5内核下,则设置底部组件的style为:

style={{
  position: `fixed`,
  width: `100%`,
  left: 0,
  bottom: navigator.userAgent.toLowerCase().includes(`qqbrowser`) ? `95px` : 0,
}}

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

链接: https://www.fly63.com/article/detial/12697

CSS/CSS3常用的样式兼容,样式总结

这篇文章主要介绍了css中常用但是又难记的样式作为总结,方便大家学习和使用。包括了‘单行缩略号‘、’css圆角兼容’、‘元素阴影’,‘border取消宽度影响’,‘css3的背景渐变’,‘css的透明’等等

CSS3 nth-child的使用,详解css中nth的作用,以及nth-child的兼容写法

:nth-child是css3的一个比较常用的选择器。它用于匹配属于其父元素中的子元素,不论元素的类型。 它的参数可以是数字、关键词或公式。

CSS 3中-webkit-, -moz-, -o-, -ms-这些私有前缀的含义和兼容

css3作为页面样式的表现语言,增加了很多新的属性,但是部分css3属性在一些浏览器上还处于试验阶段,所以为了有效的显示css3的样式,对应不同的浏览器内核需要不同的前缀声明。

css定义变量_css原生变量的使用和兼容 附带还有更高性能,文件更高压缩率的好处

在开发中,css样式有一些属性往往需要重复使用,为了避免代码冗余,降低维护成本。我们需要使用CSS预编译工具【Sass/Less/Stylus】,随着这些工具的流行,CSS变量也开始规范制定,目前很多浏览器都已经支持了

caniuse.com_判断浏览器对css3、html5的兼容性测试工具

caniuse.com 是一个工具性的网站,帮助人们了解各个浏览器以及它们的不同版本对 HTML5、CSS3 等高级特性的支持情况。直接在上面的输入框中输入想要搜索的属性。然后结果就直接出来了。

web浏览器在线兼容性测试工具_检测html网页在不同浏览器上的兼容问题

对于web前端开发者而言,为了确保html代码在不同浏览器上能正常工作,是一件很麻烦的事情,幸运的是,有很多优秀的工具可以帮助测试浏览器的兼容性,下面就为大家推荐一下比较流行的web浏览器在线兼容性测试工具。

原生js兼容写法_在ie标准下的兼容性写法

经常使用原生js,就要考虑到一些浏览器上的兼容,尤其是IE,下面就整理关于js的一些兼容性写法

解决IE不兼容document.getElementByClassName()的实现方法

在使用原生js时候,需要通过class样式名来获取dom对象,发现在IE8以下是不支持document.getElementByClassName()这种方法的。那么我们如何来实现获取classname的兼容写法呢?

es6之解构赋值

es6的语法已经出了很长的时间了,在使用上也可以通过babel这类的编译工具转译为浏览器可以识别的es5的语法,这篇文章主要会介绍解构赋值基本用法以及在实际使用场景中相比es5语法的优势

document.head.appendChild(element) 在 IE8 及以下报错

问题:在开发中会遇到动态添加 script 标签的情况。但是在 IE8 以下会报如下错误:SCRIPT5007: Unable to get value of the property appendChild: object is null or undefined,解决办法如下

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!