Question

我已经在这几天了解这个问题，希望你们能帮忙。

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

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

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

由于

Answer 1

我不是百分百肯定，但是您无法阻止页面开始通过用户交互重新加载。但是你可以听取页面卸载事件，这样你就可以做你需要做的事情。

Answer 2

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

Answer 3

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

?>

Answer 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);
}

在调整大小时查找屏幕分辨率

4 个答案: