The iPhone is great at presenting large pages with its built in pinch and zoom capabilities. It does this by using a viewport instead of a window and by scaling content as it deems appropriate.

I presented a demo for my site Chunk Love at iPhoneDevCamp that showed how to disable scaling and which allows icons and content to float from portrait mode to landscape mode. I’ll summarize that demo here with sample code and screenshots.

The first thing you need to do if you know your UI is the correct size is to disable scaling by using the viewport META tag:

<meta name="viewport" content="user-scalable=false; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0" />

1. The portion “user-scalable=false” tells the iPhone that you do not want the user to be able to use pinch and zoom to control your content.
2. The “initial-scale=1.0″ tells the iPhone to not scale your content at all upon initial load.
3. The “minimum-scale=1.0″ and “maximum-scale=1.0″ tells the iPhone itself not to scale your content AT ALL when the viewport size changes. Without these two sub-attributes, your content would increase in size slightly when flipped from portrait mode to landscape mode.
4. One thing to note is that when using all three scaling sub-attributes, you do not need to set a width, as the iPhone automatically creates the proper width assuming a width of 480 at 1.0 scale when in landscape mode, and a width of 320 at 1.0 scale when in portrait mode.

This alone will not get your UI to flex, it will only allow it to as the iPhone will not scale anything for you. To actually get your content to flex, you need to use what are called floating divs. To show you what I mean by a flexible UI, I will insert two screenshots below; one in portrait mode, and one in landscape mode.

Keep in mind, these are approximate shots taken from Safari, but the UI looks exactly like this on the iPhone. Note how the icons shift up a row to fill the space provided? this is what a flexible UI is, and is a perfect way to adjust your content when you have blocks of it.

Below is the code for nine of the icons that is in the HTML page:

<div class="Column"><a href="/scanners/an/percent/30?category=1"><img src="/images/electronics.w.png"></a><span>Electronics</span></div>
<div class=”Column”><a href=”/scanners/an/percent/30?category=3″><img src=”/images/software.w.png”></a><span>Software</span></div>
<div class=”Column”><a href=”/scanners/an/percent/30?category=6″><img src=”/images/photo.w.png”></a><span>Camera</span></div>
<div class=”Column”><a href=”/scanners/an/percent/30?category=8″><img src=”/images/garden.w.png”></a><span>Garden</span></div>
<div class=”Column”><a href=”/scanners/an/percent/30?category=9″><img src=”/images/tools.2.png”></a><span>Tools</span></div>
<div class=”Column”><a href=”/scanners/an/percent/30?category=10″><img src=”/images/apparel.w.png”></a><span>Apparel</span></div>
<div class=”Column”><a href=”/scanners/an/percent/30?category=11″><img src=”/images/computer.w.png”></a><span>Computer</span></div>
<div class=”Column”><a href=”/scanners/an/percent/30?category=12″><img src=”/images/dvd.w.png”></a><span>DVDs</span></div>
<div class=”Column”><a href=”/scanners/an/percent/5?category=16″><img src=”/images/isbn.w.png”></a><span>Books</span></div>

The divs with “class=Column” are the surrounding container that encompass the icon and the text below it. Now, take a look at the CSS applied to these divs:

.Column { float:left; width:100px; height:60px; border:1px solid white; vertical-align:middle;}
.Column A { clear:right; }
.Column A IMG {width:44px; height:44px;}
.Column span { clear:left; display:block; font-size:14px; color:#000000;}
.Column SPAN A {font-size:25px; font-weight:bold;}

The most important line is the first line where we use the CSS style “float:left;”. This is the magic that gets the elements to flow around each other to take up the available space. I included the entirety of the CSS that applies to the icon blocks if you want to see how the text is placed below the icon.

The best thing about this UI is not only that the iPhone will not scale any of it, and that it naturally fills available space, but also that as is, it will work with ANY mobile phone with a decent sized browser. This UI works the exact same way on Windows Mobile, Treos, Blackberries, etc…

I hope you were able to take something out of this demo and the accompanying code samples. If you have any questions or what nots, feel free to leave a comment.

[tags]iPhone, Windows Mobile, CSS, viewport, float, div, iPhoneDevCamp, UI[/tags]