iPhone Detection With Javascript

Here's how to detect if an iPhone is browsing your page, so you can serve up a stylesheet more appropriate. I use it here to hide the Side Menu and size down the page to 480px wide.

isiPhone = navigator.userAgent.indexOf("iPhone") != -1;

if (isiPhone) {
  document.write("<link href='iphone.css' rel='stylesheet'" +
                 "type='text/css' />");
}

Speaking of sizing stuff down, Safari supports max-width, so for an iPhone, using

img {
  max-width: 400px;
}

in you iphone.css will make all image max to the max size of the display, and not break the layout.