显示：弯曲；不适用于 iPad（Chrome 和 Safari）

Posted 2023-03-06

【中文标题】显示：弯曲；不适用于 iPad（Chrome 和 Safari）

【英文标题】：display: flex; doesn't work on iPad (both Chrome and Safari)

【发布时间】：2016-08-21 00:19:05

【问题描述】：

此代码在计算机上按预期工作，但 在 iPad 版 Chrome 47 和 iPad 版 Safari 上完全无法呈现 display: flex（横向视图，宽度 1024 像素）。

这很奇怪，因为 flex 应该很早就在 Chrome 上得到很好的支持了。

*  margin: 0; padding: 0; 
#header  height: 60px; display: -webkit-flex; display: flex; 
#topleft  flex: 0 0 155px; height: 100%; background-color: green; 
#topmid  flex: 0 0 40%; height: 100%; background-color: blue; 
#topright  flex: 1; background-color: yellow; 

<div id="header">
  <div id="topleft">Topleft</div>
  <div id="topmid">Topmid</div>
  <div id="topright">Topright</div>
</div>

怎么了？

【问题讨论】：

哇...我用flex 测试的例子越多，我看到的失败例子就越多。示例：codepen.io/chriscoyier/pen/qazmI 在装有 Chrome 47 的 iPad mini 上根本无法正确呈现。

【参考方案1】：

如果您的 iPad 运行的不是 ios 9，您需要将-webkit-flex: 0 0 155px; 添加到#topleft，将-webkit-flex: 0 0 40%; 添加到#topmid，并将-webkit-flex: 1; 添加到#topright。

根据您包含display: -webkit-flex; 做出假设

因此，您的新 CSS 可能如下所示：

*  margin: 0; padding: 0; 
#header  height: 60px; display: -webkit-flex; display: flex; 
#topleft  -webkit-flex: 0 0 155px; flex: 0 0 155px; height: 100%; background-color: green; 
#topmid  -webkit-flex: 0 0 40%; flex: 0 0 40%; height: 100%; background-color: blue; 
#topright  -webkit-flex: 1; flex: 1; background-color: yellow; 

另外，iPad 上的 Chrome 仍在使用 Safari 引擎...它只是一个 web 视图，因此我们无法获得我们在 android 设备上获得的所有最新 Chrome 优点。