Custom content based on browser size

Let's Chat
1

I’ve been toying with the idea of adding another graphic to my main page. The problem is that adding a graphic for 800x600 resolution will make the area in question very “crunched”. So I thought I would play with custom content based on browser size.

Unfortunately PHP, being server based, does not allow custom content, so the alternative is Javascript.


<SCRIPT language="JavaScript">
<!--
if (screen.width>=1024)
{
 document.write('All the HTML goes in here');
}
//-->
</SCRIPT>

There are some issues:

  1. If javascript is turned off, the user will not see this content.

  2. If the user has some sort of privacy software installed so it doesn’t pass info to the browser, the user will not see this content.

In other words, don’t use critical content in this way.

I opted to add the new Weather Underground advisory information on the main page using this method.

At 1024x768 (or greater):

At 800x600 (or lesser):

2

G’day Tom,

What if you were to extend the javascript?

So that you calculated the screen size in javascript and then did a meta refresh passing back the dimensions to PHP. Thus giving your PHP code the screen size to play with.

As a drawback, you’d need to make sure that your PHP keeps passing the screensize back to the next script otherwise the javascript would then meta refresh every page with the dimensions.

Then if the javascript is turned off the user gets a standard 800x600 page and the meta refresh doesnt occur?

This all assumes that you can invoke a meta refresh from javascript?

Just found this code that does something similar, but uses cookies to pass the details.

phpBuddy getting screen resolution <? if(isset($HTTP_COOKIE_VARS["users_resolution"])) $screen_res = $HTTP_COOKIE_VARS["users_resolution"]; else //means cookie is not found set it using Javascript { ?>