请选择 进入手机版 | 继续访问电脑版
admin 发表于 2019-09-07 | 阅读数: 295 |阅读模式 | 打印 | 点击分享朋友圈
手机端和电脑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>  
复制代码
自丢网测试一般情况第一种方法就可以满足大家需求。

推荐给好友: [复制链接]
推荐文章

举报

相关文章

    JS执行机制 JavaScript语言的一大特点就是单线程,也就是说,同-个时间只能做一件事。这是因为Javascript这门脚本语言诞生的使命所致一JavaScript 是为处理页面中用户的交互,以及操作DOM而诞生的。比如我们对某个DOM元素进行添加 ...
    什么是location对象,它的属性 window对象给我们提供了-个location属性用于获取或设置窗体的URL ,并且可以用于解析URL。因为这个属性返回的是一个对象 ,所以我们将这个属性也称为location对象。 统资源定位符(Uniform Resource Locator, URL)是互 ...
    location对象的常用属性 location对象属性 返回值 location.href 获取或者设置整个URL location. host 返回主机(域名) www.zidiu.com location.port 返回端口号如果未写返回空字符串 location.pathname 返回路径 location.search 返回参数 l ...
    js实现多少秒后跳转另一个页面效果展示附代码方法教程 JavaScript实现多少秒后跳转另一个页面效果展示附代码方法教程
    js中location对象的常用方法 location对象方法 返回值 location.assign() 跟href -样,可以跳转页面(也称为重定向页面) location.replace() 替换当前页面,因为不记录历史,所以不能后退页面 location.reload() 重新加载页面,相当于刷新按钮或者 ...
    js功能相当于F5或者实现强制刷新作用代码 JavaScript功能相当于F5或者实现强制刷新作用代码代码语法: location.reload()重新加载页面,相当于刷新按钮或者f5如果参数为true强制刷新ctrl+f5。
    js中navigator对象 navigator对象包含有关浏览器的信息,它有很多属性,我们最常用的是userAgent ,该属性可以返回由客户机发送服务器的user-agent头部的值。 下面前端代码可以判断用户那个终端打开页面,实现跳转 ...
    js中history对象 window对象给我们提供了一个history对象,与浏览器历史记录进行交互。该对象包含用户(在浏览器窗口中)访问过的URL。 history对象方法 back() 可以后退功能 forward() 前进功能 go(参数) 前进后退功能参数如果是1前进1 ...
    js中元素偏移量offset系列操作案例代码教程 JavaScript中元素偏移量offset系列操作案例代码教程,offset翻译过来就是偏移量,我们使用offset系列相关属性可以动态的得到该元素的位置(偏移)、大小等。输出结果为: 8 1.html:24 8 1.html:25 200 1.html:26 200 这 ...
    js中offsetLeft使用方法教程 offsetLeft它以带有定位的父亲为准,如果没有父亲或者父亲没有定位则以body为准。 下面我们看个案例代码: 输出结果为:0
    js中offsetWidth使用方法教程 javascript中offsetWidth使用方法教程,可以得到元素的大小宽度和高度是包含padding + border + width console.log(div.offsetWidth);输出的结果为:300 这里要注意的是返回值不带单位。 ...
    offsetParent和son.parentNode区别与联系 offsetParent和son.parentNode区别与联系 offsetParent返回的是带定位的父亲元素。 son.parentNode返回的上一级亲父亲,不管带不带定位。 代码案例: 输出结果为: ...
    js中offset与style区别与联系 js中offset与style区别与联系 ●offset可以得到任意样式表中的样式值 ●style 只能得到行内样式表中的样式值 offset系列获得的数值是没有单位的 ●style.width 获得的是带有单位的字符串 offsetWidth包含padding+ ...
    js中元素可视区client系列 client翻译过来就是客户端,我们使用client系列的相关属性来获取元素可视区的相关信息。通过client系列的相关属性可以动态的得到元素的边框大小、元愫大小等。 client系列属性 作用 element.lientTop 返回元素上边框 ...
    (function( {})()表示什么意思 (function( {})()表示什么意思,表示这个函数立即执行。立即执行函数:不需要调用,立马能够自己执行的函数主要作用:创建一个独立的作用域。
    js中devicePixelRatio表示什么意思 js中devicePixelRatio表示什么意思 代码: dpr表示物理像素比。
    onpageshow和onload事件区别与联系 onpageshow和onload事件区别与联系 onpageshow 事件在用户浏览网页时触发。 onpageshow 事件类似于 onload 事件,onload 事件在页面第一次加载时触发, onpageshow 事件在每次加载页面时触发,即 onload 事件在页面 ...
    js中的persisted e.persisted返回的是true就是说如果这个页面是从缓存取过来的页面,也需要从新计算一下rem的大小。
    js中元素滚动scroll系列 javascript中元素滚动scroll系列 scroll翻译过来就是滚动的,我们使用scroll系列的相关属性可以动态的得到该元素的大小、滚动距离等。 scroll系列属性 element.scrollTop 返回被卷去的上侧距离,返回数值不带单位 ele ...
    window.pageYoffset和element.scrollTop区别与联系 window.pageYoffset和element.scrollTop区别与联系 需要用到页面滚动事件scroll因为是页面滚动,所以事件源是document。 滚动到某个位置,就是判断页面被卷去的上部值。 页面被卷去的头部:可以通过window.pageYOffset ...
    js函数库 javascript函数库
    JS添加和删除class类名 javascript如何给一个节点添加和删除class名 添加:节点.classList.add("类名"); 删除:节点.classList.remove("类名"); 类名不要带‘.’ 。
    原生JS添加类名 删除类名 为 元素添加 class: document.getElementById("myDIV").classList.add("mystyle"); 为 元素添加多个类: document.getElementById("myDIV").classList.add("mystyle", "anotherClass", "thirdClass"); 为 元素 ...
 
香蕉 发表于 2019-09-07 | 点击分享朋友圈
技术学习教程网,支持一下。

举报

 

今日:137     昨日:40    总数:7198
我们承接以下业务
网站建设:提供品牌官网解决方案 模板制作:仿站/效果图转模板 CSS布局调整:重新修改Web排版布局 网站维护:网站/服务器/数据库维护优化 其他问题解决:解决建站所遇到的问题 联系QQ: 6369341 电子邮箱: 6369341@qq.com
排行榜

关注我们:微信扫一扫

官方微信

手机版访问

我们的服务宗旨:

客户至上,用心服务

微信号:q515138

QQ/邮箱:6369341 / 6369341@qq.com

版权声明:部分资源来源于互联网,如有侵权请邮寄联系站长处理

Copyright   ©2019-2050  自丢网Powered by Www.Zidiu.Com 技术维护:6369341    ( 粤ICP备17166275号 )