[移动开发] CSS中flex对部分IOS版本兼容性问题

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 移动开发 -> CSS中flex对部分IOS版本兼容性问题 -> 正文阅读

[移动开发]CSS中flex对部分IOS版本兼容性问题

众所周知，ios系统老是和我们前端过不去，搞一堆不兼容问题，比如flex布局！

大部分情况下可以通过一下兼容方法来写


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

注意：在小程序页面中父元素使用 display:flex 时，子元素使用 position:absolute 后。在苹果6s/6P/6sP的系统下会出现兼容问题，子元素 position:absolute 不生效页面出现布局混乱。所以当子元素要用 position:absolute ，尽量避免父元素使用 display: flex 布局。否则会出现兼容问题（开发工具测不出问题，只会在真机6s/6P/6sP才能测出问题）

若是以上问题还是没有解决，我们接着看。

查看是否是webpack等自动化构建工具打包的时候导致部分css丢失。可以通过查看打包后的文件查看css内容是否丢失。如果发现是webpack打包导致css部分内容丢失，可以试试下面的解决方法，可以通过以下方法解决

检查 build 目录下 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"
      ]
    }
  }
}

若有其他情况，望告知！