【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>
目录
相关文章
|
3月前
|
并行计算 前端开发 JavaScript
Web Worker:让前端飞起来的隐形引擎
在现代 Web 开发中,前端性能优化是一个至关重要的课题,尤其是对于计算密集型的应用,如图像处理、视频处理、大规模数据分析等任务。单线程的 JavaScript 引擎常常成为性能瓶颈,导致应用变得迟缓。Web Worker,作为一种强大的技术,使得前端能够在后台进行并行计算,从而实现高效的任务处理,不影响主线程的运行和用户的交互体验。
414 108
|
2月前
|
机器学习/深度学习 数据采集 人工智能
Phi-3 技术报告:手机本地运行的高能力语言模型
Phi-3系列模型通过高质量数据训练与架构创新,实现小体积、高性能。38亿参数的phi-3-mini在手机端可达GPT-3.5水平,支持长上下文、多模态与高效推理,推动AI普惠化。
320 1
|
2月前
|
安全 Java API
Java Web 在线商城项目最新技术实操指南帮助开发者高效完成商城项目开发
本项目基于Spring Boot 3.2与Vue 3构建现代化在线商城,涵盖技术选型、核心功能实现、安全控制与容器化部署,助开发者掌握最新Java Web全栈开发实践。
339 1
|
3月前
|
JavaScript 前端开发 Java
前端框架选择之争:jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
前端框架选择之争:jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
454 72
前端框架选择之争:jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
|
4月前
|
机器学习/深度学习 安全 API
通过UID非法获取手机号的违法行为与技术逻辑剖析别异想天开了-优雅草卓伊凡
通过UID非法获取手机号的违法行为与技术逻辑剖析别异想天开了-优雅草卓伊凡
1520 0
通过UID非法获取手机号的违法行为与技术逻辑剖析别异想天开了-优雅草卓伊凡
|
7月前
|
前端开发 Java 物联网
智慧班牌源码,采用Java + Spring Boot后端框架,搭配Vue2前端技术,支持SaaS云部署
智慧班牌系统是一款基于信息化与物联网技术的校园管理工具,集成电子屏显示、人脸识别及数据交互功能,实现班级信息展示、智能考勤与家校互通。系统采用Java + Spring Boot后端框架,搭配Vue2前端技术,支持SaaS云部署与私有化定制。核心功能涵盖信息发布、考勤管理、教务处理及数据分析,助力校园文化建设与教学优化。其综合性和可扩展性有效打破数据孤岛,提升交互体验并降低管理成本,适用于日常教学、考试管理和应急场景,为智慧校园建设提供全面解决方案。
474 70
|
5月前
|
移动开发 前端开发 JavaScript
前端web创建命令
本项目使用 Vite 搭建 Vue + TypeScript 开发环境,并基于 HTML5 Boilerplate 提供基础模板,快速启动现代前端开发。
72 2
|
5月前
|
Web App开发 编解码 移动开发
零基础音视频入门:你所不知道的Web前端音视频知识
本文回顾了Web端音视频的发展历程,同时还介绍了视频的编码、帧率、比特率等概念,提到了Canvas作为视频播放的替代方案,以及FFmpeg在音视频处理中的重要作用等知识。
169 1
|
5月前
|
缓存 前端开发 应用服务中间件
Web端实时通信技术SSE在携程机票业务中的实践应用
本文介绍了携程机票前端基于Server-Sent Events(SSE)实现服务端推送的企业级全链路通用技术解决方案。文章深入探讨了 SSE 技术在应用过程中包括方案对比、技术选型、链路层优化以及实际效果等多维度的技术细节,为类似使用场景提供普适性参考和借鉴。该方案设计目标是实现通用性,适用于各种网络架构和业务场景。
171 1
|
6月前
|
缓存 前端开发 应用服务中间件
Web端实时通信技术SSE在携程机票业务中的实践应用
本文介绍了携程机票前端基于Server-Sent Events(SSE)实现服务端推送的企业级全链路通用技术解决方案。文章深入探讨了 SSE 技术在应用过程中包括方案对比、技术选型、链路层优化以及实际效果等多维度的技术细节,为类似使用场景提供普适性参考和借鉴。
216 7