前几天弄了一个网页播放器,就是本站现在左下角那个了。播放器其实很简单,就是调用一个“JS”文件就完成了。但是,自从加了这个播放器后,有朋友提醒我当用户用手机访问本站时网页不能滚动了。我试了一下确实是这样的,就是说播放器目前在手机端还是存在一些BUG的。于是我就换了一个思路,当用户用手机访问本站时,就不加载这个播放器的JS文件。后来觉得判断移动设备太过复杂,因为我是一个超级懒的人,所以就有了现在这个判断方式,就是判断设备的宽度。当设备宽度小于某一数值的时候就不加载播放器的js文件,这里我设置的640,就是说当设备宽度小于640的时候,播放器就不会加载,从而也就不会影响手机用户正常访问本站。下面将代码送上,以供各位参考。

<script>
        if (screen && screen.width > 640) {
                document.write("这里是要输出的内容");
        }
</script>

需要特别说明的是“screen && screen.width”获取到的是设备的物理宽度,而不是浏览器窗口的可见宽度,就是说如果你在分辨率为1920*xxx的电脑上访问该网页,“screen && screen.width”的值是不会随着你调整浏览器窗口的大小而改变的。就算你把浏览器调到500px宽,“screen && screen.width”的值还是1920。
如果你想要根据浏览器窗口的可见宽度来决定是否加载这个JS文件,那么你需要把上面代码中的“screen && screen.width”修改为“document.body.clientWidth”。这个值就是会随着你调整浏览器窗口大小而改变的。