view my SEO resume
Corporate Las Vegas SEO & Marketing Director

Checking Visitor Resolution – A PHP and Javascript Solution

Got a certain format you would like to display for higher or lower resolution visitors? Read on…

So, I had a client come to me and ask if it were possible to make it so his photography based website would look optimal on the Apple iPad. Since his site was built with 980 pixels wide in mind, it wasn’t best formatted for the 768 pixel width format of the iPad. Visitors would come to my client’s site and not be able to see all the photos.

So, I did a quick internet search and found the best solution for my little problem. Since my client really wanted to be able to showcase his site on the iPad I used the following Javascript and PHP based solution to test if a visitor’s browser was equal to or less than 768 pixels wide and if so I would add different style definitions for the needed HTML aspects of the framework.

<script language="javascript">
if (window.location.search == "") {
window.location.href = window.location + "?width=" + screen.width;
}
</script>
<?php
$width = $_GET['width'];
}
?>

The Javascript portion:

if (window.location.search == "") {
window.location.href = window.location + "?width=" + screen.width;
}

just checks the visitor’s resolution and adds the width to the URL via a variable labled “width”. Then it redirects the browser back to the same page but this time with the “width” variable and the resolution.

The PHP code

$width = $_GET['width'];

simply assigns the URL variable “width” to a PHP variable using GET and now you can use your standard if/then statements to change the styling as needed.

Why use this method? Well, you can always use Cookies to handle this but I feel the Javascript to PHP method is the best. Since you can’t assign a Javascript variable to PHP without doing some kind of redirect where you send the variable value through a Cookie, session/client or URL variable, this seems to be the best way and easiest way of doing this simple task.

What do you think? Got any way of doing this easier? I’m not necessarily thrilled with the notion of having the resolution width attached to the actual URL but as a tool to show a site but modify content or layout for a specific device such as the iPad, this is a pretty good implementation. Feel free to leave feedback or hit Steffan up with questions or leave comments below. Thanks.

Leave a Reply

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

I design with an eye towards the aesthetic and I approach every project by asking "what's the best way to attract the most qualified visitors?" Every project I complete follows web standards and best practices for ensuring eventual top rankings for relevant keyword terms. Ask me about my las vegas seo, boca raton seo and los angeles seo services.
read more

Latest from Flickr

Inquiries

Steffan Haeberle
9047 W Torino Ave
Las Vegas, NV 89148
Twitter: steffanlv
Facebook: steffan.haeberle
LinkedIn: steffanh

Latest Video