<link rel="stylesheet" type="text/css" media="handheld" href="handheld.css">
Well, with the introduction of the iPhone, Android, and other advanced cell phone browsers, the above tag was no longer supported. This is because many webmasters made the CSS for handheld pages look very basic.
Because of limitations with CSS implementations in many mainstream browsers in the mid-2000s (can you say "Internet Explorer 6"), many designs (including my webpage) required the page to have a certain absolute size. 800x600 was the smallest common size in the mid-2000s, so a webpage design that was 800 pixels wide was perfectly reasonable.
And that is exactly what I did with my website.
Unfortunately, iPhones and other cell phone browers using screens less than 800 pixels wide decided to ignore @media handheld and tried to render a webpage 800 pixels wide on, say, a 320x480 screen.
I discovered this problem yesterday as I was setting up an Android development environment. So, after doing some research, I now have CSS like this in the top of my webpage:
<link rel="stylesheet" type="text/css" href="cellphone.css"
media="only screen and (max-device-width: 799px)" />
<link rel="stylesheet" type="text/css"
media="only screen and (min-device-width: 800px)"
title="Blue Sky (default)" href="computer.css" />
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="computer.css" media="all"
/>
<![endif]-->
Since I had to update the static HTML of over 100 web pages (scripting languages like BASH and AWK make this reasonably easy), I also went to the liberty of adding some HTML that tells people to no longer use Internet Explorer 6 (courtesy Microsoft):
<!--[if lt IE 7]>
<div style=' clear: both; height:
59px; padding:0 0 0 15px; position: relative;'> <a
href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode"><img
src="http://www.theie6countdown.com/images/upgrade.jpg" border="0"
height="42" width="820" alt="You are using an outdated browser. For a
faster, safer browsing experience, upgrade for free today." />
</a></div>
<![endif]-->
To post a comment about an entry, send me an email and I may or may not post your comment (with or without editing)