doudui2229 2012-07-25 14:23
浏览 55
已采纳

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

After detecting if my web site is used on a mobile device of not by parsing the USER_AGENT string, I would like to redirect the user to the pages optimized for resolutions with height >= 1024 (for example 9.7", 10.1" tablets) or redirect the user to pages optimized for resolutions < 1024 (for example smarphones and 5", 7", 8" tablets)

To acheive this I need to get the screen resolution with javascript.

We know that PHP (the USER_AGENT parser script) is executed before javascript but I need to get the screen resolution before the parser. As I know that a web server executes firstly INDEX.HTML and then INDEX.PHP I wrote a Index.html file which gets the screen width and pass it via a form with POST (to keep the address bar clean rather than $_GET) to Index.php which then loads (includes) the corrects web page.

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');
        }
    }
?>

Now I'm trying to do the same thing without the HTML file. I wrote a index.php file which gets screen.width and send it to itself with $_SERVER['PHP_SELF'] so that the PHP code may redirect the user to the correct page.

<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>

The issue is that the method works, but the browser (Firefox) take 1 or 2 seconds to run the page and return the result. Why?

NO JAVASCRIPT, NO JQUERY: I know that I could use a javascript parser and then redirect to the correct page with: 'window.location.href' but I want my homepage to be always 'index.php' and not start with index.php which redirects to tablet.php or smartphone.php. I'm trying to keep the code elegant.

Any suggestion?

  • 写回答

1条回答 默认 最新

  • duanqing3026 2012-07-25 14:30
    关注

    Check for variable so you don't load JS again:

    <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>

    Alternates:

    Could you try using javascript and jQuery in your file like this?

    <!-- 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>

    Non jQuery option (most use width and it depends on device orientation at times):

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

    Another option is use the meta viewport tag and @media queries in your CSS but that won't have the redirect you're looking for.

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

悬赏问题

  • ¥15 对于知识的学以致用的解释
  • ¥50 三种调度算法报错 有实例
  • ¥15 关于#python#的问题，请各位专家解答！
  • ¥200 询问：python实现大地主题正反算的程序设计，有偿
  • ¥15 smptlib使用465端口发送邮件失败
  • ¥200 总是报错，能帮助用python实现程序实现高斯正反算吗？有偿
  • ¥15 对于squad数据集的基于bert模型的微调
  • ¥15 为什么我运行这个网络会出现以下报错？CRNN神经网络
  • ¥20 steam下载游戏占用内存
  • ¥15 CST保存项目时失败