自丢网

 找回密码
 立即注册
搜索
查看: 55|回复: 1

手机端和电脑PC端分别加载不同的js文件(JS自适应不同宽屏幕)

[复制链接]

站长QQ:515138

UID
1
丢币
54
主题
806
帖子
866
在线时间
414 小时
最后登录
2019-9-20
发表于 2019-9-7 13:38:33 | 查看: 55|回复: 1 | 显示全部楼层 |阅读模式
手机端和电脑PC端分别加载不同的js文件(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.   
  7. // userAgent判断  
  8. if( /Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent)){  
  9. document.write('<script type="text/javascript" charset="utf-8" src="123.js"><\/script>');  
  10. }  
  11. </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.   
  15. // alert("手机浏览!");  
  16.   
  17. document.write('<script type="text/javascript" charset="utf-8" src="123.js"><\/script>');  
  18. } else {  
  19.   
  20. // alert("PC浏览!");  
  21. document.write('<script type="text/javascript" charset="utf-8" src="123.js"><\/script>');  
  22. }  
  23. }  
  24. browserRedirect();  
  25. </script>  
复制代码
自丢网测试一般情况第一种方法就可以满足大家需求。


推荐给好友: [复制链接]
楼主热帖
回复

使用道具 举报

UID
13
丢币
3
主题
89
帖子
439
在线时间
14 小时
最后登录
2019-9-18
发表于 2019-9-7 13:44:52 | 显示全部楼层
技术学习教程网,支持一下。
回复

使用道具 举报

网站地图|百度统计|免责声明|Archiver|手机版|小黑屋|ZiDiu.Com ( 粤ICP备17166275号 )

GMT+8, 2019-9-21 00:08 , Processed in 0.140625 second(s), 36 queries .

Powered by Discuz!

© Comsenz Inc.

快速回复 返回顶部 返回列表