Question

在通过解析USER_AGENT字符串检测到我的网站是否在移动设备上使用后，我想将用户重定向到针对高度> gt = 1024的分辨率优化的页面（例如9.7“，10.1”平板电脑）或者将用户重定向到针对分辨率优化的页面＆lt; 1024（例如smarphones和5“，7”，8“平板电脑）

要实现这一点，我需要使用javascript获取屏幕分辨率。

我们知道PHP（USER_AGENT解析器脚本）是在javascript之前执行的，但我需要在解析器之前获得屏幕分辨率。据我所知，Web服务器首先执行INDEX.HTML然后INDEX.PHP我写了一个Index.html文件，它获取屏幕宽度并通过POST表单传递它（以保持地址栏清洁而不是$ _GET）然后，Index.php加载（包括）更正网页。

INDEX.HTML

<body onload="document.form.submit();">
    <form name="form" action="index.php" method="POST">
         <input type="hidden" id="height" name="height" value="" />
    </form>
    <script type="text/javascript">
         document.getElementById('height').value = screen.height;
    </script>
</body>

的index.php

<?php
     $useragent=$_SERVER['HTTP_USER_AGENT'];
     // If it's a mobile device...
    if(preg_match(...) {
        // If the device screen height is => 1024 it's a tablet 8", 9.7" or 10.1"
        if ($_POST['height'] >= 1024) {
            include ('include.tablet.php');
        }
        // If the device screen height is < 1024 it's a smartphone or a tablet 5" o 7")...
        else {
            include ('include.smartphone.php');
        }
    }
    // If it's a desktop PC...
    else {
            include ('include.index.php');
        }
    }
?>

现在我正在尝试在没有HTML文件的情况下做同样的事情。我写了一个index.php文件，它获取screen.width并使用$ _SERVER ['PHP_SELF']将其发送给自己这样PHP代码可以将用户重定向到正确的页面。

<body onload="document.form.submit();">
    <form name="form" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST">
        <input type="hidden" id="height" name="height" value="" />
    </form>
    <script type="text/javascript">
        document.getElementById('height').value = screen.height;
    </script>
    <?php if(isset($_POST['height'])) {
                // conditional include
    } ?>
</body>

问题是该方法有效，但浏览器（Firefox）需要1或2秒才能运行该页面并返回结果。为什么呢？

NO JAVASCRIPT，NO JQUERY： 我知道我可以使用javascript解析器然后重定向到正确的页面：'window.location.href'但我希望我的主页始终是'index.php'而不是从索引开始.php重定向到 tablet.php 或 smartphone.php 。我试图保持代码的优雅。

有什么建议吗？

Answer 1

检查变量，这样就不会再次加载JS：

<body>
    <form name="form" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST">
        <input type="hidden" id="height" name="height" value="" />
    </form>
    <?php if(isset($_POST['height'])) { 
        echo $_POST['height']; 
     } else { 
    ?>
        <script type="text/javascript">
        document.getElementById('height').value = screen.height;
        document.form.submit();
       </script>
    <?php
     }
    ?>
</body>

候补：

你能尝试在你的文件中使用javascript和jQuery吗？

<!-- include jQuery -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script&gt;

<!-- execute it when the document is ready -->
<script type="text/javascript">
$(document).ready(function(){
     if($(window).height() > 1024){
             window.location = "http://pc.yoursite.com";
     }
});
</script>

非jQuery选项（大多数使用宽度，有时取决于设备方向）：

<script type="text/javascript">
if (screen.width < 1024 || navigator.userAgent.toLowerCase().indexOf('android')!=-1)
(window.location.replace("http://www.yoursite.com"));
</script>

另一种选择是在CSS中使用元视口标记和@media查询，但不会有您正在寻找的重定向。

仅使用一个index.php文件检测移动设备并根据屏幕高度重定向

1 个答案: