How to get screen resolution of visitor in javascript and/or php?

Question

I would like to know the screen resolution of a visitor visiting my page so I can properly make a jquery thickbox cover about 75% of their screen.

Solutions to the q

Answer 1

If you are using jQuery, there is cross-browser solution to get the browser window size:

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

Answer 2

What makes you think people always have their browser window maximised to the same size as their screen? I don't, and I'm not the only one.

What you want is to cover 75% of their window. This can be done using CSS; if the element in question is a child of the body element, then

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

will probably do it (I've not tested it, though).

EDIT: I've now tested it, adding

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

and it worked as expected, at least in Firefox 3.5 :-)

Answer 3

Well after all the work done on the subject I will improve my answer..

First some conclusions that have been earned with much effort:

1. [No cookies.. forget it] Don't do anything like setting session variables on serverside. Otherwise evrey time your page loads a new session file will be created on serverside (file is the usual handler for sessions) and the directory will pile up with files and you still wont be able to track the session.If you find a way, we all will be happy to hear it.

2. [No cookies.. forget fancy scripts!] Without cookies you might have some success, like with the method of tracking ip etc, but still errors are there and there will be a circumstance where it will appear.

3. [No cookies.. go for no cookies] If you can have your pages work without cookie go for it otherwise is not worth.

As for screen resolution my script below can do these:

1. Immediately display info for all 4 combinations cookie and js enabled.
2. If the user makes a change enabling-disabling js or cookie these changes are identified immediately by the script.
3. I used chrome plus and any change I did, in any combination was immediately identified. It worked even without deleting old cookies.

This is my script, it includes a dbg() function just for debugging, I have tried to make it error free however test for your self!

<?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();






?> 

After you identify screen you can go for appearance like this:

In your view.htm (whatever) file include style like this:

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

then your style.php could be like this:

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

Just my way, it is not necessary good!

Answer 4

you can try this Window dimensions Hack and it speaks to ALL Browsers alike. (including dumb 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;

Answer 5

In JavaScript it’s:

screen.width
screen.height

But PHP has no access to the client. So you need to pass the values gathered by JavaScript to your PHP script.

Additionally not every user has his windows in full screen mode. So you should better use the available window width/height.

Answer 6

hey i found out that there's a useful topic related to this,

Difference between screen.availHeight and window.height()