CSS中flex对部分IOS版本兼容性问题

最新推荐文章于 2025-02-26 09:39:50 发布

专注前端研究二十年

最新推荐文章于 2025-02-26 09:39:50 发布

阅读量8.4k

点赞数 11

分类专栏： HTML和CSS 文章标签： css 前端 ios

本文链接：https://blog.youkuaiyun.com/AI_huihui/article/details/124344530

版权

HTML和CSS 专栏收录该内容

4 篇文章

订阅专栏

本文主要讨论了iOS系统中前端开发遇到的flex布局兼容性问题，特别是在iPhone 6s/6P/6sP上的表现。提出了通过添加特定前缀和属性来改善兼容性，并提醒开发者注意webpack打包时可能丢失的CSS内容。同时，提供了检查和修复Webpack配置的建议，包括检查cssloader的minimize选项及避免使用OptimizeCSSPlugin。最后，给出了.postcssrc.js的配置示例，以确保CSS在不同浏览器中的兼容性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

众所周知，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"
      ]
    }
  }
}

若有其他情况，望告知！