【web前端技术】判断是否是手机端

简介: 【web前端技术】判断是否是手机端

通常在判断浏览终端类型时,会用后端来判断请求时从哪种设备发出的,根据请求中的User-Agent来判断,但是在某些情况下,还是会用到前端检测终端类型,并进行操作,本文就是在解决这个问题。在查阅了大量网络资料后,我将这些资料进行了整理。



每个客户端都带有自身的UA标识,通过JavaScript,可以获取客户端标识,我们可以获取浏览器的userAgent,用正则来判断手机是ios(苹果)还是Android(安卓)客户端。

常用跳转代码

以下是一段常用的前端检测设备类型,然后进行跳转的代码,以下代码你可以进行随意复制,修改,以达到你所要求的效果。

<script type="text/javascript">
 // borwserRedirect
 (function browserRedirect(){
  var sUserAgent = navigator.userAgent.toLowerCase();
  var bIsIpad = sUserAgent.match(/ipad/i) == 'ipad';
  var bIsIphone = sUserAgent.match(/iphone os/i) == 'iphone os';
  var bIsMidp = sUserAgent.match(/midp/i) == 'midp';
  var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == 'rv:1.2.3.4';
  var bIsUc = sUserAgent.match(/ucweb/i) == 'web';
  var bIsCE = sUserAgent.match(/windows ce/i) == 'windows ce';
  var bIsWM = sUserAgent.match(/windows mobile/i) == 'windows mobile';
  var bIsAndroid = sUserAgent.match(/android/i) == 'android';
  if(bIsIpad || bIsIphone || bIsMidp || bIsUc7 || bIsUc || bIsCE || bIsWM || bIsAndroid ){
  window.location.href = '跳转的移动端网址';
  }
 })();
 </script>
<script type="text/javascript"> 
<!-- 
  //平台、设备和操作系统 
  var system = { 
   win: false, 
   mac: false, 
   xll: false, 
   ipad:false 
  }; 
  //检测平台 
  var p = navigator.platform; 
  system.win = p.indexOf("Win") == 0; 
  system.mac = p.indexOf("Mac") == 0; 
  system.x11 = (p == "X11") || (p.indexOf("Linux") == 0); 
  system.ipad = (navigator.userAgent.match(/iPad/i) != null)?true:false; 
  //跳转语句,如果是手机访问就自动跳转到wap.baidu.com页面 
  if (system.win || system.mac || system.xll||system.ipad) { 
  } else { 
   window.location.href = "http://www.jdpatro.com/3g/"; 
  } 
--> 
</script>

腾讯跳转

以下代码来自某腾讯的网页中的代码,同样可以起到检测网页终端,并进行跳转的功能。

<script type="text/javascript">
if(window.location.toString().indexOf('pref=padindex') != -1){
}else{
 if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))){ 
  if(window.location.href.indexOf("?mobile")<0){
  try{
   if(/Android|Windows Phone|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){
    window.location.href="http://xw.qq.com/index.htm";
   }else if(/iPad/i.test(navigator.userAgent)){
    //window.location.href="http://www.qq.com/pad/"
   }else{
    window.location.href="http://xw.qq.com/simple/s/index/"
   }
  }catch(e){}
 }
 }
}
</script>
<script type="text/javascript"> 
<!-- 
  //平台、设备和操作系统 
  var system = { 
   win: false, 
   mac: false, 
   xll: false, 
   ipad:false 
  }; 
  //检测平台 
  var p = navigator.platform; 
  system.win = p.indexOf("Win") == 0; 
  system.mac = p.indexOf("Mac") == 0; 
  system.x11 = (p == "X11") || (p.indexOf("Linux") == 0); 
  system.ipad = (navigator.userAgent.match(/iPad/i) != null)?true:false; 
  //跳转语句,如果是手机访问就自动跳转到wap.baidu.com页面 
  if (system.win || system.mac || system.xll||system.ipad) { 
  } else { 
   window.location.href = "http://www.jdpatro.com/3g/"; 
  } 
