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