0

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

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

关于下面的一些评论，由于加载了不必要的代码，我担心移动设备的加载时间。有人可以告诉我要添加到我的元素中以告诉文档仅在不是移动设备时才加载 js 吗？这是正确的问题吗？

4

5 回答 5

2

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

于 2012-05-09T01:02:51.663 回答
1

为什么不使用一个脚本来检测与您的媒体查询相同的规范呢？这样您就可以有选择地激活脚本。

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

这是一篇文章，解释了如何检查屏幕宽度和高度以模拟媒体查询屏幕检测。

顺便一提。CSS用于样式，仅此而已。

于 2012-05-09T01:00:42.777 回答
0

媒体查询可能是为移动用户提供替代样式的最佳解决方案。不幸的是，在页面逻辑的情况下，元素没有类似的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);
}
于 2013-04-26T18:43:10.627 回答
0

两种选择：

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

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

于 2012-05-09T01:22:33.493 回答
0

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

于 2012-05-09T01:03:55.490 回答