Javascript 如果移动设备，告诉 html doc 不要加载 js
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10508669/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
tell html doc not to load js if mobile device
提问by Doug Fir
I'm cheekily seeking a line or two of code on the fly here:
我正在这里快速地寻找一两行代码：
Could someone be kind enough to provide code to place in the head section of html doc that says if mobile then do not load JS?
有人可以提供代码以放置在 html doc 的 head 部分，该部分表示如果移动则不加载 JS？
This is being used in conjunction with the following CSS media query:
这与以下 CSS 媒体查询结合使用：
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="m/styles_mobile.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)"
所以我正在寻找一段基于相同规则的代码：media="only screen and (max-device-width: 480px)"
Would be very grateful
将不胜感激
回答by RobG
Given: "if mobile then do not load JS", and presuming "mobile" is defined by screens with a width of 480 pixels or less, then something like the following should work:
鉴于：“如果移动然后不加载 JS”，并且假设“移动”是由宽度为 480 像素或更小的屏幕定义的，那么类似以下内容应该可以工作：
<script>
if (screen && screen.width > 480) {
document.write('<script type="text/javascript" src="foo.js"><\/script>');
}
</script>
That will add the script element only if the screen is greater than 480 pixels wide.
仅当屏幕宽度大于 480 像素时才会添加脚本元素。
The CSS rule in the OP is:
OP 中的 CSS 规则是：
<... media="only screen and (max-device-width: 480px)" ...>
which will target screens of 480 pixels or less, which is contrary to to the first statement. Therefore change >to <=if the script should run on small screens and not run on larger ones.
这将针对 480 像素或更小的屏幕，这与第一个陈述相反。因此更改>为<=脚本是否应该在小屏幕上运行而不是在大屏幕上运行。
回答by Dave
I'm not sure how the previous answers would go with retina displays. I would do something like:
我不确定之前的答案如何与视网膜显示器搭配使用。我会做这样的事情：
if( /Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent))
document.write('<script type="text/javascript" src="foo.js"><\/script>');
snippet from here
来自这里的片段
回答by marcus
Now it's possible to use window.matchMedia
现在可以使用 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/matchMediahttp://caniuse.com/#feat=matchmedia
https://developer.mozilla.org/docs/Web/API/Window/matchMedia http://caniuse.com/#feat=matchmedia
回答by u283863
You can do it like this.
你可以这样做。
- Test the screen width and height to see if it is a mobile device.
- Load in scripts using JavaScript.
- 测试屏幕宽度和高度，看看它是否是移动设备。
- 使用 JavaScript 加载脚本。
What you can do is this:
你可以做的是：
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);
}
}
Notice it is screen.width <= 480.
注意它是screen.width <= 480。
回答by user3423593
The best way to do it would be to add it around whole the actual mobile script inside the "foo.js" file. The DOM will have trouble loading the tag if you suddenly append it.
最好的方法是将它添加到“foo.js”文件中的整个实际移动脚本中。如果您突然附加标签，DOM 将无法加载标签。
if (screen && screen.width > 480) {
// Whole your script here
}
Instead of:
代替：
if (screen && screen.width > 480) {
document.write('<script type="text/javascript" src="foo.js"><\/script>');
}
