专栏首页Vue开发社区JavaScript判断设备类型的实现

JavaScript判断设备类型的实现

实现思路

可以通过 JavaScript 来实现判断当前的设备类型:navigator 是 JavaScript 中的一个独立的对象,用于提供用户所使用的浏览器以及操作系统等信息,以 navigator 对象属性的形式来提供。所有浏览器都支持该对象。

而 navigator 对象有一个 userAgent 属性,会返回用户的设备操作系统和浏览器的信息。

此时可以通过 userAgent 判断是 H5 浏览器还是 PC 浏览器。

而 App 不能获取 Window 的浏览器对象 navigator 的。那么可以在之前判断是否存在 navigator,不存在即为 App。

js判断移动端还是pc端

function fIsMobile(){
    return /Android|iPhone|iPad|iPod|BlackBerry|webOS|Windows Phone|SymbianOS|IEMobile|Opera Mini/i.test(navigator.userAgent);
}

或者:

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{
        // 移动端
    }
}

浏览器宽度区分

我们可以利用js代码,来判断访问者设备屏幕的宽度的大小来确定访客的设备是否为移动设备。

window.screen.availWidth:用来获取浏览器屏幕的宽度。 window.screen.availHeight:用来获取浏览器屏幕的高度。

<script>
if(window.screen.availWidth<768){
    //移动端
}else{
    //PC端
}
</script>

js判断是否ios或Android

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:

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区分判断访客的浏览器

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");
    }
文章分享自微信公众号:
前端开发社区

本文参与 腾讯云自媒体分享计划 ,欢迎热爱写作的你一起参与!

原始发表时间:2021-10-25
如有侵权,请联系 cloudcommunity@tencent.com 删除。
登录 后参与评论
0 条评论

相关文章

  • Javascript判断设备类型,检测是否为微信打开

    IT工作者
  • JavaScript中的类型判断

    类型判断在 web 开发中有非常广泛的应用,简单的有判断数字还是字符串,进阶一点的有判断数组还是对象,再进阶一点的有判断日期、正则、错误类型,再再进阶一点还有比...

    ConardLi
  • js判断用户设备类型

    在浏览器当中  可以通过 navigator.userAgent获取浏览器信息(类型及系统)

    IT工作者
  • JavaScript 类型判断方法

    javaScript 里共有六种基本数据类型,分别为String, Number, Boolean, Null, Undefined及Symbol,还有一种Ob...

    愤怒的小鸟
  • javascript 数据类型的判断

    Boolean, Number, String, Function, Array, Date, RegExp, Object, Error, Symbol等等.

    用户7293182
  • JavaScript数据类型判断

    instanceof可以用来判断对象是否是某个类的实例。instanceof的实现原理出门左转查看手撕instanceof

    闲花手札
  • JavaScript中的类型判断方法(全)

    基本数据类型:Undefined、Null、Boolean、Number、String,Symbol

    伯约同学
  • JavaScript的数据类型及判断

    基本数据类型,也称为简单数据类型,在ES5中有以下五种:Undefined、Null、Boolean、Number和String,在ES6中新增了一种简单的数据...

    Jimmy_is_jimmy
  • win10 uwp 判断设备类型

    对于本地 127.0.0.1 就是一个内部IP,之外,还有10.0.0.0/24 ,172.16.0.0/16 , 192.168.0.0/16 , 169.2...

    林德熙
  • win10 uwp 判断设备类型

    本文提供一个方法,可以判断当前的设备是PC还是手机,UWP 判断当前的 PC 是否平板模式,判断是否苏非的设备

    林德熙
  • win10 uwp 判断设备类型

    本文提供一个方法,可以判断当前的设备是PC还是手机,UWP 判断当前的 PC 是否平板模式,判断是否苏非的设备

    林德熙
  • JavaScript 判断数据类型方法

    在 ECMAScript 规范中,共定义了 7 种数据类型,分为 基本类型 和 引用类型 两大类,如下所示:

    玖柒的小窝
  • 利用Javascript判断操作系统的类型

    deepcc
  • JavaScript初探之判断数据类型

    文渊同学
  • JavaScript类型判断的四种方法

    本文作者分享了JavaScript类型判断的四种方法:1.typeof、2.instance of、3.Object.prototype.toString.ca...

    ZEHAN
  • 如何使用JavaScript来判断是否为移动设备?

      由于移动设备的显示屏幕相对于桌面显示器来说小很多,在桌面显示器上能够正常显示的内容,到了移动设备中就不正常了。为了实现移动端和桌面端的相互跳转,我们可以通过...

    用户5997198

扫码关注腾讯云开发者

领取腾讯云代金券