Computer Programming web Web programming Tips



How to read visitor screen resolution for the best web page fit

By Sergey Skudaev

Some times, you need to create a web page that fit to a visitor browser width. I will show you how to read a visitor screen resolution and depending on its width use different css style file, so that web page width would vary for different visitors.

I use JavaScript to write resolution to cookie and PHP to select the right css style file

You can change resolution of your screen couple of times and see the effect.

I use different page background color for different resolutions to easily see when css file is changing. You must close browser and open again to reset cookie, other wise resolution variable will not change.

My PC maximal resolution is 1360, so I could not test my code for biger resolution. You can do it on your own.


<?php
session_start();

$screen_resolution=0;

if (!isset($_SESSION[iterate]))
{
if(!isset($HTTP_COOKIE_VARS["users_resolution2"]))

//means cookie is not found set it using Javascript
{
$_SESSION[iterate]=1;
?>
<script language="javascript">
<!--
writeCookie();

function writeCookie()
{

var the_cookie = "users_resolution2="+ screen.width +"x"+ screen.height;

document.cookie=the_cookie

location ='<?php echo $_SERVER['PHP_SELF'];?>';
}
//-->
</script>
<?php
}
else{
$screen_resolution = $HTTP_COOKIE_VARS["users_resolution2"];
}
}
else{
$screen_resolution = $HTTP_COOKIE_VARS["users_resolution2"];
}
settype($screen_resolution, "integer");
//echo $screen_resolution;
?>





<!DOCTYPE html>
<html lang="en">
<head>
<title>How to read visitor screen resolution to best fit web page</title>
<meta name="description" content="How to read visitor screen resolution to best fit web page.">;
<meta name="keywords" content="PHP, css, screen resolution">;
<meta name="owner" content="Serge Skudaev">;
<meta name="author" content="Sergey Skudaev">;
<meta http-equiv="content-language" content="eng-US">;
<meta http-equiv="content-Type" content="text/html; charset=ISO-8859-1">;
<meta name="robots" content="index,follow">;
<meta name="revisit after" content="2 weeks">;
<!-- End of Meta Tags -->
<?php
if($screen_resolution ==1024)
{
print('<link href="style1024.css" rel="stylesheet" type="text/css" media="Screen">;');
}
elseif(($screen_resolution > 1024)&&($screen_resolution < 1360))
{
print('<link href="style1280.css" rel="stylesheet" type="text/css" media="Screen">;');
}
elseif(($screen_resolution > 1359)&&($screen_resolution < 1439))
{
print('<link href="style1360.css" rel="stylesheet" type="text/css" media="Screen">;');

}elseif(($screen_resolution > 1439)&&($screen_resolution < 1599)
{
print('<link href="style1440.css" rel="stylesheet" type="text/css" media="Screen">;');
}
elseif(($screen_resolution > 1599)&&($screen_resolution < 1900))
{
print('<link href="style1600.css" rel="stylesheet" type="text/css" media="Screen">;');
}
elseif($screen_resolution > 1900)
print('<link href="style1920.css" rel="stylesheet" type="text/css" media="Screen">;');
?>
</head>
<body>
<div id="page">
   <div id="header"><br>;

   </div>
  <div id="content">
  <div id="middle_right">
<div id="middle">

<h1 align="center">How to read visitor screen resolution to best fit web page.</h1>
<p>By Sergey Skudaev</p>
<?

?>

My eBooks on Amazon.com



Subscribe to our mail list to receive free code examples.

Comments

No comments yet.

Add Comment

* Required information
(never displayed)
 
Smile Sad Huh Laugh Mad Tongue Crying Grin Wink Scared Cool Sleep Blush Unsure Shocked
 
1000
What is the next number: 10, 12, 14, ..?
 
Enter answer:
Captcha
Refresh
 
Enter code:
 
Notify me of new comments via email.
 
Remember my form inputs on this computer.
 
I have read and understand the privacy policy. *
 
I have read and agree to the terms and conditions. *
 
 
Powered by Commentics