Foundation 在 Safari 和 iphone 上没有响应答案

【问题标题】：Foundation is not responsive on Safari and iphoneFoundation 在 Safari 和 iphone 上没有响应
【发布时间】：2016-07-25 13:13:35
【问题描述】：

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

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

【问题讨论】：

【解决方案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 浏览器）。

【讨论】：