Mobile stylesheets

I’ve found that the Android phones I've been testing on, in landscape view has a width of something like 533px – not the 480px everyone seems to be talking about. This was confusing. But I ended up using the following code to make the site work:

 <link href="css/screen.css" media="only screen and (min-device-width: 534px)" rel="stylesheet" type="text/css"></link>

<link href="css/mobile.css" media="only screen and (max-width: 480px), only screen and (max-device-width: 480px), only screen and (max-device-width: 533px) and (orientation: landscape)" rel="stylesheet" type="text/css"></link>

 This removes the main stylesheet and only displays the mobile stylesheet on devices. iPad just gets the regular site. Another media query might be necessary for an iPad site.

I’d really strongly like to discourage the use of:
maximum-scale=1

This will mean the user can’t zoom into the page which is really bad for accessibility reasons.

 Oh, and there’s a resize bug in mobile Safari nicely described by Jeremy Keith: http://adactio.com/journal/5088/ If you go from Portrait to Landscape the page ends up being too big and the user has to double tap to bring it back to the right size.

But it’s a well documented bug, so we just need to point this out and hope that Apple fixes asap!!