--> 
</script>
目录
相关文章
|
1天前
|
消息中间件 JavaScript Java
关于如何提高Web服务端并发效率的异步编程技术
【7月更文挑战第4天】异步编程技术是提升Web服务并发效率的关键。包括: 1. 事件驱动编程,如Node.js的事件回调; 2. 异步任务队列,利用消息队列如RabbitMQ或Kafka解耦处理; 3. 异步I/O,Java的CompletableFuture实现非阻塞操作; 4. 协程,Python的async/await提供同步感的异步执行; 5. 线程/进程池,通过固定资源池管理并发任务,减少系统开销。 这些技术能增强系统性能和响应速度。然而,异步编程也需考虑正确性、稳定性和调试挑战。
|
2天前
|
移动开发 前端开发 网络协议
Python Web实时通信新纪元:基于WebSocket的前后端分离技术探索
【7月更文挑战第16天】WebSocket增强Web实时性,Python借助Flask-SocketIO简化实现。安装`flask`和`flask-socketio`,示例展示服务器端接收连接及消息并广播响应,前端HTML用Socket.IO库连接并监听事件。WebSocket开启双向通信新时代,助力动态Web应用开发。
|
11天前
|
前端开发 JavaScript API
现代前端开发中的Web组件化设计与实践
在现代前端开发中,Web组件化已经成为了一个关键的设计思想和实践方法。本文探讨了Web组件化的概念、优势以及如何在实际项目中进行设计和应用。通过分析实例和最佳实践,展示了如何利用组件化开发提升前端开发效率和代码可维护性,同时也解决了在大型项目中常见的代码重用和团队协作问题。
|
14天前
|
人工智能 开发框架 Devops
.NET技术概览:** 本文探讨了.NET的核心特性,包括多语言支持、Common Language Runtime、丰富的类库和跨平台能力,强调其在企业级、Web、移动及游戏开发中的应用。
【7月更文挑战第4天】.NET技术概览:** 本文探讨了.NET的核心特性,包括多语言支持、Common Language Runtime、丰富的类库和跨平台能力,强调其在企业级、Web、移动及游戏开发中的应用。此外,讨论了.NET如何通过性能优化、DevOps集成、AI与ML支持以及开源策略应对未来挑战,为开发者提供强大工具,共创软件开发新篇章。
20 3
|
16天前
|
监控 JavaScript 前端开发
前端 JS 经典:Web 性能指标
前端 JS 经典:Web 性能指标
13 1
|
6天前
|
前端开发 JavaScript PHP
技术心得:前端点击按钮,导入excel文件,上传到后台,excel接收和更新数据
技术心得:前端点击按钮,导入excel文件,上传到后台,excel接收和更新数据
|
7天前
|
JavaScript 前端开发 数据安全/隐私保护
vue 前端 邮箱、密码、手机号码等输入验证规则
vue 前端 邮箱、密码、手机号码等输入验证规则
19 0
|
11天前
|
机器学习/深度学习 人工智能 前端开发
跨界融合:前端技术与人工智能的奇妙联盟
在技术的世界里,前端开发不再是孤岛。本文探讨了前端技术如何与人工智能领域结合,为用户体验与功能提升开辟了新的可能性。从机器学习到智能推荐系统,我们将看到这些技术如何在前端应用中发挥其 ultimate 的作用。
|
13天前
|
Web App开发
软件开发常见流程之移动端调试方法,利用Chrome(谷歌浏览器)的模拟手机调试,搭建本地Web服务器,手机和服务器在一个局域网,通过手机访问服务器,使用服务器,利用ip实现域名访问
软件开发常见流程之移动端调试方法,利用Chrome(谷歌浏览器)的模拟手机调试,搭建本地Web服务器,手机和服务器在一个局域网,通过手机访问服务器,使用服务器,利用ip实现域名访问
|
16天前
|
前端开发 JavaScript API
只会用插件可不行,这些前端动画技术同样值得收藏-JavaScript篇(下)
只会用插件可不行,这些前端动画技术同样值得收藏-JavaScript篇(下)
15 0