你所不知道的iOS8

前言：最近，微信客户端项目进行界面改版（涉及6个界面），项目进行了部分重构，由于漏考虑版本的兼容性问题，待到客服同事拿着装着iOS8的iphone6p手机测试的时候，界面就全都乱套了，立马想到不兼容性，各种查询找到了针对移动端的解决方案（一般mobile的游览器内核都要高一些）。

因为iphone使用的也是webkit内核，解决方案如下：

display:flex;
display:-webkit-flex;   //适配低版本的写法
flex-direction:column;
-webkit-flex-direction:column;  //适配低版本的写法
类似其他属性，都加写-webkit-xxx...
flex：1；
-webkit-flex:1;
ustify-content:center;
-webkit-justify-content:center;
align-items:center;
-webkit-align-items:center;

此次，涉及的iOS8的用户量在2%以下，但早期测试出的问题，可以尽早解决。

一、iOS8.0的历史

在网上查询iOS8的用户量在2%以下，在百度百科得到如下数据，iOS8上线与2014年9月17号，支持iPhone4S及以上设备。

二、iOS8兼容性问题

（1）css flex布局iOS8兼容性问题，大多数情况下都能通过兼容性写法解决，比如：

div{
    display:-webkit-flex;
    display:flex;
    -webkit-flex:1;
    flex:1;
    flex-direction:row;
    -webkit-flex-direction:row;
}

如果以上兼容性写法，还不能解决问题，那就要看看是不是webpack等自动化构建工具打包的时候，导致部分css丢失。可以通过查看打包后的文件查看css内容是否丢失。如果发现是webpack打包导致部分内容丢失，可以试试下面的解决方法，可以通过下面的方法能够解决问题。

检查bulid目录下的utils.js的cssloader是否有minimize:true选项，如下：

const cssLoader = {
    loader:'css-loader',
    options: {
        sourceMap:options.sourceMap,
        minimize:true
}
}

检查webpack.prod.conf.js是否用到OptimizeCSSPlugin插件，如果有，则去掉，如下：

//new OptimizeCSSPlugin
//cssProcessorOptions:$sourceMap
//?(safe:true,map:(inline:false))
//:(safe:true)
//})

在根目录下找到.postcssrc.js文件，将该文件内容替换为下面所示：

module.exports = {
    "plugins":{
     //to edit target browsers:use "browserslist" field in package.json
    "postcss-import":{},
    "autoprefixer":{
       browsers:[
       "last 10 versions",
       "ie >= 6",
       "ie_mob >= 6",
       "ff >= 10",
       "chrome >= 14",
       "safari >= 3",
       "ios >= 4",
       "android >= 4.0"
       ]  
    }
  }
}

上面介绍的方法，主要针对的是webpack打包的时候，由于css插件优化导致部分css内容丢失的解决方法。

介绍个小技巧，在本地运行的页面，复制该页面的URL，如：http://127.0.0.1:8881/#test，然后打开草料二维码,根据url生成二维码，用真机扫描二维码，如果真机上扫出来的页面与本地的一致，说明真机游览器是支持这些css的。

（2）在iOS8上发现的一些比较坑的布局问题：

①元素设置flex:1后，子元素height:100%失效的问题：

<div id="container">
  <div id="div1">
    <div style="height:100%;background-color:green;color:white;">11111</div>
  </div>
  <div id="div2">
    <div style="height:100%;color:white;background-color:blue;">22222</div>
  </div>
  <div id="div3">3</div>
  <div id="div4">4</div>
</div>
<style>
  #container {
     display:flex;
     height:100%;
  }
  #div1 {
    flex:1;
    background-color:yellow;
  }
  #div2 {
    flex:1;
    background-color:red;
  }
  #div3 {
    flex:1;
    background-color:yellow;
  }
  #div4{
    flex:1;
    background-color:red;
  }
</style>

如上，理论上，div1,div2,div3,div4会平分父容器container，并且div1会被背景色为绿色的子元素撑满,div2会被背景色为蓝色的子元素撑满。实际上，iOS8上显示的效果如图1所示。可见div1,div2的子元素的height:100%失效了。解决方法可以通过给div1,div2设置position:relative,然后设置div1,div2的子元素position:absolute;height:100%;width:100%问题即可解决，如图2。

<div id="container">
     <div id="div1">
         <div style="height:100%；background-color:green;color:white;">11111</div>
     </div>
     <div id="div2">
         <div style="height:100%;color:white;background-color:blue;">22222</div>
     </div>
     <div id="div3">3</div>
     <div id="div4">4</div>
</div>
<style>
#container {
    display:flex;
    height:100%;
}
#div1 {
    position:relative;
    flex:1;
    background-color:yellow;
}
#div1 div{
    position:absolute;
    height:100%;
    width:100%;
}
#div2 {
   position:relative;
   flex:1;
   background-color:red;
}
#div3 div {
   position:absolute;
   height:100%;
   width:100%;
}
#div3 {
   flex:1;
   background-color:yellow;
}
#div4 {
   flex:1;
   background-color:red;
}
</style>

图1，height:100%失效

图2，解决height:100%失效的问题

参考博客：css flex布局iOS8兼容性问题 https://blog.csdn.net/qq_20567691/article/details/81201192

猜你喜欢