Make it nice for Andoid and iPhones
Mobile Webkit recognizes some useful CSS media queries, which I’m using to include a special mobile stylesheet on my page:
<link href="/style/mobile.css" rel="stylesheet" media="only screen and (max-device-width: 480px)" type="text/css" />
The key here being the media attribute value of only screen and (max-device-width: 480px). The mobile stylesheet contains just a few rules to make things more readable and space efficient for small screens, like reduced padding, etc.
The Android SDK contains an Android emulator which I use to test the page in a browser (Safari should look about identical to Android’s browser.)
The media queries work well for including tweaks, but if you’re hiding a bunch of extra content for mobile, you’d be better off serving a special mobile version of the page without the extra content to save bandwidth.
