下载鸥 > 网站下载 > 开发教程 > JS/JQuery

JS判断苹果iPhone与iPad、安卓设备类型适配

700 2021-06-01 02:00:02

收藏
JS判断苹果iPhone与iPad、安卓设备类型适配
在网站开发的过程中,一些涉及到资源下载的网站会通过判断不同系统手机来展示或跳转不同的网页,比如iPhone和Android。下面我们简单介绍如何用javascript判断iPhone或Android手机以及iPad访问。

JS判断苹果iPhone与iPad、安卓设备类型适配

网上常用的代码

/**
 * [isMobile 判断平台]
 * @param test: 0:iPhone    1:Android
 */
function ismobile(test){
    var u = navigator.userAgent, app = navigator.appVersion;
    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(/iPhone|mac|iPod|iPad/i.test(navigator.userAgent)){
        return '0';
       }else{
        return '1';
       }
      }catch(e){}
     }
    }else if( u.indexOf('iPad') > -1){
        return '0';
    }else{
        return '1';
    }
};

使用方法:
var pla=ismobile(1);

如果pla返回的是0:iPhone 1:Android
<script type="text/javascript">
var browser = {
  versions: function () {
  var u = navigator.userAgent, app = navigator.appVersion;
  return {//移动终端浏览器版本信息
   trident: u.indexOf('Trident') > -1, //IE内核
   presto: u.indexOf('Presto') > -1, //opera内核
   webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
   gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
   mobile: !!u.match(/AppleWebKit.*Mobile/i) || !!u.match(/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/), //是否为移动终端
   ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
   android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
   iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否为iPhone或者QQHD浏览器
   iPad: u.indexOf('iPad') > -1, //是否iPad
   webApp: u.indexOf('Safari') == -1 //是否web应该程序,没有头部与底部
  };
  } (),
  language: (navigator.browserLanguage || navigator.language).toLowerCase()
}
if (browser.versions.iPhone || browser.versions.iPad || browser.versions.ios) {
window.location.href = "https://www.jb51.net";
}
if (browser.versions.android) {
window.location.href = "http://www.qq.com";
}
</script>

如何判断是否是 iPad 浏览器呢,关键是看它的 User Agent 中是否有 iPad。iPad 使用的是 Safari Mobile 浏览器,他的的 User Agent 是:
Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10

Javascript代码
function is_iPad(){
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/iPad/i)=="ipad") {
return true;
} else {
return false;
}
}
 

综合判断方式

综合以上全部的判断与合并之后,我们可以归纳出通过JS判断ipad,iphone,android的方式:
<script type="text/javascript"> 
var bForcepc = fGetQuery("dv") == "pc"; 
function fBrowserRedirect(){ 
 var sUserAgent = navigator.userAgent.toLowerCase(); 
 var bIsIpad = sUserAgent.match(/ipad/i) == "ipad"; 
 var bIsIphoneOs = 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) == "ucweb"; 
 var bIsAndroid = sUserAgent.match(/android/i) == "android"; 
 var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce"; 
 var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile"; 
 if(bIsIpad){ 
 var sUrl = location.href; 
 if(!bForcepc){ 
  window.location.href = "http://m.jb51.net/?ipad"; 
 } 
 } 
 if(bIsIphoneOs || bIsAndroid){ 
 var sUrl = location.href; 
 if(!bForcepc){ 
  window.location.href = "http://m.jb51.net/?iphone"; 
 } 
 } 
 if(bIsMidp||bIsUc7||bIsUc||bIsCE||bIsWM){ 
 var sUrl = location.href; 
 if(!bForcepc){ 
  window.location.href = "http://m.jb51.net/"; 
 } 
 } 
} 
function fGetQuery(name){//获取参数值 
 var sUrl = window.location.search.substr(1); 
 var r = sUrl.match(new RegExp("(^|&)" + name + "=([^&]*)(&|$)")); 
 return (r == null ? null : unescape(r[2])); 
} 
function fShowVerBlock(){ 
 if(bForcepc){ 
 document.getElementById("dv_block").style.display = "block"; 
 } 
 else{ 
 document.getElementById("ad_block").style.display = "block"; 
 } 
} 
fBrowserRedirect(); 
</script>

本文地址:https://xzo.com.cn/develop/js/1005.html

有帮助,很赞!

信息来源:网络
导出教程 下载word版教程
发表评论 共有条评论
关于JS/JQuery


JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。JavaScript 基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式和声明式(如函数式编程)风格。

JavaScript十分强大,不管是前端页面开发、视觉动态渲染、数据交互还是后端逻辑处理,都可以通过JS实现。虽然它是作为开发Web页面的脚本语言而出名,但是它也被用到了很多非浏览器环境中。

推荐JS/JQuery开发教程
JavaScript过滤XSS攻击方法
JavaScript过滤XSS攻击方法

什么是XSS?XSS(Cross Site Scripting),跨站脚本攻击,是一种允许攻击者在另外一个...

1 382
jquery怎样获取textarea用户输入的行数?
jquery怎样获取textarea用户输入的行数?

jQuery是一个相当好用的js插件,通过jquery我们可以实现很多功能,例如今天要介...

0 540
怎样点击清除ul里的全部li信息?
怎样点击清除ul里的全部li信息?

在通过jQuery做数据交互时我们可能存在这样的需求:通过点击按钮清空ul里的li...

1 510
JS获取当前时间、日期、星期并每秒更新一次
JS获取当前时间、日期、星期并每秒更新一次

很多网站上会有当前年月日、星期、时间的展示。这个展示用php做未免浪费性...

0 400
$(window).height() 和 $(document).height()有什么不同?
$(window).height() 和 $(document).height()有什么不同?

我们常用$(window).height() 和 $(document).height()来监听当前高度,但这个...

1 384
JS点击复制data-*属性(支持多个元素)
JS点击复制data-*属性(支持多个元素)

分享一段js原生点击复制data-*属性的源码,根据onclick事件触发,复制当前元素...

0 392
JS控制输入字数的两个方案
JS控制输入字数的两个方案

我们在文章输入框中经常有用到字数控制,但字数控制有两种方案,一种是字母/空...

0 385
jQuery监听点击事件弹出关注二维码教程
jQuery监听点击事件弹出关注二维码教程

通过jQuery实现点击关注按钮弹出二维码是一个比较常用的功能,今天鸥哥讲讲这...

0 459
推荐插件
帝国cms智能自动审核按星期几审核指定栏目带推送插件
帝国cms智能自动审核按星期几审核指定栏目带推送插件

采集站的必备资源是自动审核,要做到日收录也离不开定时发布。而本插件的自动...

0 1230
帝国cms网站会员登录与退出历史记录日志插件
帝国cms网站会员登录与退出历史记录日志插件

帝国cms默认只有上次登录时间与ip,没有一个记录清单,所以今天,我们分享这个帝...

0 346
帝国cms访问统计ip地址链接与封禁插件下载
帝国cms访问统计ip地址链接与封禁插件下载

下载鸥开发了这款帝国cms封禁ip插件,自动记录访问情况,让我们可以更快的识别...

0 953
帝国cms联想词搜索高级搜索插件下载
帝国cms联想词搜索高级搜索插件下载

帝国CMS自带的搜索功能虽然强大,但也有很强的局限性 -- 必须关键词完全匹配...

0 711
帝国cms批量添加后台用户插件
帝国cms批量添加后台用户插件

使用帝国cms的企业用户、新闻资讯类站点的用户很多,此类站点很多时候需要有...

0 656
帝国cms百度文字识别ocr接口对接插件
帝国cms百度文字识别ocr接口对接插件

许多网站会做一些小功能小插件给客户使用以增强用户黏性,比如图片转文字,这种...

0 432
帝国CMS内网用户静态站点文章访客统计插件
帝国CMS内网用户静态站点文章访客统计插件

本插件适用于内网用户,可查看单篇文章访问者ip地址。如果添加访问者ip组,可查...

0 516
帝国cms百度AI图像清晰度增强api接口对接插件
帝国cms百度AI图像清晰度增强api接口对接插件

通过本插件,可以实现帝国cms网站对接百度云api实现图像清晰度增强的功能。经...

0 479
客服QQ:341553759
扫码咨询 常见问题 >
官方交流群:90432500
点击加入