Question

我为大（桌面）和小型（移动）设备创建了一个网站。不仅.css文件彼此不同，而且保存动画的.js文件也不同。我现在的问题是，如果显示器很小，我不知道如何使浏览器使用.js文件用于小型设备，如果显示器很大，则不知道如何使用大型设备的.js文件。是否有任何可能的解决方案只使用一个带有两个Java脚本文件的网站空间自动选择屏幕大小？

Answer 1

使用JQuery，您可以执行以下操作：

＆＃13;

if ( $(window).width() > 739) {      
  //Add your javascript for large screens here 
} 
else {
  //Add your javascript for small screens here 
}

＆＃13;

这样你只需要一个JS文件。

Answer 2

我不确定这是不是好方法，但您也可以使用简单的javascript来检测移动浏览器

<script>
if( /Android|iPhone|iPad|BlackBerry|IEMobile/i.test(navigator.userAgent) ) {
 // include mobile
} 
else {
//include desktop
}
</script>

Answer 3

你走了：

if (screen.width > 768) {
    //keep your desktop js here
}

if (screen.width < 769) {
    //keep your mobile js here
}

Answer 4

您可以在使用以下方法检查窗口大小后动态加载JavaScript文件：

var file = window.innerWidth < 800 ? 'small.js' : 'big.js'
var script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.setAttribute('src', file);

Answer 5

测试用户代理比测试窗口宽度更强大。这是一个可以帮助您的图书馆：WURFL.io

只需将lib抓到您的页面并添加：

if (WURFL.is_mobile) {
    //add mobiles scripts
}

如何在一个网站上使用两个JavaScript（.js）文件？

5 个答案: