1

私は応答性の高い Web サイトを作成していますが、iPad 用の特定の CSS クエリを追加した後、Web サイトが完全に壊れ、読み込みが停止することはありません。

これはサイトhttp://ficm.hacemoscodigo.com/へのリンクです。幅が 1024 より大きい場合はすべて問題ありません。ウィンドウのサイズを 1024 より小さいサイズに変更しても問題ありませんが、最初に、幅が 768px から 1024px の間のウィンドウでロードすると、先ほど説明したエラーが発生します。

これは私の CSS クエリです: (LESS で書かれています)

/* Desktops and laptops ----------- */
@media only screen and (min-width : 1025px) {
#sidebar_ipad{ display: none; }
}

/* iPads (portrait/vertical) ----------- */
@media only screen and (min-width : 768px) and (max-width : 1024px) {

#container{ width: 768px; }

#sidebar_desk{ display: none; }

#sidebar_ipad{ display: block; width: 768px; float: none;
    #logo{ width: 238px; float: left;
        img{ width: 100%; }
    }
    #menu_fijo{ width: 492px; float: left; margin-left: 10px; }
}
}

これが CSS のせいであるかどうかはわかりませんが、CSS に関連する何かがサイトをひどく破壊する可能性があることに気が狂いました。(Chrome はおかしくなり、ページを殺したいとさえ思っています)

4

1 に答える 1

4

functions.jsコードが853 行目で無限ループに陥っているため、問題は CSS ではなく JS にあります。

私が見ることができることから、.ajusta_tracking高さが変わるまで、要素の文字間隔を徐々に広げようとしています。ただし、要素は の内側#sidebar_deskにあり、#sidebar_deskが非表示の場合、要素の高さは変わりません。高さが変化した場合にのみコードがループから抜け出すため、クラッシュしたように見えて永遠に実行されます。

functions.js からの関連コードは次のとおりです (無関係な部分は切り取られています)。

function ajusta_tracking( selector ){
    var clase = $(selector);
    var altura = clase.height(); // clase.height() is 0, as it is hidden
    var nuevaAltura = altura;
    while( nuevaAltura === altura ){
        interletraje += 0.1;
        clase.css( 'letter-spacing', interletraje + 'em' );
        // clase.height() is always 0, as it is hidden
        // so the following line does not change anything
        nuevaAltura = clase.height(); 
    }
}

ajusta_tracking('.ajusta_tracking');

非表示の要素で実行しないようajusta_tracking()にするか、そのコードを実行する必要がある場合でもループを終了できることを確認してください。

于 2013-04-30T17:20:49.203 に答える