Foundation在Safari和iphone上没有响应

Question

我的网站在safari上神秘地崩溃了，没有响应（到目前为止，foundation zurb在任何其他浏览器上都能工作）。即使我不使用js边界，这种情况也会发生。

这场灾难是在线的：http://diet.paperide.com

我不知道为什么！谢谢

Answer 1

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

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

Answer 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电脑，如果你有意见，我很乐意验证你是否发现并解决了问题。有人可能会告诉你问题是什么，尽管拥有确定问题是什么的技能更有价值。：-）

Answer 3

问题出现在：app.scss中，gump脚本的配置如下：

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

代替：

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

正在生成一个非常不同的css。。。（这在任何非safari浏览器上都有效）。