0

这几天一直在纠结这个问题，希望大家帮忙。

加载页面时，我需要找出浏览器的大小。

我正在用 PHP 和 javascript 编写一个 PHP 页面。该页面以以下代码开头：

if ( empty($_GET['w']) ) {
    echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
            <html xmlns="http://www.w3.org/1999/xhtml">
            <body>
                <script type="text/javascript">
                    var winW = 630, winH = 460;
                    if (document.body && document.body.offsetWidth) {
                     winW = document.body.offsetWidth;
                     winH = document.body.offsetHeight;
                    }
                    if (document.compatMode=="CSS1Compat" &&
                        document.documentElement &&
                        document.documentElement.offsetWidth ) {
                     winW = document.documentElement.offsetWidth;
                     winH = document.documentElement.offsetHeight;
                    }
                    if (window.innerWidth && window.innerHeight) {
                     winW = window.innerWidth;
                     winH = window.innerHeight;
                    }
                    location.replace("'.$_SERVER['PHP_SELF'].'?w=" + winW + "&h=" + winH );
                </script>
            </body>
          </html>';
} else {
    $w = $_GET['w'];
    $h = $_GET['h'];
// my main page goes here
}

这段代码基本上获得了分辨率，然后使用 url 查询中发送的宽度和高度重新加载页面，以便 PHP 可以使用这些值。

问题是：当用户调整他/她的窗口大小然后重新加载页面时，发送的值是旧值（因为它们仍在 URL 查询中）。

每次加载或重新加载页面时，如何找到新的宽度和高度值？

谢谢

4

4 回答 4

0

使用 Jquery。大致这样的事情应该可以工作。将 .resize 处理程序附加到窗口。

$(document).ready(function(){
  echoWindowDimensions();

  $(window).resize(function(){
      echoWindowDimensions();
  });
});

function echoWindowDimensions {
   var h = $(window).height();
   var w = $(window).width();
   alert('height'+h+'   width'+w);
}
于 2012-06-07T14:28:11.497 回答
0

如何使用 jQuery，轮询脚本，将通过 GET 接收的值作为 json 返回。当屏幕被调整大小而无需用户交互时，它将更新为任何值！

在我的示例中，它只是更新了段落，但您也可以对这些值做一些事情。（少写多做；p）

<?php
if(isset($_GET['width']) && $_GET['height']){
$size = array('width'=>intval($_GET['width']),'height'=>intval($_GET['height'])); 
echo json_encode($size);
die;
}
?>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
function poll(){
   setTimeout(function(){

      $.ajax({ url: "http://localhost/screensize.php?width="+ $(window).width() +"&height="+ $(window).height() +"",cache: false,
      success: function(data){
      //Do something with returned json
      $("#screensize").replaceWith("<p id=\"screensize\">Width:"+ data.width +"px Height:"+ data.height +"px</p>");
        //Next poll
        poll();
      }, dataType: "json"});
     // 1/2 a sec
  }, 500);
}

$(document).ready(function(){
    poll();
});
</script>

<p id="screensize">Updating...</p>
于 2012-04-26T03:56:08.593 回答
0

你的这段代码的问题是，如果 w 和 h 作为 url 参数存在，它绝对什么都不做。如果您查看源代码，它将是空白的。

您应该做的是检查 url 参数是否与窗口当前具有的实际值匹配，然后继续执行您计划执行的任何操作。

<?php

$w = 0;
$h = 0;
if (isset($_GET['w'])) {
    $w = $_GET['w'];
}
if (isset($_GET['h'])) {
    $h = $_GET['h'];
}

 echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml">
        <body>
            <script type="text/javascript">
                window.onload = function(event) {
                    var winW = 630, winH = 460;
                    if (document.body && document.body.offsetWidth) {
                     winW = document.body.offsetWidth;
                     winH = document.body.offsetHeight;
                    }
                    if (document.compatMode=="CSS1Compat" &&
                        document.documentElement &&
                        document.documentElement.offsetWidth ) {
                     winW = document.documentElement.offsetWidth;
                     winH = document.documentElement.offsetHeight;
                    }
                    if (window.innerWidth && window.innerHeight) {
                     winW = window.innerWidth;
                     winH = window.innerHeight;
                    }

                    if (winW=='.$w.' && winH=='.$h.') {
                        document.write("Yay, victory!");
                    } else {
                        location.replace("'.$_SERVER['PHP_SELF'].'?w=" + winW + "&h=" + winH );
                    }
                }
            </script>
        </body>
      </html>';
// my main page goes here

?>
于 2012-04-26T03:56:33.430 回答
0

我不是 100% 确定，但你不能阻止页面从开始通过用户交互重新加载。但是您可以收听页面卸载事件，以便您可以做您需要做的事情。

于 2012-04-26T03:29:38.800 回答