前端杂谈 · Web

原生js判断访问设备是PC还是平板或手机做不同数据处理

小编 · 4月16日 · 2020年

场景需求

在一些特殊情况下,我们需要在不同的设备上加载不同的网页样式,比如说在移动端隐藏掉百度的通栏广告。这个时候就需要获取当前设备的具体类型了,我们可以通过以下原生JS来实现:

原生js判断访问设备是PC还是平板或手机做不同数据处理

代码

<script>
		var os = function (){
            var ua = navigator.userAgent,
            isWindowsPhone = /(?:Windows Phone)/.test(ua),
            isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone,
            isAndroid = /(?:Android)/.test(ua),
            isFireFox = /(?:Firefox)/.test(ua),
            isChrome = /(?:Chrome|CriOS)/.test(ua),
            isTablet = /(?:iPad|PlayBook)/.test(ua) || (isAndroid && !/(?:Mobile)/.test(ua)) || (isFireFox && /(?:Tablet)/.test(ua)),
            isPhone = /(?:iPhone)/.test(ua) && !isTablet,
            isPc = !isPhone && !isAndroid && !isSymbian;
            return {
                isTablet: isTablet,
                isPhone: isPhone,
                isAndroid: isAndroid,
                isPc: isPc
            };	
        }();
        if (os.isAndroid || os.isPhone) {   
        	// 手机
            alert("当前是手机打开")
        } else if (os.isTablet) {
        	// 平板
            alert("当前是平板打开")
        } else if (os.isPc) {
        	// pc
            alert("当前是pc打开")
        }
</script>

通过以上代码,我们可以很好的控制对应设备上展现的具体内容。

1 条回应

必须 注册 为本站用户, 登录 后才可以发表评论!

  1. 乔治弟弟2021-2-20 · 14:37

    想问大佬一个问题,浏览器是怎么区分安卓系统的手机和安卓系统的平板?