JavaScript Code, PHP Code

Detect resolution and resize contents to fit!

It can be a pain to deliver one unified interface or data table that works well on all resolutions. Either it looks tiny on large resolutions, or people with lower resolutions are forced to scroll. Neither or thse are great for usability.

So here is some JavaScript and PHP code that can detect the resolution of a user's monitor, refresh the page with that data, and create a table using that resolution to best fit within the user's browser!


<?php
$url = $_SERVER&#91;'PHP_SELF'&#93;;
 
if(isset($HTTP_COOKIE_VARS&#91;"resolution"&#93;))
$resolution = $HTTP_COOKIE_VARS&#91;"resolution"&#93;;
 
else{
?>
<script language="javascript">
<!--
go();
 
function go() 
{
 var today = new Date();
 var the_date = new Date("August 31, 2020");
 var the_cookie_date = the_date.toGMTString();
 var the_cookie = "resolution="+ screen.width +"x"+ screen.height;
 var the_cookie = the_cookie + ";expires=" + the_cookie_date;
 document.cookie=the_cookie
 location = '<?echo "$url";?>'; //refresh the page with the resolution set
}
//-->
</script>
<?php
}
?>
<?php
// "split" the resolution results into two variables
list($width, $height) = split('&#91;x&#93;', $resolution);
 
//Take the width and height minus 300, giving enough room for toolbars and such
$table_width = $width-300;
$table_height = $height-300;
 
//Make the table
print("<table cellpadding=2 align=center border=1 width=" .$table_width . " height=" . $table_height . " >
<tr><td align=center>Your resolution is " . $width . " by " . $height . ".<br>
The width/height of this table is " . $table_width . " by " . $table_height . ".</td></tr>
</table>");
?>
Share

4 Comments

  1. I'm a newbie and I'm trying to get this to work on my website. I would like my table width to be 800 if the resolution is greater than or equal to 1024×768, and I would like the table width to be 600 if it's less than that resolution. How would I modify the script to accomplish this? Thanks!

  2. Problem in the code above.
    Just remove the comment "<!–" and replace it with "<!–-".

  3. Where do I insert this code at?

  4. i have three pages for different resolutions i want that the code detect the resolution and call the page link for its respective page

Leave a Reply

Your email address will not be published. Required fields are marked *

*
To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Anti-spam image