サファリとiphoneでファンデーションが反応しない

Question

私のウェブサイトは、サファリに不思議に壊れてしまい、応答しません。 これはjsバウンドルを使用しない場合でも発生します。

この大惨事は、オンラインである：http://diet.paperide.com

私は理由の見当もつかない！ありがとうございました...

Answer 1

まずは小規模な政治を無視しながら、利用可能なリソースを使用することができます。 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を無効にして、ページがまだレンダリングされているかどうかを確認してください。

第3に、HTTPリクエストを確認する必要があります。すべてのすべての要求HTTP 200または304？

問題が解決しない場合は、CSS全体を無効にして問題が解決したら、CSSの大きなブロックを一時的に無効にしてください。

私はブラウザに多数の問題を抱えてきました。 1つの問題は、PHPがJavaScript変数に何かを出力していないためIEが完全にロックされていたため、IEを凍結した出力がvar example = ;だったためです。

私は今Macを持っています。あなたがコメントをすれば、問題を見つけて解決したことを確認できます。誰かが問題が何であるかを教えてくれるかもしれませんが、それはです。問題が何であるかを判断するスキルを持つことがさらに価値があります。

Answer 2

問題がでました:-)：app.scss、ゴクゴクスクリプトは次のように設定しました：

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

INSTEAD OF：

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

非常に異なるCSSを生成します...（とにかく非サファリブラウザで動作するもの）。

Answer 3

ドキュメントのhead要素内に次の行を追加します。

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