很多时候，我们希望禁止移动端加载某些元素，简单采用 display:none 来隐藏，依然会加载相应资源，拖慢加载速度。
通过 js 代码设定加载条件，就能真正做到按需加载。
给出两种判断条件：
// 屏宽大于 800 的时候加载 '' 内的语句，如果小于 800，则不加载。
if (screen && screen.width > 800) {
document.write('');
}
// 根据 UA 判断，PC 端时加载 `''` 内的语句，如果小于 800，则不加载。
if( !/Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent)){
document.write('');
}这里是一个例子：
<!-- 原始代码 -->
<canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas>
<script type="text/javascript" src="//cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script>
<script type="text/javascript" src="/js/src/fireworks.js"></script>
<!-- 修改后代码 -->
<canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas>
<script>
if (screen && screen.width > 800) {
document.write('<script type="text/javascript" src="https://cdn.bootcss.com/animejs/2.2.0/anime.min.js"><\/script> <script type="text/javascript" src="/js/custom/fireworks.js"><\/script>');
}
</script>注意：
</script>需要加上反斜杠\，变为<\/script>；- 多个语句之间无需分隔，但您可以添加空格，以增强可读性，JavaScript 会忽略多个空格。
参考自 Skyarea ↗