泉州网页设计培训班-JS判断是PC还是手机打开不同页面

泉州网页设计培训班-JS判断是PC还是手机打开不同页面

    • 在移动设备应用越来越广泛的时候,为了留住更多的客户给客户更好的用户体验,传统网站与手机网站并存的情况越来越多,如何平衡两者的关系,便成了一个值得探讨的话题,因为PC站与手机站有着很大的区别为了更友好的显示,最好的方式是让系统自动判断用户的浏览设备而打开不同的页面。时下也有很多方法可以参考,道成也有自己的一些心得给大家分享,只需引用一段一段JS代码即可,非常简单。

 

    • 以深圳著名物流公司华鹏发物流公司网站为例:

 

    • PC端:

JS判断是PC还是手机打开不同页面-道成设计

    • wbapp:

JS判断是PC还是手机打开不同页面-道成设计

    • 二者大不相同,所以用加载不同的css等方式不好实现,而我们加用下面的JS代码后,问题就变得很简单。

代码1:

<script type=”text/javascript”>
<!–
//平台、设备和操作系统
var system ={
win : false,
mac : false,
xll : false
};
//检测平台
var p = navigator.platform;
system.win = p.indexOf(“Win”) == 0;
system.mac = p.indexOf(“Mac”) == 0;
system.x11 = (p == “X11”) || (p.indexOf(“Linux”) == 0);
//跳转语句,如果是手机访问就自动跳转到wap.baidu.com页面
if(system.win||system.mac||system.xll){
}else{
window.location.href=”http://wap.baidu.com”;
}
–>
</script>
    • 否则打开网站默认页面

代码2:

<script type=”text/javascript”>
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) {
window.location.href= ‘http://www.webapp.com’;
} else {
window.location= ‘http://www.pc.com’;
}
}
browserRedirect();
</script>

 

    引入代码后系统可以自动判断是手机平板等移动设备还是PC客户端,而打开不同的页面,而展示我们设置的相应页面,交互友好,更有利于留住客户。

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注