Question

我使用媒体查询将移动访问者定位到单独的移动专用样式表。问题是索引页面上有使用JS的元素，我需要关闭移动版本 - 我该怎么做？

补充说明：我对JS不熟悉 - 我可以使用html和css并使用其他人js： - /

关于下面的一些评论，我担心由于加载不必要的代码而导致移动设备的加载时间。有人能够善意地告诉我要添加到我的元素中的内容，告诉doc只加载js if if not mobile？这是正确的问题吗？

Answer 1

最佳解决方案是仅加载针对移动版本的脚本。由于许多设备都有数据上限，因此您不希望用户加载他们不需要的脚本。因此，您可以通过PHP或JavaScript检测其浏览器，然后为其平台加载所需的文件。

Answer 2

为什么不使用也检测媒体查询相同规格的脚本？这样你就可以有选择地激活脚本。

1140 CSS Grid框架中存在一个此类脚本，用于支持旧浏览器上的媒体查询。您可以查看它，看看如何利用它。

Here's an article解释了如何检查屏幕宽度和高度以模拟媒体查询屏幕检测。

顺便说一下。 CSS仅用于样式化，仅此而已。

Answer 3

我假设您的意思是页面上有元素，其中嵌入了脚本。您需要做的第一件事是摆脱嵌入式脚本，例如元素上的onclick属性。需要将这些脚本移动到自己的外部JS文件中。完成此操作后，您只能包含该站点的移动版本的JS文件。

Answer 4

两个选项：

您可以在桌面上安装一个加载所有其他脚本的脚本，如果您只使用非侵入式Javascript（例如jquery），这是一个不错的选择。

另一个选择是不首先在服务器端生成这些脚本。

Answer 5

媒体查询可能是为移动用户提供替代样式的最佳解决方案。遗憾的是，在页面逻辑的情况下，media元素没有<script>属性可以继续进行。

但是，您可以提供一个脚本加载器，它将根据您的媒体查询根据浏览器选择的样式表加载所需的.js文件。我不知道如何以直接，优雅的方式做到这一点，但有一个很好的黑客。您必须使用唯一声明（虚拟，不重要或设计不同）“标记”每个.css，并在页面加载后从JS中检查它以确定浏览器应用了哪个样式表。

CSS可能如下所示：

@media handheld, screen and (max-width:1023px) {
    body {margin-top: 1px}
}
@media screen and (min-width:1024px) {
    body {margin-top: 0px}
}
/* These would be separate .css files in a real example */

随附的JS如下：

window.setTimeout('wait()', 10);
function wait() {
    if (!document.body)
        window.setTimeout('wait()', 100)
    else
       onLoad();
}

function onLoad() {
    var load = document.createElement('script');
    var head = document.getElementsByTagName('head')[0];
    var body = document.getElementsByTagName('body')[0];
    var mark = window.getComputedStyle(body).getPropertyValue('margin-top');
    switch (mark) {
        case '0px':
            load.setAttribute('src', 'handheld.js');
            break;
        case '1px':
            load.setAttribute('src', 'screen.js');
            break;
        default:
            load.setAttribute('src', 'somethingelse.js');
    }
    head.appendChild(load);
}

使用css关闭javascript？

5 个答案: