通过userAgent 属性来识别访问终端是pc还是移动端

kl博主

发布于 2023-11-18 09:01:29

2380

发布于 2023-11-18 09:01:29

文章被收录于专栏：kl的专栏

说明（了解需求）

需求是一个div在pc端不显示，在移动端显示，思路就是判断访问终端

ps：笔者这里使用的angular.js，不过这个不重要，小小宣传下

认识userAgent

这里使用userAgent属性来完成我们的需求，首先我们来认识一下userAgent这个属性：

userAgent 属性是一个只读的字符串，声明了浏览器用于 HTTP 请求的用户代理头的值。一般来讲，它是在 navigator.appCodeName 的值之后加上斜线和 navigator.appVersion 的值构成的。例如：Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.2; SV1; .NET CLR 1.1.4322)。更多的浏览器userAgent信息可移步http://my.oschina.net/sub/blog/203139

实现

知道了以上信息后我们就可以判断我们的访问终端了，代码实现如下

angular.module('webappApp').controller('MainCtrl', function ($scope) {
  	  var browser={  
    versions:function(){   
           var u = navigator.userAgent;   
            console.log(navigator);//打印navigator对象，可以看到更多浏览器的信息
           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.*/), //是否为移动终端  
                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 , //是否为iPhone或者QQHD浏览器  
                iPad: u.indexOf('iPad') > -1, //是否iPad    
                webApp: u.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部  
            };  
         }(),  
     }   

	  if(browser.versions.mobile || browser.versions.ios || browser.versions.android ||   
	    browser.versions.iPhone || browser.versions.iPad){        
	        alert(123);//这里写你的具体业务逻辑
	  }  
  	
  });

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2016-03-09，如有侵权请联系 cloudcommunity@tencent.com 删除

浏览器