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/

检测移动浏览器的脚本

2 个答案: