iPhone Version Of Site
Finally set up an iPhone version of my web site. Although the site could be navigated fine on the iPhone mobile Safari browser, I wanted to make it effortless to read and navigate, which meant eliminating the need to “pinch zoom” the screen to view text and photos.
Instead of using Javascript to redirect to a new directory with an iPhone mini-site, I decided to go the CSS Media Query route. With markup and content already in place, I figured using an iphone.css file that hid elements, changed widths, replaced images etc. would be the easiest way to go.
Here’s the steps taken:
#1: Set Up The CSS Media Query
In the head, place the following media query after your main CSS files:
<link rel="stylesheet" media="all and (max-device-width: 480px)" href="iphone.css" />
This will call the iphone.css file on devices with a maximum screen width of 480 pixels.
You can also set up max-device-width for an ipad.css file as well, but I have not tested that out yet.
#2: Tweak The iphone.css File
The mobile Safari browser will still call your original CSS files, but the iphone.css file will override them since it is placed after the original CSS files.
Although the iPad supports the orientation media query…
@media screen and (orientation:portrait)
and
@media screen and (orientation:landscape)
…the iPhone does not, but there is a workaround.
To style portrait mode, put this in your iphone.css file:
@media screen and (max-width: 320px)
{ ... put your portrait specific CSS here ... }
To style landscape mode, put this in your iphone.css file:
@media screen and (min-width: 321px)
{ ... put your portrait specific CSS here ... }
Depending on whether you layout your site with percentages, ems, or pixels, you will have to adjust every block element so that they are not wider than 320px in portrait and 480px in landscape.
Here is the site in portrait mode:
Here is the site in landscape mode, with the logo set larger and navigation spread further out:
#3: Set The Viewport
In the head, you’ll need to specify the meta data for the viewport. Paste the following there:
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
This will ensure that the iPhone won’t alter font sizes and disable users from pinch zooming.
#4: Create Your Apple Touch Icon
Size up your icon to 57×57 pixels and upload it to your server. When people press “Add To Home Screen” on your site, your icon link will be placed on their phone. The typical rounded corners and glossy overlay will be rendered automatically.
I decided to use the “P” of my basic Philadesigns logo as my Apple Touch Icon. I created it at 275×275 before resizing it to 57×57.
Some articles mention that you have to put the following link in the head as well…
<link rel="apple-touch-icon" href="apple-touch-icon.png" />…but I’m really not sure if it’s needed as it worked fine without this and having the apple-touch-icon.png in the root.
Here is the end result, with the Philadesigns Apple Touch Icon on the bottom right:
#5. Set The Inline Image Width
Most of my images, particularly within the blog section, are all set to a fixed width. In the iphone.css file, you can override this width so that they display nicely. Just add the following:
#content img {max-width:100% !important; height: auto;}
The Simple Bits Method
I’m not exactly sure how Dan Cederholm of SimpleBits.com did it, but their site scales beautifully! Open SimpleBits.com with your desktop or laptop browser and then minimize the browser width. The site still displays perfectly, and looks great on the iPhone as well.
