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

By Sergey Skudaev


Your Screen Width Resolution: 0px.

+++++

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 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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>
<?

?>

Did you find information useful?
Send to your friend a link to this page

Please rate the tutorial

1 2 3 4 5 6 7 8 9 10



Learn Visual Basic 6.0 [Kindle Edition] $1.99

How to Build Your Own Web Site from Scratch [Kindle Edition] $1.99

Comments
 
Register to add comments ( 1000 char ) for get_resolution.php.