华为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进行操作，最后完美的解决了这个小问题。