Question

我正在做一个快速响应的网站，但最奇怪的是，在我为ipad添加了特定的css查询后，网站完全中断，它永远不会停止加载。

这是指向网站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很疯狂甚至想要杀死页面）

Answer 1

问题出在JS而不是CSS中，因为代码在functions.js，第853行被无限循环捕获。

从我所看到的，你试图逐渐增加元素.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()，或者确保它可以完成循环，如果您需要其代码运行的话。

CSS媒体查询使浏览器挂起

1 个答案: