I’m trying to learn the quirks of developing web apps targeted at the iPhone, so I’m mucking around trying to learn how best to use the space available. Everything is going fine using the iPhone simulator (which is part of the SDK), but when i pull out my real iPhone, it looks like I’ve only got about 75% of the space!
I even proved this by replacing my page with a set of even-sized DIVs, about 20px high. And, sure enough, instead of the 268 pixels I should have in landscape view, I had slightly over 200. WTF was going on?
What was going on is that the iPhone remembers your settings when you go to a site. In particular, it remembers what zoom level you were using. It turned out that I was browsing an early draft of that page at a high zoom level, and even though I’d marked the newer draft as “unzoomable” (meaning I couldn’t unzoom by hand), the iPhone remembered that I wanted to be zoomed in.
I found out by accident when I took the zoom-markers off, and then accidentally zoomed out while explaining the problem to someone else. Now all I need to do is learn more about this behaviour, so I can design the pages I’m working on properly.
Update: I found out why it was zooming. It turned out that when I went to portrait mode, it was resetting the preferred width of the page. Then when I rotated back to landscape, it zoomed in so that this was still the displayed width (even though it re-arranged the layout to reflect the fact that more width was available).
There are a couple of possible work arounds (such as setting min/max zoom levels) which may help, but in general it looks like it’s better to design web pages for the iPhone in portrait mode instead of landscape.