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

时间：2022-09-29 17:52:55

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端显示，在移动端隐藏，通过浏览器的窗口大小判断，弊端就是浏览器缩小也会受影响

相关文章