Search code examples
htmlweb-applicationsmobile-safarimeta-tags

Html 5 WebApp Scalability Meta Tag

I am currently working on a Html 5 WebApp. The entire app works perfectly fine, with the exception of scalability (Zooming). I have placed the following Meta tag on my WebApp's page, 

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

After much research I have come to the conclusion that these Meta tags are primarily for the iPhone version of safari. However, the problem that I am experiencing is, while an iPhone user is on my site, previous to bookmarking the WebApp to the home screen, the user is not able to zoom in or out (using the pinching motion). The only way that that seems to create a zooming in effect, is if the user changes the orientation of their phone.

I have tested this meta tag with both an Apple device, and an Android device. The Android device disabled zooming when user-scalable = no, and allowed zooming when user-scalable=yes, while the Apple device never allowed zooming in either of the two testing cases.

My Questions Are:

  1. Are these Meta Tags primarily designed for iPhone Safari browsers?
  2. Am I correctly using the above Meta Tag?

  3. If I am not, What is the proper way to use the Meta Tag?

    Thank you for your advice in advance!

Solution

  • I could be wrong, but I don't think you need the user-scalable line at all. Have you tried removing that and seeing what happens? Something like this is usually sufficient:

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

    … and then maybe tweak from there. If you do want to use all the attributes, try separating them with a comma rather than a semi-colon. For example:

    <meta name="viewport" content="user-scalable=yes, width=device-width, initial-scale=1.0" />