如果移动设备告诉 html doc 不要加载 js答案

【问题标题】：tell html doc not to load js if mobile device如果移动设备告诉 html doc 不要加载 js
【发布时间】：2012-05-17 12:43:40
【问题描述】：

我正在这里寻找一两行代码：

有人可以提供代码放在 html 文档的 head 部分，说明如果移动设备则不加载 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)"

不胜感激

【问题讨论】：

你可能想参考这个：stackoverflow.com/questions/2053695/…
感谢我点击了链接。令人失望的是它说脚本无论如何都会加载，我希望通过不在移动设备上运行脚本来改善/帮助移动设备上的加载时间/数据使用。因此，如果我要写的话，请阅读那里的内容：
你可以检查screen size到js然后只加载需要的scriptsdynamically..我会写一个快速的！

标签： javascript media-queries

【解决方案1】：

鉴于：“如果是移动设备，则不加载 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 像素或更小的屏幕，这与第一条语句相反。因此，如果脚本应该在小屏幕上运行而不是在大屏幕上运行，请将 > 更改为 <=。

【讨论】：

标志被翻转了。应该是<。而且，使用document.write 也不是一个好主意。
如果设备有一个小屏幕，OP 不希望脚本运行，这个标志对我来说似乎是正确的（尽管不是 CSS 规则中使用的）。
我不确定，但他确实说过So I'm looking for a piece of code that is based on the same rule: media="only screen and (max-device-width: 480px)"。
(window.matchMedia("(min-width: 480px)").matches) 应该被使用。

【解决方案2】：

我不确定之前的答案会如何与视网膜显示器一起使用。我会这样做：

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

来自here的sn-p

【讨论】：

我想这是一个更好的解决方案，因为那里已经有很多全高清移动设备。
用户代理测试是最糟糕的检查方式。使用window.devicePixelRatio 检查高密度显示器。
@Ry 实际上，您的方法在很多情况下都会失败，例如视网膜 macbook。（只是想更新这个旧线程上的知识）
@StevenStark：嗯？ devicePixelRatio 在 Retina MacBook 上应该是 2。（我是在 Retina MacBook 上输入的，刚刚检查过。）
@Ry 这已经很老了，但 devicePixelRatio 不会使用旧的 ios（视网膜前）或黑莓。有点离群，但尽管如此，我的方式比你的方式好。

【解决方案3】：

现在可以使用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

【讨论】：

【解决方案4】：

你可以这样做。

测试屏幕宽高看看是否是移动设备。
使用 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。

【讨论】：

屏幕宽度和高度不能告诉你它是手机，只是它有一个小屏幕。那不应该是>= 480 或只是> 479 或其他什么。
@RobG，这可能告诉你它是一个移动设备。
iPad 是移动设备，它的屏幕尺寸是多少？我的办公桌上放着一部网络电话，它虽小，但不会移动很远。
看，media="only screen and (max-device-width: 480px)"

【解决方案5】：

最好的方法是将它添加到“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>');
}

【讨论】：