Question

我的网站有一个脚本，如果从移动设备查看页面，格式和样式会发生变化。在网站的2/3页面上，脚本效果很好，就像我想要的那样。但是在最后一个，用于更改格式和样式的脚本运行但不完全。我已经尝试在我的.html文档的末尾和开头运行脚本标记中的代码，但没有任何变化。代码是：

<script>    
    if( jQuery.browser.mobile == true ) {
        alert(true);

        $("#siteHeader").css({
            "position": "absolute",
            "width": $(window).innerWidth + 10 + "px",
        });

        $("#mainContent").css({
            "top": "898px",
        });

        $("#queensTitle").css({
            "display": "none",
        });

        $("#pageTitle").css({
            "text-align": "left",
            "width": "100%",
        });

        $("#pageTitleText").css({
            "width": "93%",
            "margin-left": "20px",
        });

        $("#siteMenu").css({
            "padding-left": "0px",
            "padding-top": "7px",
            "height": "initial",
            "margin-top": "initial",
            "text-align": "center",
            "border-bottom": "28px solid #063e53",
        });

        $(".menuItems").css({
            "width": "100%",
            "height": "initial",
            "float": "initial",
            "margin": "auto",
            "font-size": "5em",
            "font-weight": "700",
            "padding": "0px",
        });

        $("body").width($("#siteMenu").width() - 15).css({
        });

        if ($(location).attr("pathname") == "/drama/about-us-template.html") {
            $("#aboutUsDesc").css({
                "font-size": "1.7em",
            });

            $("#backgroundImageAU").height(247 + $("#aboutUsTitleContainer").height() + $("#aboutUsDescContainer").height() + 21);
        };
    };
</script>

#siteHeader格式已更改，#mainContent已更改，但没有其他更改。但是，如果我通过控制台运行上述代码或在运行页面时按CTRL-F5，它将按我的意愿运行。这可能是什么问题？

（PS。我已经搜索了stackoverflow并发现了类似标题的问题，但完全不同的情况，我尝试了他们的解决方案，但无济于事）

Here是指向我网站的链接。我正在使用谷歌Chrome开发者工具设备仿真和我自己的手机来测试移动视图。

Answer 1

如果在任何时候jQuery的各个部分都没有在DOM中找到一个元素，那么它将抛出异常并且脚本将不再执行。

$("#queensTitle")  => undefined

然后调用

$("#queensTitle").css({ ... });

将导致脚本停止执行，此后不会执行任何其他操作。在尝试设置CSS之前，您应该尝试检查元素

var elem = $("#queensTitle");
if ( elem ) {
   elem.css({ "display": "none" })
}

请注意，您不需要额外的＆＃39;，＆＃39;在声明结束和结束之间＆＃39;}＆＃39;因为一些浏览器会抛出异常，因为解析器需要额外的语句。

运行脚本时，浏览器控制台中是否报告了任何实际错误或异常？

jQuery＆amp; HTML：脚本从控制台运行，但不从文件或<script> </script>运行

1 个答案: