华为P30等手机对H5的部分不兼容问题【踩坑记录】 |
您所在的位置:网站首页 › p30pro拍灯光有问题 › 华为P30等手机对H5的部分不兼容问题【踩坑记录】 |
昨天做H5页面,在兼容性测试的时候,发现所有手机都兼容,只有华为p30pro这款手机不兼容,记录一下,下面效果对比。(公司新做的1元集盲盒活动,有兴趣的可以参与一下,关注沃小盒公众号,点击一元集盲盒参与即可) 1、解决思路:华为部分手机自带浏览器使用的UC低版本内核,对flex支持非常有限,所以使用flex,calc等属性的时候,有时添加-webkit、 -moz-calc等前缀也是无效的,其原因就是不能用行内、行内块元素,要改成block才能更好的支持flex,当元素使用flex:1时,要增加width:0%,且不能使用margin:0 auto;参考文章 2、具体问题:(有兴趣的可以看看,没兴趣的就直接看上面的解决办法就可以了) 废话不多说,看下什么问题(左边是其他手机正常的样式,右面是华为p30不兼容的样式) 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进行操作,最后完美的解决了这个小问题。 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |