1

在通过解析 USER_AGENT 字符串检测我的网站是否在移动设备上使用后，我想将用户重定向到针对高度 >= 1024 的分辨率优化的页面（例如 9.7"、10.1" 平板电脑）或重定向用户访问针对分辨率 < 1024 进行优化的页面（例如智能手机和 5"、7"、8" 平板电脑）

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

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

索引.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>

索引.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 秒来运行页面并返回结果。为什么？

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

有什么建议吗？

4

1 回答 1

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 查询，但不会有您正在寻找的重定向。

于 2012-07-25T14:30:27.487 回答