QQ登录

只需要一步,快速开始

APP扫码登录

只需要一步,快速开始

查看: 2866|回复: 0

[HTML/CSS/JS] JavaScript判断设备类型的实现

[复制链接]

等级头衔

积分成就    金币 : 2861
   泡泡 : 1516
   精华 : 6
   在线时间 : 1322 小时
   最后登录 : 2025-11-29

丰功伟绩

优秀达人突出贡献荣誉管理论坛元老活跃会员

联系方式
发表于 2021-10-28 09:13:59 | 显示全部楼层 |阅读模式
一、实现思路
) k9 `/ ?  ?- d& @1 n" k& A, J0 T       可以通过 JavaScript 来实现判断当前的设备类型:navigator 是 JavaScript 中的一个独立的对象,用于提供用户所使用的浏览器以及操作系统等信息,以 navigator 对象属性的形式来提供。所有浏览器都支持该对象。
3 z- @. E/ d8 {  }1 f+ B2 L; a1 d       而 navigator 对象有一个 userAgent 属性,会返回用户的设备操作系统和浏览器的信息。 此时可以通过 userAgent 判断是 H5 浏览器还是 PC 浏览器。而 App 不能获取 Window 的浏览器对象 navigator 的。那么可以在之前判断是否存在 navigator,不存在即为 App。9 q; ^# |% u& g7 l( D% O3 C
function fIsMobile(){
    return /Android|iPhone|iPad|iPod|BlackBerry|webOS|Windows Phone|SymbianOS|IEMobile|Opera Mini/i.test(navigator.userAgent);
}
或者:
9 g; h+ Z5 C& u/ a
function iswap() {
    var uA = navigator.userAgent.toLowerCase();
    var ipad = uA.match(/ipad/i) == "ipad";
    var iphone = uA.match(/iphone os/i) == "iphone os";
    var midp = uA.match(/midp/i) == "midp";
    var uc7 = uA.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
    var uc = uA.match(/ucweb/i) == "ucweb";
    var android = uA.match(/android/i) == "android";
    var windowsce = uA.match(/windows ce/i) == "windows ce";
    var windowsmd = uA.match(/windows mobile/i) == "windows mobile"; 
    if (!(ipad || iphone || midp || uc7 || uc || android || windowsce || windowsmd)) {
        // PC 端
    }else{
        // 移动端
    }
}
二、浏览器宽度区分
  J+ ]; X3 Z- U+ f8 G       我们可以利用js代码,来判断访问者设备屏幕的宽度的大小来确定访客的设备是否为移动设备。8 O" k4 [3 M# e" ?' g0 `6 t/ K: `' i$ w$ I
window.screen.availWidth:用来获取浏览器屏幕的宽度。* B. L" D: f9 x! q. R$ b
window.screen.availHeight:用来获取浏览器屏幕的高度。
<script>
if(window.screen.availWidth<768){
    //移动端
}else{
    //PC端
}
</script>
三、js判断是否ios或Android1 X3 i, N. m& A; A1 S3 T
var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
区分Android、iphone、ipad:" v; F% L4 L1 h5 W
ar ua = navigator.userAgent.toLowerCase();
if (/android|adr/gi.test(ua)) {
    // 安卓  
} else if (/\(i[^;]+;( U;)? CPU.+Mac OS X/gi.test(ua)) {
    //苹果  
} else if (/iPad/gi.test(ua)) {
    //ipad  
}
四、js区分判断访客的浏览器
' h* [6 l% E8 v) h2 N
var ua = navigator.userAgent.toLowerCase();
if (/msie/i.test(ua) && !/opera/.test(ua)) {
    alert("IE");
    return;
} else if (/firefox/i.test(ua)) {
    alert("Firefox");
    return;
} else if (/chrome/i.test(ua) && /webkit/i.test(ua) && /mozilla/i.test(ua)) {
    alert("Chrome");
    return;
} else if (/opera/i.test(ua)) {
    alert("Opera");
    return;
} else if (/iPad/i) {
    alert("ipad");
    return;
}
if (/webkit/i.test(ua) && !(/chrome/i.test(ua) && /webkit/i.test(ua) && /mozilla/i.test(ua))) {
    alert("Safari");
    return;
} else {
    alert("unKnow");
    }
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|手机版|小黑屋|paopaomj.COM ( 渝ICP备18007172号|渝公网安备50010502503914号 )

GMT+8, 2025-12-13 11:11

Powered by paopaomj X3.5 © 2016-2025 sitemap

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