jquery - 页面设计首次在移动 View 中中断

Question

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

在加载 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 在移动设备中引起的错误往往更少。