javascript - 使用媒体查询仅包含移动端的 JS 文件

Question

我正在尝试使用 media 属性仅将我的 javascript 文件链接到移动设备，而不是桌面设备。

这是我的链接标签：

<script type="text/javascript" media="screen and (max-width : 850px)" src="mobile.js"></script>

但这不起作用，它将 JS 链接到所有内容。

如果JS文件满足这些查询条件，我如何只链接它？

如果我不能只在移动设备上运行 JS 怎么办？

Answer 1

使用 javascript 怎么样？

<script type="text/javascript">

if (screen.width < 980) { 

    document.write('<script type="text/javascript" src="mobile.js"></script>');  
 } 

</script>

Answer 2

有两种方法可以做到这一点：

1. 将所有脚本都放在页面上，并在触发断点时调用它们
2. 仅在需要时才加载脚本，一旦遇到断点

无论哪种方式，你都需要这个：

查询.js

这将允许您为 js 添加媒体查询回调。

Answer 3

重量轻，可在任何地方工作，无需开销。

if (document.documentElement.clientWidth < 900) {   // scripts }