最近在负责前端React项目开发,因为之前写RN的时候都是熟练使用Flex弹性盒子模型,转到React项目时自然地就直接用这个属性了。漏考虑了兼容性,待到测试同学拿着装ios8系统的iphone6手机测试的时候,那界面就全乱套了,我立马想到了 不兼容性,各种查询找到了针对移动端的解决方案(一般mobile的浏览器内核都要高一些)
因为iphone使用的也是webkit内核,解决方案如下:
display: flex;
display: -webkit-flex; //适配低版本写法
flex-direction: column;
-webkit-flex-direction: column;//适配低版本写法
类似其他属性 都加下-webkit-xxx ...
flex:1;
-webkit-box-flex: 1;
-webkit-flex: 1;