华为P30等手机对H5的部分不兼容问题【踩坑记录】

昨天做H5页面,在兼容性测试的时候,发现所有手机都兼容,只有华为p30pro这款手机不兼容,记录一下,下面效果对比。(公司新做的1元集盲盒活动,有兴趣的可以参与一下,关注沃小盒公众号,点击一元集盲盒参与即可)

1、解决思路:华为部分手机自带浏览器使用的UC低版本内核,对flex支持非常有限,所以使用flex,calc等属性的时候,有时添加-webkit、 -moz-calc等前缀也是无效的,其原因就是不能用行内、行内块元素,要改成block才能更好的支持flex,当元素使用flex:1时,要增加width:0%,且不能使用margin:0 auto;参考文章

2、具体问题:(有兴趣的可以看看,没兴趣的就直接看上面的解决办法就可以了)

废话不多说,看下什么问题(左边是其他手机正常的样式,右面是华为p30不兼容的样式)
在这里插入图片描述在这里插入图片描述
3、问题分析:看两张页面的对比,明显看出是换行了,因为我这里把右侧的点击获取验证码的按钮设置的是固定的宽,然后左边input使用的是calc设置的自适应宽度,理想情况下他是兼容一切手机屏幕宽度的适配属性,所以导致我一度的认为是华为p30这款手机的浏览器不兼容calc这个属性,导致没有width,而使用默认的width,而默认的width又太宽,导致左边input的width加上右面button的width大于屏幕的width导致换行了,然后我加了一些网上说的了类似于-webkit等等的前缀,又做了一个width:129px,设置了一个备用宽度,专门用于那些不兼容calc属性的浏览器,结果还是不尽人意,我再次尝试将左侧的按钮width变小,还是不行,至此,我们已经排除了这个calc不兼容的问题,后来发现原来是华为p30pro这款手机自带浏览器版本过低导致的浏览器兼容问题,从而使得浏览器对flex的支持非常有限,所以使用flex,有时候添加了webkit前缀也是无效的;

4、解决办法:其原因是不能用行内、行内块元素,要改成block才能更好的支持flex,当元素使用flex:1时,要增加width:0%;且不能使用margin:0 auto;最终设置如下:

-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
display: block;
width: 0%;

下面是我自己的解决办法:
我将左侧的input设置成块级元素,此时,右侧的button一定是换行的,这时候我们可以使用flex,进行强制不换行,或者使用position属性的绝对定位,然后将父级元素设置成relative,这样使得更容易对右侧的button进行操作,最后完美的解决了这个小问题。

展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 创作都市 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读