手机端和PC端分别加载不同的js文件

分手机端和PC端其实方法很多，我们在响应式设计、响应式网站建设中经常碰到此类需求。下面说说我们在项目中遇到的需求：

手机端和PC端分别加载不同的js客服代码（注意：是要在PC和手机端分别加载不同的js文件）

第一种方法（简单型）：

1. <script type="text/javascript">
2. // 根据屏幕尺寸
3. if (screen && screen.width > 480) {
4. document.write(‘<script type="text/javascript" charset="utf-8" src="123.js"><\/script>‘);
5. }
6. // userAgent判断
7. if( /Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent)){
8. document.write(‘<script type="text/javascript" charset="utf-8" src="123.js"><\/script>‘);
9. }
10. </script>

第二种方法（已测试通过，项目真实在用）：

1. <script type="text/javascript">
2. function browserRedirect() {
3. var sUserAgent = navigator.userAgent.toLowerCase();
4. var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
5. var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
6. var bIsMidp = sUserAgent.match(/midp/i) == "midp";
7. var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
8. var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
9. var bIsAndroid = sUserAgent.match(/android/i) == "android";
10. var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
11. var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
12. // document.writeln("您的浏览设备为：");
13. if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
14. // alert("手机浏览！");
15. document.write(‘<script type="text/javascript" charset="utf-8" src="123.js"><\/script>‘);
16. } else {
17. // alert("PC浏览！");
18. document.write(‘<script type="text/javascript" charset="utf-8" src="123.js"><\/script>‘);
19. }
20. }
21. browserRedirect();
22. </script>

这样子我们直接在PC端和手机端分别输出不同的js。所以，我们在手机端和PC端分别加载不同的js的需求完美解决了。