用JS代码判断用户设备是手机还是电脑访问并自动跳转页面

许小贱 • • JavaScript, 程序特效 • 9 阅读

客户端判断及跳转

用JS代码判断用户设备是手机还是电脑访问，并且能自动跳转相应页面。我们在日常设计网页的时候，一般需要考虑到用户使用的是什么设备，从而根据用户的设备来向用户展示网页内容。假如用户使用的是手机，向用户展示电脑端的网页，这样就会出现页面显示不完整，甚至错版等情况；同理，如果用户使用电脑，向用户显示手机端网页，这样就会出现 功能不全，页面过小等情况，很影响用户体验。所以在网页设计之初就需要进行网页适配，从而提高用户体验。

这里的方案是使用一段JS代码来进行判断用户的设备（手机、电脑、平板），有三种方法：

1、通过JS代码判断浏览器的高度进行跳转，代码如下：

<script>
if(window.screen.availWidth<768){
window.location.href="手机端链接";
}else{
window.location.href="电脑端链接";
}
</script>

2、通过JS代码判断设备的UA进行跳转，代码如下：

第一种方法：

var os = function (){
    var ua = navigator.userAgent,
        isWindowsPhone = /(?:Windows Phone)/.test(ua),
        isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone,
        isAndroid = /(?:Android)/.test(ua),
        isFireFox = /(?:Firefox)/.test(ua),
        isChrome = /(?:Chrome|CriOS)/.test(ua),
        isTablet = /(?:iPad|PlayBook)/.test(ua) || (isAndroid && !/(?:Mobile)/.test(ua)) || (isFireFox && /(?:Tablet)/.test(ua)),
        isPhone = /(?:iPhone)/.test(ua) && !isTablet,
        isPc = !isPhone && !isAndroid && !isSymbian;
    return {
        isTablet: isTablet,
        isPhone: isPhone,
        isAndroid: isAndroid,
        isPc: isPc
    };
}();
if (os.isAndroid || os.isPhone) {
 window.location.href="手机端链接";   // 手机    
} else if (os.isTablet) {
  window.location.href="平板端链接";  // 平板  
} else if (os.isPc) {
  window.location.href="手机端链接";  // pc    
}

第二种方法：

<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= '手机端链接'; 
} else { 
window.location= '电脑端链接'; 
} 
} 
browserRedirect(); 
</script>

结束，撒花。。

 

版权声明

1、本文地址：https://www.09606.com/104.html
2、转载请保留本文地址及链接，本站保留追究法律责任的权力。
3、部分文章来源于网络，仅作为学习展示之用，版权归原作者所有。
4、因部分文章网络流转次数较多，已无法追溯至原作者，若遗漏导致侵犯了您的权益，请您 留言给我 。

THE END
分享
二维码
打赏
< <上一篇
下一篇>>
文章目录
关闭
目 录