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

场景需求

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

代码

<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>

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

场景需求

代码

在网页字体加载期间所有文本都保持可见状态

WordPress使用webP格式减少图片体积

微信小程序中组件无法使用全局样式 (app.wxss)

datetimepicker控件在formvalidation框架中的问题

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

场景需求

代码

在网页字体加载期间 所有文本都保持可见状态

WordPress使用webP格式减少图片体积

微信小程序中组件无法使用全局样式 (app.wxss)

datetimepicker控件在formvalidation框架中的问题

在网页字体加载期间所有文本都保持可见状态