Screen Resolution and Browser
In some applications it may be advantageous to be able to tailor the screen output to suit the user's configuration. In order to do this, two important things you might like to know are what browser is being used by the user, and what screen resolution they have their display set to. Obtaining details of the browser (or user agent) is relatively simple, since the information is sent in one of the standard HTTP headers included within the HTTP request packet sent to the server. The code to display the browser details is shown below.
<?php
$browser = $HTTP_USER_AGENT;
echo "Your browser is: $browser";
?>
Unfortunately, determining the user's screen resolution is not quite so easy. The information is not included in any of the standard HTTP headers sent to the server, and cannot be directly retrieved using web server scripting. We must therefore rely on client-side scripting to help us get the required data. There are two ways to achieve this. The first is to use JavaScript (or some other client-side scripting language) to create a cookie on the client machine which we can subsequently access and read. This approach works, but relies on the user allowing cookies to be created on their machine by a web application using client-side scripting. The second approach also relies on the use of a client-side script, but removes the need for cookies. It essentially uses a client-side script that creates a form, writes the screen resolution data into hidden input fields within the form, and then dynamically submits the form data to a server-side script. The code provided below (and saved in the "htdocs" directory as "getscreen.html") creates a simple HTML page that prompts the user to retrieve and display the browser and screen resolution.
<html>
<head>
<title>User Agent and Screen Resolution</title>
</head>
<body>
<h1>Check your user agent and screen resolution . . .</h1>
<p>
<a href="screen.html">Click here for details . . .<a>
</p>
</body>
</html>
The output from getscreen.html
The "screen.html" file contains the code shown below.
<html>
<head>
<title>
Screen
</title>
<script language="JavaScript">
function postdata (post_url,postArray) {
var myForm = document.createElement("form");
myForm.method="post";
myForm.action = post_url;
for (var arrayVal in postArray) {
var myInput = document.createElement("input");
myInput.setAttribute("name", arrayVal);
myInput.setAttribute("value", postArray[arrayVal]);
myForm.appendChild(myInput);
}
document.body.appendChild(myForm);
myForm.submit();
document.body.removeChild(myForm);
}
</script>
</head>
<body>
<script language="JavaScript">
var clientVars = new Array();
clientVars["width"]=screen.width;
clientVars["height"]=screen.height;
postdata("screen.php",clientVars);
</script>
</body>
</html>
The code creates the form dynamically using JavaScript and inserts the screen width and height (in pixels) into the form's input fields before sending it as POST data to the PHP script "screen.php", which simply displays the data. The code for "screen.php", together with the script's output (note that this will vary according to the user's choice of browser and screen resolution), are shown below (note that in later versions of PHP the register_globals directive is set to OFF by default, so you may need to use the so-called "superglobal" variable $_SERVER['HTTP_USER_AGENT'] instead of $HTTP_USER_AGENT).
<html>
<head>
<title>
Screen
</title>
</head>
<body>
<?php
$width = $_POST["width"];
$height = $_POST["height"];
$browser = $HTTP_USER_AGENT;
?>
<h3>
<?php
echo "Your browser is: $browser";
?>
</h3>
<h3>
<?php
echo "You are using a screen resolution of: $width x $height";
?>
</h3>
</body>
</html>
The output from screen.php