css判断手机端还是pc端,JavaScript判断设备是手机端还是PC端，并加载不同的css/js文件...

今天做一个项目，需要实现的效果是：判断用户当前访问是用手机还是电脑，如果用电脑就加载index.min.css和index.min.js.如果是用手机端就访问phone.min.js和phone.min.css.

如是便有了以下代码：

<script>

function browserRedirect() {

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) ){

//电脑端

//加载css

var linkNode = document.createElement("link");

linkNode.setAttribute("rel","stylesheet");

linkNode.setAttribute("type","text/css");

linkNode.setAttribute("href","../../css/index.min.css");

document.head.appendChild(linkNode);

//加载js

var scriptNode = document.createElement("script");

scriptNode.setAttribute("type", "text/javascript");

scriptNode.setAttribute("src", "../../js/index.min.js");

document.head.appendChild(scriptNode);

}else{

//手机端

var linkNode = document.createElement("link");

linkNode.setAttribute("rel","stylesheet");

linkNode.setAttribute("type","text/css");

linkNode.setAttribute("href","../../css/phone.min.css");

document.head.appendChild(linkNode);

//css

var scriptNode = document.createElement("script");

scriptNode.setAttribute("type", "text/javascript");

scriptNode.setAttribute("src", "../../js/phone.min.js");

document.head.appendChild(scriptNode);

}

}

browserRedirect();//调用判断当前访问页面是手机端还是移动端

</script>

以上效果就可以实现，用户使用访问设备不同，加载不同的文件

举报/反馈