页面设计首次在移动视图中中断

Question

我完全被一个奇怪的情况弄糊涂了，我不知道这是否是正常情况，如果完全正常，请原谅我。 我有一个在几乎所有桌面分辨率下都能正常工作的页面。但是当我第一次在我的移动视图中查看页面时，设计就中断了。然后，如果我刷新页面，一切都会变得正常。然后从那以后，由于页面在浏览器缓存中，问题就解决了。这个问题的原因可能是什么。提前致谢。

我在页脚加载 jquery-1.11.1.min.js 和加载 bootstrap.min.js 之前为我的页面加载以下特定脚本

    <script>
        $(document).ready(function () {
            $(".clsIPArtGalUL li:nth-child(1)").addClass("width-2x");
            $(".clsIPArtGalUL li:nth-child(4)").addClass("width-2x");

        });
    </script>

Answer 1

这可能是因为您的 jQuery 代码没有响应 window.onresize

如果您为页面调整大小时要运行的所有代码添加一个名为 resize() 的函数，请在以下情况下使用此代码调用它：

window.onresize = resize(); // The window is resized
resize(); // When this code is executed. 

更新：一个问题，你能用：

.clsIPArtGalUL li:nth-child(1),
.clsIPArtGalUL li:nth-child(4) {
  /* .width-2x code here */
}

CSS 在移动设备和桌面设备中往往会导致更少的错误。