仅适用于 iPad 的 Safari 中损坏的站点答案

【问题标题】：Broken site in safari for iPad only仅适用于 iPad 的 Safari 中损坏的站点
【发布时间】：2017-11-20 03:12:32
【问题描述】：

我在上一个网站上遇到过从未见过的问题。这是一个 WordPress 网站，我制作的主题有这个问题：

它在所有导航器和设备上都可以正常工作，除了在 Ipad 的 safari 上只显示网站的标题（header.php 文件的内容）。

我需要有人向我解释那里发生了什么，或者可能告诉我是否存在调试工具（我在 Windows 上开发，我家里有一台 iPad）。

该网站的演示在那里：http://sylvain-galoustoff.com/delim/ 如果需要，我也可以将我的主题上传到 gitHub。

欢迎任何帮助，谢谢。

【问题讨论】：

【解决方案1】：

您正在使用的 display: flex; 属性看起来默认为 display: -webkit-box; 并且搞砸了。

无论您在哪里拨打display: flex，您也需要拨打display: -webkit-flex;。 Reference

有关 flexbox 和 safari 的更多信息see here

【讨论】：

谢谢 Ryan，我在想 -webkit-box 是 safari 中 flex 的等价物。我会检查这个，我会告诉你的。我仍然很困惑它在 iPhone 上运行良好，而不是在 Ipad 上运行良好。
还有一件事：您如何在 Safari iOS 上进行调试？你是怎么得到那个截图的？
我使用BrowserStack 进行跨浏览器/移动测试。这是该网站在iPhone 6S上的外观照片
谢谢。自从您回答以来，我对我的 CSS 文件进行了很多更改，我想这就是为什么它现在在 iPhone 上看起来很杂乱。我还在努力。似乎不是弹性规则前缀导致问题，而是弹性盒中带有 % 单位的高度。再次感谢您的帮助瑞恩 :)
@Sylvain71710 如果你有 Mac，你可以在 iOS 上调试 safari