用于检测移动浏览器的脚本

Question

>我在桌面和移动浏览器中打开页面时遇到问题。在这种情况下，我有名称为 www.example.com 的网站，我必须将页面文件称为home-desktop.html和home-mobile.html。我想做的是当我在桌面浏览器上打开 www.example.com 时，它将加载home-desktop.html，如果我在移动浏览器中打开，它将加载home-mobile.html。我应该在头部部分插入什么脚本来做到这一点？

请任何人知道这样做可以帮助我。谢谢。

Answer 1

你可以

使用简单的JavaScript来检测它：

<script>
       window.mobilecheck = function() {
           var check = false;
           if(window.innerWidth<768){
               check=true;
           }
           return check;
         }
         if(window.mobilecheck()){
             window.location.href="home-mobile.html";
         }
         else {
            window.location.href="home-desktop.html";
         }
</script>

工作小提琴：https://jsfiddle.net/KishorVelayutham/rbe055uq/

希望对您有所帮助..！

Answer 2

或者，您可以使用一个 js 库，它可以很好地处理这部分并且非常易于使用。检查浏览器的简单用法：

<script src="//cdn.jsdelivr.net/npm/mobile-detect@1.4.1/mobile-detect.min.js"></script>
<script>
    var md = new MobileDetect(window.navigator.userAgent);
    // ... see below
</script>

其他可用选项：

var md = new MobileDetect(
    'Mozilla/5.0 (Linux; U; Android 4.0.3; en-in; SonyEricssonMT11i' +
    ' Build/4.1.A.0.562) AppleWebKit/534.30 (KHTML, like Gecko)' +
    ' Version/4.0 Mobile Safari/534.30');
// more typically we would instantiate with 'window.navigator.userAgent'
// as user-agent; this string literal is only for better understanding
console.log( md.mobile() );          // 'Sony'
console.log( md.phone() );           // 'Sony'
console.log( md.tablet() );          // null
console.log( md.userAgent() );       // 'Safari'
console.log( md.os() );              // 'AndroidOS'
console.log( md.is('iPhone') );      // false
console.log( md.is('bot') );         // false
console.log( md.version('Webkit') );         // 534.3
console.log( md.versionStr('Build') );       // '4.1.A.0.562'
console.log( md.match('playstation|xbox') ); // false

我发现它真的很有帮助。希望你也是。学分：http://hgoebl.github.io/mobile-detect.js/