Foundation 在 Safari 和 iphone 上没有响应

Posted 2023-02-19

【中文标题】Foundation 在 Safari 和 iphone 上没有响应

【英文标题】：Foundation is not responsive on Safari and iphone

【发布时间】：2016-07-25 13:13:35

【问题描述】：

我的网站在 safari 上莫名其妙地崩溃了，没有响应（到目前为止，基础 zurb 在任何其他浏览器上都可以使用）。 即使我不使用 js boundle 也会发生这种情况。

这场浩劫上线：http://diet.paperide.com

我不知道为什么！谢谢...

【问题讨论】：

我认为你最好检查一下你的代码：Foundation 的 css 被禁用

【参考方案1】：

在文档的 head 元素中添加以下内容：

<meta name="viewport" content="width=device-width" />

【参考方案2】：

首先解决问题时，您能做的最好的事情是使用可用的资源，同时忽略琐碎的政治。 html5 + XML 解析器 = 赢。使用 HTML5 并将您的页面呈现为应用程序，这将快速帮助您追踪严重的呈现问题：

if (isset($_SERVER['HTTP_ACCEPT']) && stristr($_SERVER['HTTP_ACCEPT'],'application/xhtml+xml'))

 header('Content-Type: application/xhtml+xml');

使用 HTML 验证器，我确实看到了一些问题，即您将块元素作为 i 元素的子元素。首先不要使用旧的i 元素，坚持使用em，因为它更适合可访问性/屏幕阅读器。其次，如果您需要将某些内容呈现为块，请在其中放置一个 span 元素并使用 CSS display: block;。

您应该尝试的下一件事是彻底禁用 javascript 并查看页面是否仍然呈现。

第三，您需要检查 HTTP 请求；所有的请求都是 HTTP 200 还是 304？

如果您仍然遇到问题，接下来我会尝试彻底禁用整个 CSS，如果问题停止，则只需暂时禁用大块 CSS。

我遇到过很多浏览器问题。一个问题是 IE 会完全锁定，因为 php 没有将某些内容输出到 JavaScript 变量中，所以冻结 IE 的输出是var example = ;。

我现在有一台 Mac，如果您发表评论，我很乐意验证您是否发现并解决了问题。有人可能会告诉您问题所在，尽管拥有确定问题所在的技能非常更有价值。 :-)

【参考方案3】：

问题出在：app.scss，gulp 脚本是这样配置的：

//@include foundation-grid;
@include foundation-flex-grid;
[...]
@include foundation-flex-classes;

代替：

    @include foundation-grid;
[...]
    // @include foundation-flex-grid;
    // @include foundation-flex-classes;

生成一个非常不同的 css ...（无论如何都适用于任何非 Safari 浏览器）。