I decided to make the Young Israel site iPhone-friendly, and there are lots of good sites for tips on creating custom CSS for the small screen. The best I found was on CSS wizardry. It doesn't focus on the how so much (using media queries or checking the User-Agent string (evil!)) as the what—making sure the elements are linear vertically, not using floats, shortening headers, etc. The major problem is that his CSS sample has the "wrong" syntax for the media query, so it won't work.
The big gotcha from the official CSS3 documentation: @media (max-device-width: 480px) doesn't work (in either Safari or Firefox), even though the documentation says it's legal. You have to have a media type in there: @media screen and (max-device-width: 480px). Took me forever to find that bug.
I would also use max-device-width rather than max-width; the user on a big screen may shrink the window and it would be confusing for the layout of the site to suddenly change. I would also not use the only screen hack that Apple suggests; there doesn't seem to be any reason to use CSS hacks (shades of the 1990's!) to target only iPhones.
The other gotcha is with my CSS parser: the javascript is run in the order that it is seen, so if you want to remove a widget for the small screen you have to explicitly destroy it:
#q {
-jquery-googleSearch: /* default */;
}
@media screen and (max-device-width: 480px){
#q {
-jquery-googleSearch: destroy;
}
}Hope this helps somebody avoid a miserable morning.
Leave a Reply