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

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

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

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

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

测试链接：https://www.laiqun.cn/ksdt.php

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>

测试链接：https://hb.laiqun.cn

一键查询浏览器UA地址>>> https://www.laiqun.cn/tool/ua.html

代码收集自网络，由 石哥电脑 www.DLedu.cn 整理发布.