Yesterday I thought about adding a style sheet for mobile devices to some static HTML pages. How hard could it be? CSS has a media type. Just set the media to
handheld, specify a style sheet for mobile browsers, and you’re done.
Style sheet media types
One problem is that hand-held devices don’t always look for the
handheld style sheet. According to Ben Henick, the
handheld media type is “poorly supported by all but the very recently marketed devices, as of 2009.” From what I gather, most websites try to infer the browser type on the server side and generate different HTML for mobile devices using PHP etc. Apparently static HTML markup will have its limitations at this point in time.
The iPhone doesn’t consider itself a hand-held device as far as CSS is concerned. Fair enough: perhaps the
handheld designation is more for tiny screens like more traditional cell phones. But it’s not a desktop either.
You can’t target the iPhone with a simple media type, but you can use the following CSS.
<link rel="stylesheet" type="text/css" href="iphone.css" media="only screen and (max-device-width: 480px)" />
Of course a device other than an iPhone could grab this style sheet, and the iPhone will not grab the style sheet if they ever add one more pixel to the browser width. But this is the approach Apple gives in their online documentation.
It’s difficult to find emulators to test how pages appear on mobile devices. Someone said on Stack Overflow that Opera has a Small Screen view that is useful for emulating mobile devices. However, that recommendation was from November 2008. The current version of Opera either no longer supports that feature or has moved it somewhere else.
The Web Developer plug-in for Firefox lets you specify whether you want to display your page with the
handheld style sheet, but it does not emulate a hand-held device.
Apple makes an emulator for the iPhone, but only for Macintosh computers. MobiOne makes an emulator for the iPhone that runs on Windows. However, the emulator does not recognize the CSS statement above. I don’t have an iPhone, but I was able to borrow an iPod Touch, which runs the same browser as the iPhone. My pages worked correctly on the iPod when they did not work on the MobiOne emulator.
Does anyone have any suggestions for making static HTML pages more friendly to mobile browsers? Any suggestions for testing?