Web page for IPhone - Large fonts instead of scrolling?

Posted by chris_l on Stack Overflow See other posts from Stack Overflow or by chris_l
Published on 2010-04-18T14:14:11Z Indexed on 2010/04/18 14:23 UTC
Read the original article Hit count: 217

Filed under:
|
|

I'm planning the layout of my web page, which should also be usable on the IPhone. I don't really have much experience with the IPhone yet - I just installed the IPhone Simulator on my Mac.

The page's contents are flexible, so I think it would be better to use this flexibility to avoid that the user has to scroll around the entire page. Especially I have

  • A header and a sidebar that will be used all the time to perform several actions.
  • A main content area with a number of elements (e.g. images). The UI would stay usable pretty well, if the number of elements shown at one time is reduced for a small screen (e.g. by JavaScript). It would also be okay to make the main content area scrollable (as opposed to the entire page).

The problem: If I simply display the page on the IPhone, it uses an extremely small font size, so that users must zoom in first, and then scroll around - so that they can't see the header and sidebar all the time.

What's the best way to deal with this situation?

  • Just leave it this way (very small fonts), because users expect that behaviour on the IPhone?
  • Increase the font size (by specifying it in em or px or with xx-large, or what would be the best way?), if I detect - somehow - that it's being displayed on the IPhone.
  • Or is there some way to restrict the viewport size to the screen size, and make it zoom in automatically? I think that would be the easiest solution in my case.
  • Or ...?

© Stack Overflow or respective owner

Related posts about iphone

Related posts about css