Adjusting Site for iPhone Browser
I should have done this long ago, but just got the bee stuck in my bonnet.
When I first decided to attempt to support desktop and handheld browsers without duplicating content or using browser sniffing, I used the most basic method I could think of; using XHTML 1.0 for the main pages, but using XHTML Basic 1.0 for the individual postings and archive.
This gave me a rich page design, but reverted to a simplistic, almost no markup, design for the blog permalinks, while I began work on the CSS. But realizing that this was not an ideal situation, and after discovering that it was possible to scroll the content on my existing design when displayed on the iPhone by using two-finger events, I decided to revert the fancy design for all pages.
But with that done, it is now time to work on a CSS style sheet for handheld browsers. You would think specifying this would be simple, but no! None of the handheld browsers (except for Opera Mini) support the obvious handheld media type. And worse yet, Apple is under the mistaken impression that the handheld media type is meant for dumb browsers and not appropriate for the iPhone Safari browser. Instead, you must resort to a more complicated media query that relies on CSS 3.0 support (which isn’t even a completed specification!).
David Storey covers all the ugly details in his iPhone and developing for mobile posting from mid-2007. The problem is that enough other browsers are broken that this query works for Safari but causes problems with IE. The belief that the handheld media type should only be applied to phones with WAP browsers is idiotic and shows a lack of understanding of how CSS media selectors work.
Media selectors don’t lobotomize web pages into sub-5K WAP pages, they simply specify a different set of CSS rules. A handheld CSS stylesheet might drop the background image and multi-column layout, but aside from any image substitution, it’s not going to significantly change the number of bytes that are downloaded; just the appearance of the page. This is the media selector that the iPhone should have used. Relying on an unfinished spec for critical functionality was not the right thing for Apple to do.
More rants on this topic once I’ve spent some time trying to find a method of switching CSS that will work nicely.
