Show HN: Optimize Website for iPhone / Android In Three Easy Steps

2 points

16 years ago

Optimizing your site for iPhone and Android is so easy that there is no reason not to take 10 minutes to do it.

Step 1 - meta tag in site <head>

------------

This is the most important step.

If you leave this out, the browser will never properly "zoom" to your page content.

To make your site optimized for iPhone and Android, you need more than a stylesheet.

The "magic touch" is an important meta tag in your site's <head> section:

Step 2 - reference an iphone/android stylesheet

-------------

The next thing you need is a separate stylesheet for iphone/android that loads after everything else.

The stylesheet is referenced as follows:

Step 3 - essential contents of the android_iphone.css

--------------

the android_iphone stylesheet needs some essential ingredients.

html, body, and any block elements and containers cannot have a width greater than 320px.

otherwise, you will get overflow.

notice that the width is a maximum 320px, not 480px.

in reality, you'll need to use a few pixels less than 320px because you need room for a scrollbar.

take a few pixels away from 320px, test it, and mess around with the width until its exactly right with no overflow.

anyway, here's the essential css to use:

html { width: 320px; }

body { width: 320px; min-width: 320px; max-width: 320px; overflow-x: hidden; }

you can view my implementation of this css here: http://ycuniverse.com/

Enjoy!