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['PHP_SELF'];
 
if(isset($HTTP_COOKIE_VARS["resolution"]))
$resolution = $HTTP_COOKIE_VARS["resolution"];
 
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('[x]', $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>");
?>

Tagged as: and, contents, Detect, fit!, resize, resolution, to