如何在javascript和/或php中获取访问者的屏幕分辨率?

时间:2009-07-07 10:25:18

标签: php javascript jquery

我想知道访问我网页的访问者的屏幕分辨率,以便我可以正确地制作jquery厚箱封面大约75%的屏幕。

非常感谢解决问题或帮助我解决问题!

6 个答案:

答案 0 :(得分:37)

在JavaScript中:

screen.width
screen.height

但PHP无法访问客户端。因此,您需要将JavaScript收集的值传递给PHP脚本。

此外,并非每个用户的窗户都处于全屏模式。所以你最好使用available window width/height

答案 1 :(得分:24)

如果您使用的是jQuery,则可以使用跨浏览器解决方案来获取浏览器窗口大小:

var browserWidth = $(window).width();
var browserHeight = $(window).height();

答案 2 :(得分:7)

是什么让您认为人们的浏览器窗口最大化与屏幕大小相同?我没有,而且我不是唯一一个。

你想要的是覆盖75%的窗口。这可以使用CSS完成;如果有问题的元素是body元素的子元素,那么

#box {
    position: absolute;
    top: 12.5%;
    left: 12.5%;
    width: 75%;
    height: 75%;
}

可能会这样做(尽管我没有测试过。)

编辑:我现在测试了它,添加了

html, body {
    width: 100%;
    height: 100%;
}

并且它按预期工作,至少在Firefox 3.5中: - )

答案 3 :(得分:2)

你可以尝试这个窗口维度哈克,它会对所有浏览器都说话。 (包括哑巴IE6)

var width = document.body.offsetWidth;
var bodyHeight = document.body.scrollHeight;
var height = (typeof window.innerHeight !== "undefined")? window.innerHeight :  (document.documentElement)? document.documentElement.clientHeight : document.body.clientHeight;
    height = (bodyHeight > height)? bodyHeight : height;

答案 4 :(得分:1)

在完成所有关于这个主题的工作后,我会改进我的答案..

