Question

我正在考虑基于设备类型实现/调用JS，就像我们如何使用CSS Media Queries一样。

<link rel="stylesheet" type="text/css" href="desktop.css" media="all" />
<link rel="stylesheet" type="text/css" href="ipad.css" media="only screen and (device-width:768px)" />

同样可以定义一些JS并根据设备（桌面/移动设备）调用它们

我知道一种显而易见的方法就是使用if语句来区分2和

if (navigation.userAgent.match(/iPad/) != null)

但我所看到的只是正确的JS应该在设备中加载/调用，例如只应该为桌面调用desktop.js，而iPad只能调用iPad.js（类似于css媒体查询的渲染方式）

请建议。

Answer 1

这应该改进为：

// put this in the end of the page to add JS to body (perfomance optimisation on loading behaviour

var body = document.getElementsByTagName('body')[0];
var script = document.createElement('script');
script.type = 'text/javascript'; // you can omit this when using HTML5 Doctype
if (navigation.userAgent.match(/iPad/) != null) {
script.src = 'ipad.js';
} else {
    script.src = 'desktop.js';
}
body.appendChild(script);

Answer 2

您可以动态地将正确文件的脚本标记放入页面中，如下所示：

var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
if (navigation.userAgent.match(/iPad/) != null) {
    script.src = 'ipad.js';
} else {
    script.src = 'desktop.js';
}
head.appendChild(script);

Javascript的媒体查询方法

2 个答案: