Java媒体查询方法

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);