Optimize Website for iPhone - font issues/dropdown menus

[John Crowley]

I'm trying to optimize a web page application for an iPhone. The page
contains two drop-down menus. When I click on either of the drop-
downs, the fonts on the entire page zoom to about three or four times
their normal view, and remain at this size. I can pinch the page to
restore them to their normal size, but it is a strange user
experience. Has anyone else encountered this problem?

Thanks!
JC

[Niels Leenheer]

You need to specify a fixed viewport.

For example:

<meta name="viewport" content="width=device-width; initial-scale=1.0; user-scalable=0;">

I've written an article with a couple more things you can do to make your web app work better:

http://rakaz.nl/2009/09/iphone-webapps-101-getting-safari-out-of-the-way.html

Cheers,

Niels Leenheer

--

You received this message because you are subscribed to the Google Groups "iPhoneWebDev" group.
To post to this group, send email to iphone...@googlegroups.com.
To unsubscribe from this group, send email to iphonewebdev...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/iphonewebdev?hl=en.

[Remi Grumeau]

If you already have a meta viewport, only the user-scalable=0 is important to add

If not, just copy paste this whole code in your headers

Remi

Remi Grumeau

(+33) 663 687 206

http://www.remi-grumeau.com

[skip]

This question is essentially the same as this thread:
http://groups.google.com/group/iphonewebdev/browse_thread/thread/f4ca5e9698848209

Nobody has yet suggested how to deal with this if you require user-
scalable=1.

It looks to be related to the iPhone version of Safari because it is
not applicable to the desktop version.

Skip

[John Crowley]

Thanks for the help! That seems to expand the fonts to the "zoomed
out" size, which is larger than what I need (the page is now larger
than the display window, and I have to scroll horizontally to see the
entire page). What I seem to need is the "pinched" size as my default.
Can I manipulate that by changing the initial-scale size to something
less that 1.0?

On Dec 2, 12:41 pm, Remi Grumeau <remi.grum...@gmail.com> wrote:
> If you already have a meta viewport, only the user-scalable=0 is important to add
> If not, just copy paste this whole code in your headers
>
> Remi
>
> Le 2 déc. 2009 à 15:35, Niels Leenheer a écrit :
>
>
>
> > You need to specify a fixed viewport.
>
> > For example:
> > <meta name="viewport" content="width=device-width; initial-scale=1.0; user-scalable=0;">
> > I've written an article with a couple more things you can do to make your web app work better:

> >http://rakaz.nl/2009/09/iphone-webapps-101-getting-safari-out-of-the-...
>
> > Cheers,
>
> > Niels Leenheer

>
> > On Wed, Dec 2, 2009 at 3:23 PM, John Crowley <john.d.crow...@gmail.com> wrote:
> > I'm trying to optimize a web page application for an iPhone. The page
> > contains two drop-down menus. When I click on either of the drop-
> > downs, the fonts on the entire page zoom to about three or four times
> > their normal view, and remain at this size. I can pinch the page to
> > restore them to their normal size, but it is a strange user
> > experience. Has anyone else encountered this problem?
>
> > Thanks!
> > JC
>
> > --
>
> > You received this message because you are subscribed to the Google Groups "iPhoneWebDev" group.
> > To post to this group, send email to iphone...@googlegroups.com.
> > To unsubscribe from this group, send email to iphonewebdev...@googlegroups.com.

> > For more options, visit this group athttp://groups.google.com/group/iphonewebdev?hl=en.

>
> > --
>
> > You received this message because you are subscribed to the Google Groups "iPhoneWebDev" group.
> > To post to this group, send email to iphone...@googlegroups.com.
> > To unsubscribe from this group, send email to iphonewebdev...@googlegroups.com.

> > For more options, visit this group athttp://groups.google.com/group/iphonewebdev?hl=en.

>
> Remi Grumeau
> (+33) 663 687 206http://www.remi-grumeau.com
>

>  smime.p7s
> 2KViewDownload

[Remi Grumeau]

haven't got the time lately to dig this … sorry

> --
>
> You received this message because you are subscribed to the Google Groups "iPhoneWebDev" group.
> To post to this group, send email to iphone...@googlegroups.com.
> To unsubscribe from this group, send email to iphonewebdev...@googlegroups.com.

> For more options, visit this group at http://groups.google.com/group/iphonewebdev?hl=en.