说明(了解需求)
需求是一个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
实现
知道了以上信息后我们就可以判断我们的访问终端了,代码实现如下
代码语言:javascript复制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);//这里写你的具体业务逻辑
}
});