在调整大小时找到屏幕分辨率答案

【问题标题】：finding screen resolution on resizing在调整大小时找到屏幕分辨率
【发布时间】：2012-04-26 03:24:02
【问题描述】：

这几天我一直在摸不着头脑，希望你们能帮忙。

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

我正在用 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 查询中）。

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

谢谢

【问题讨论】：

通过像这样将 PHP_SELF 嵌入到您的 javascript 代码中，您很容易受到 XSS 攻击。

标签： php javascript resize resolution

【解决方案1】：

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

【讨论】：

【解决方案2】：

您的这段代码的问题是，如果 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

?>

【讨论】：

【解决方案3】：

如何使用 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>

【讨论】：

【解决方案4】：

使用 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);
}

【讨论】：