zivodevo wrote:I've found by adding the following code to the header, the page initially fits to the screen on the iPhone allot better without having to pinch and zoom.
<meta name="viewport" content="minimum-scale=1.2" />
Thanks for the tip! I was unaware of the viewport tag and wondered why Mobile Safari was rendering the page so small. Silly Safari, setting the viewport width to 980 by default.
After playing with this for a while, I think I may have an even better solution. The minimum-scale and initial-scale attributes don't work so well because the width of the page contents will vary depending on each user's devices array, making the optimum scaling content-dependent. In your case, 1.2 works, but for my own rather long device names, I had to use 0.8.
Working from your tip, I think the best way to get the scaling right is
- use the viewport tag to set the width to the device-width
- replace embedded spaces in the device names with non-breaking spaces
Then the table full of buttons scales perfectly to the iPhone display because it's constrained by the non-breaking spaces. The trade-off seems to be that setting any scale in the viewport prevents the user from zooming out
with a pinch-in, but I think it's a worthwhile trade.
So I've written a new version of Web X10der which implements that scheme. I'd be grateful for some beta testers try it out before I publish it. Anybody who wants to try it, PM me with your email address and I'll send it.