移动端和pc端的判断,不同端做不同的处理

1.通过js判段是pc端还是移动端

function browserRedirect() {
	var type = "";
    var sUserAgent = navigator.userAgent.toLowerCase();
    var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
    var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
    var bIsMidp = sUserAgent.match(/midp/i) == "midp";
    var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
    var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
    var bIsAndroid = sUserAgent.match(/android/i) == "android";
    var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
    var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
    if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
    	type = "notpc";
    } else {
    	type = "pc";
    }
    return type;
}

使用到的对象:navigator.userAgent

Navigator 对象包含有关浏览器的信息

userAgent 属性是一个只读的字符串,声明了浏览器用于 HTTP 请求的用户代理头的值。

一般来讲,它是在 navigator.appCodeName 的值之后加上斜线和 navigator.appVersion 的值构成的。

例如:Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.2; SV1; .NET CLR 1.1.4322)。

注:用户代理头:user-agent header。

2.使用css的媒体查询做处理

.box{display: block;color:red;}
@media(max-width: 1024px){
    .box{display:none;}
}   

box元素在pc端显示,在移动端隐藏,通过浏览器的窗口大小判断,弊端就是浏览器缩小也会受影响

猜你喜欢

转载自www.cnblogs.com/wgl0126/p/9378045.html