Web programming TipsBy 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>
<?
?>
