Well, the easiest way to solve this problems is to log what your visitors are using. You can then run a report that will tell you what they have and you can taylor your site to suit the majority.
Of course this is a little bit of a reactive method, it would probably be a lot easier to code.
Here is what I would do, you will need a php file (the logger), a transparent 1x1 image (called trans.gif), and some javascript.
Here's the javascript I used. I've tested it with IE 5, NS 4.7 and 6.1. Do your own testing though.
<script language="JavaScript1.2">
<!-- // Using 1.2 prevents older browsers
// from tripping over this stuff
var MyImageName, MyWidth, MyHeight, MyAvailWidth, MyAvailHeight, MyColors;
MyWidth = screen.width;
MyHeight = screen.height;
MyAvailWidth = screen.availWidth;
MyAvailHeight = screen.availHeight;
MyColors = screen.colorDepth;
// Create the code that requests an image
MyImageName = '/images/imagelogger.php?';
MyImageName += "width=" + MyWidth;
MyImageName += "&height=" + MyHeight;
MyImageName += "&availwidth=" + MyAvailWidth;
MyImageName += "&availheight=" + MyAvailHeight;
MyImageName += "&colors=" + MyColors;
// uncomment this line for debugging purposes
// alert("MyImageName is: "+MyImageName);
document.write("<img src=\"" + MyImageName + "\" width=\"1\" height=\"1\" border=\"0\">");
// -->
</script>
Now, create a little php file in your images folder (or anywhere). Make sure that wherever you put it, you change the reference to it above. It should look something like this:
<?php
header("Content-Type: image/gif");
$fp = fopen('trans.gif', r);
fpassthru($fp);
fclose($fp);
// Insert Database stuff here
// You'll have these GET variables:
// width, availwidth
// height, availheight
// colors
//
// however you log, make sure that all
// works even with partial data.
exit;
?>
Once you're done, put it at the bottom of some or all of your pages. Then watch to see what happens. You should be able to create a nice little report after a few people come to your website that tell what is needed.
Matt
