js控制媒体查询样式/判断是PC端还是移动端

 如果遇到,想要在pc端和移动端上的js效果显示不同的话,可以加上以下代码:


var result = window.matchMedia('(max-width: 768px)');

if (result.matches) { //console.log('页面宽度小于等于768px');
//写移动端的js效果
} else { //console.log('页面宽度大于768px');
//写页面宽度大于768px的js效果
}

 这是根据页面不同宽度,手机不同分辨率来辨别的。

如果想要判断是移动端还是pc端,移动端和pc端的js效果显示不同,js加入以下代码

function IsPC() {
    var userAgentInfo = navigator.userAgent;
    var Agents = ["Android", "iPhone",
                "SymbianOS", "Windows Phone",
                "iPad", "iPod"];
    var flag = true;
    for (var v = 0; v < Agents.length; v++) {
        if (userAgentInfo.indexOf(Agents[v]) > 0) {
            flag = false;
            break;
        }
    }
    return flag;
}

var flag = IsPC();
if(flag === true){
console.log("pc端");

//写pc端js代码

}else{
console.log("移动端");
//写移动端js代码
}

 

posted @ 2017-09-07 10:38  c-137Summer  阅读(3334)  评论(0)    收藏  举报