首先通过大量努力获得了一些结论:

  1. [没有饼干......忘了] 不要在服务器端设置会话变量。否则你的页面加载时会在服务器端创建一个新的会话文件(文件是会话的常用处理程序),目录将堆积文件,你仍然无法跟踪会话。如果你找到了办法,我们所有人都会很高兴听到它。

  2. [没有饼干..忘了花哨的脚本!] 如果没有cookie,你可能会取得一些成功,例如跟踪ip等方法,但仍然存在错误,并且会出现这种情况。

  3. [没有饼干..没有饼干] 如果你可以让你的网页没有cookie就可以使用,否则就不值得了。

  4. 至于屏幕分辨率,我的脚本可以执行以下操作:

    1. 立即显示所有4个组合cookie和js启用的信息。
    2. 如果用户进行了更改启用 - 禁用js或cookie,则会识别这些更改 马上就是剧本。
    3. 我使用了chrome plus,并且我做了任何改变,立即确定了任何组合。 它甚至可以在不删除旧cookie的情况下工作。
    4. 这是我的脚本,它包含一个dbg()函数,仅用于调试,我试图让它没有错误但是为你自己测试!

      <?PHP
      
      
      
      
      class prereqCls
      {
      
         //change this
        private $self="http://localhost/prereq.php";
        private $jsCookie="";
      
        function __construct()
        {     
      
      
          //entering conditions, an autosubmit bttn fetches the rest fields not it self 
          $enter=false;
          if(isset($_GET['rl']))$enter=true;
          if(!isset($_POST['js_alive']) and !isset($_POST['noJsBttn']))$enter=true;
      
      
          if($enter)
          {
            dbg("Now writing a php cookie..","construct");
            setcookie('cookie_alive',1,time()+3600);//set it for 1 hour 
            dbg("Now calling Js..","construct");
            $this->getSettings();
            return;
          }
      
      
      
          //identify setting
          $this->identifySett();
      
      
          //display the appropriate link  
          if($this->jsCookie!=="")
                    echo "<a href=".$this->self."?rl=1 >If you enebled {$this->jsCookie}, don't refresh 
                      but click here to load the new settings!</a>";
          else
                    echo "<a href=".$this->self."?rl=1 >Click only this to relaod the page..</a>"; 
      
          //display the cookie if set
          if(isset($_COOKIE['cookie_alive']))
          {
            echo "<br><br>Well this is the cookie!<br>";
            print_r($_COOKIE);
          }
      
      
        }//method
      
      
      
        private function identifySett()
        {
              if(isset($_POST['js_alive']) and isset($_COOKIE['cookie_alive']))
            dbg("Both js and cookies are enabled!","construct");
      
          elseif(isset($_POST['js_alive']) and !isset($_COOKIE['cookie_alive']))
            {dbg("Js is enabled cookies not!","construct"); $this->jsCookie="Cookies";}
      
          elseif(!isset($_POST['js_alive']) and isset($_COOKIE['cookie_alive']))
            {dbg("Js is not enabled, cookie is!","construct");  $this->jsCookie="Javascript";}
      
          elseif(!isset($_POST['js_alive']) and !isset($_COOKIE['cookie_alive']))
            {dbg("Js and cookies are not enabled!","construct"); $this->jsCookie="Javascript and Cookies";}
      
        }
      
      
      //php method begins
      private function getSettings()
      {
      ?>
      <html>
      <head>
      <script type="text/javascript">
      
      //the values entered to cookie by js will be seen by php immediately on reload!!! 
      //write the screen data to the cookie too 
      var exdays = 365; 
      var exdate=new Date(); 
      exdate.setDate(exdate.getDate() + exdays);
      
      var c_value=escape(screen.width) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
      document.cookie="scr_width=" + c_value;
      
      var c_value=escape(screen.height) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
      document.cookie="scr_height=" + c_value;
      
      
      var c_value=escape(1) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
      document.cookie="js=" + c_value;
      
      //autosubmit the form in milliseconds
      window.setTimeout("document.getElementById('scrForm').submit();",0);
      
      
      </script>
      
      
      </head>
      
      <body >
      
       <form id="scrForm" action="<?PHP echo $this->self;?>" method="post">   
      
      <!--If Js is enabled the appropriate bttn will be shown-->
         <script type="text/javascript">
         document.write('<input type="hidden" name="js_alive" value="1">');
         document.write('<input type="submit" name="JsBttn" value="Go">');
         </script>
      
       <noscript>
       Some trouble trying to find screen settings.. Click to continue!
       <input type="submit" name="noJsBttn" value="Go">
       </noscript>
      
       </form>  
      
      </body>
      </html>
      
      <?PHP
      
      }
      ////////////////////php method ends
      
      }/////////////class
      
      
      
      
      //debuger
      function dbg($str,$caller)
      { 
      
      echo "<br> [{$str}][{$caller}]<br>";
      
      $log="Log Begins:---".date('Y-M-d h:i:s')."--------[CALLER]{$caller}----------\n";
      
      $log.= $str."\n";
      
      $log.= "Log Ends:-------------------------------------------------------\n\n";
      
      $fh=fopen("log_errors.log","a");
      fwrite($fh, $log);
      fclose($fh);
      }
      ///////////////////// 
      
      
      
      
      //make the class alive
      $alive = new prereqCls();
      
      
      
      
      
      
      ?> 
      

      识别屏幕后,您可以选择这样的外观:

      在你的view.htm(无论如何)文件中包含如下样式:

         <link rel="stylesheet" href="style.php" />
      

      那么你的style.php可能是这样的:

      <?php
          header("Content-type: text/css");
      
          $width  = $_COOKIE['scr_width']; 
          $height = $_COOKIE['scr_height']; 
      
      element 1 width is let's say 0.2 of width
      element 2 width is let's say 0.7 of width
      big container (it could be a single cell table) width=all other elements width
      or
      if image height is>image width then this variable will be ...
      or
      image path is random
      or image path dynamic
      or ... etc etc endless possibilities, you can do anything here in this css stylesheet.
      ?>
      
      then [still on the same file, Yes css and php together!] for example apply the variables,
      only simple variables work down here, keep calculations for above.
      
      
      
      #smImgZoom
      {
      width:<?PHP echo $zoomerImgWidth."px;";?> 
      height:<?PHP echo $zoomerImgHeight."px;";?> 
          padding:10px ;
      }  
      
      etc etc this is how I do it so html remain clear, css clear, calculations separated.
      

      就我而言,没有必要好!

答案 5 :(得分:0)

嘿,我发现有一个与此相关的有用主题,

Difference between screen.availHeight and window.height()