前言

flexbox 在移动端浏览器支持的已经比较好了,但是最近在开发过程中遇到了一个问题,只在 iOS8下出现,目前iOS8 已知的机型有, iphone5s, iphone6, iphone6p

解决方案

首先查了一下 caniuse 上 flexbox的情况 https://caniuse.com/#search=flexbox,发现已知的问题中有 safari 10 以下的版本会有问题。

由于我用的是 Vue 官方 webpack 模板构建的项目,自带 postcss, 在package.json 中是可以指定 browserlist 的,也就是兼容到的浏览器版本,他默认的配置是这样的:

  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]

那个百分比好像是指浏览器使用量,大于1% 的,最近两个版本的,并且不支持ie8
而在线查到的大于 1% 的只有 iOS Safari 10+, 而 iOS 8 里面用的是 Safari 8, 所以显然这里没有支持 iOS 8

查了一下 官方文档,发现可以这样写,即最低兼容到 iOS7

  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8",
    "iOS 7"
  ]

试了下,必须重启 dev 服务。

对比了下最终生成的css, 只是添加了一行

display: -webkit-flex;

也验证了其他渠道查到的 iOS 兼容低版本使用这句代码的说法。

总结

display: -webkit-flex;

这句话应该就能解决大部分问题了

参考文档