Optimize a web page for Palm Pre

Question

I'm in the process of building a support page for my pre application.

I'm having a problem where the content on the page is very small, so the user has to manually zoom in to read it.

I've made the page so that there is nothing very wide or tall, but for some reason everything is very "zoomed out" when you first navigate there on the Pre.

I've noticed that sites like wikipedia have versions that are perfectly optimized for the Pre. How can I make my pages start out "full-sized" the way wikipedia does?

Update:

The extremely simple page that I am currently testing with.

On the above page I have tried setting the width for every element to both 310px and to 100%, the result is always the same.

I figure I can accomplish this by giving everything a static width and then making everything use a very big font size. I'm just guessing that there is a "better way", i.e. some way to let the pre browser know that it doesn't need to start zoomed out to the size of a "normal" web page (it seems that the default zoom is about 1024px wide, even though the actual rez is 320px).

Answer 1

Posting a URL of a problem page would be a big help here.

In general, to show nicely on smartphones, the design of the page has to be "fluid" (taking 100% of the width in percent - not specified in pixels) to use the most space in differing screen resolutions. The minimal width supported by the design should be about 300 pixels, to fit without zooming on 320x480 screens.

Answer 2

I found out the proper way to do this on the webOSDev forums.

The following should be in the header:

<meta name="viewport" content="width=device-width"/>
<meta name="viewport" content="initial-scale = 1.0"/>

This has the advantage that when the user turns the device into landscape mode, everything scales appropriately, without any styling gymnastics.