15

我在这里厚颜无耻地寻找一两行代码:

有人可以提供代码放置在 html 文档的头部,说明如果移动设备则不加载 JS?

这与以下 CSS 媒体查询结合使用:

<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="m/styles_mobile.css" />

所以我正在寻找一段基于相同规则的代码: media="only screen and (max-device-width: 480px)"

将不胜感激

4

5 回答 5

29

给定:“如果移动设备则不加载 JS ”,并假设“移动设备”由宽度为 480 像素或更小的屏幕定义,那么类似以下的内容应该可以工作:

<script>
if (screen && screen.width > 480) {
  document.write('<script type="text/javascript" src="foo.js"><\/script>');
}
</script>

仅当屏幕宽度大于 480 像素时才会添加脚本元素。

OP中的CSS规则是:

<... media="only screen and (max-device-width: 480px)" ...>

这将针对 480 像素或更小的屏幕,这与第一条语句相反。因此更改><=脚本是否应该在小屏幕上运行而不是在大屏幕上运行。

于 2012-05-09T01:46:52.550 回答
13

我不确定以前的答案如何与视网膜显示器一起使用。我会做类似的事情:

if( /Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent))
 document.write('<script type="text/javascript" src="foo.js"><\/script>');

从这里摘录

于 2012-07-13T01:20:27.703 回答
9

现在可以使用window.matchMedia

if (window.matchMedia("(min-width: 480px)").matches) {
  document.write('<script type="text/javascript" src="foo.js"><\/script>');
}

https://developer.mozilla.org/docs/Web/API/Window/matchMedia http://caniuse.com/#feat=matchmedia

于 2016-12-23T11:41:39.183 回答
5

你可以这样做。

  1. 测试屏幕宽高,看是否是移动设备。
  2. 使用 JavaScript 加载脚本。

你可以做的是:

var scripts = ["foo.js",       //Put all your scripts here.
               "bar.js"];

if(screen.width <= 480){
    for(var i=0;i<scripts.length;i++){
              //-with jQuery (one line!)-
        $("head").append('<script type="text/javascript" src="'+scripts[i]+'"><\/script>');
                 //-or jQuery free-
        var scriptEle = document.createElement("script");
        scriptEle.setAttribute("type","text/javascript");
        scriptEle.setAttribute("src",scripts[i]);
        document.getElementsByTagName("head")[0].appendElement(scriptEle);
    }
}

注意它是screen.width <= 480

于 2012-05-09T01:46:57.413 回答
1

最好的方法是将它添加到“foo.js”文件中的整个实际移动脚本周围。如果您突然附加标签,DOM 将无法加载它。

if (screen && screen.width > 480) {
 // Whole your script here
}

代替:

if (screen && screen.width > 480) {
  document.write('<script type="text/javascript" src="foo.js"><\/script>');
}
于 2018-05-01T18:25:30.750 回答