Disable Pinch and Tap Zoom

Many web pages do not fit nicely into the horizontal display area of smartphones and tablets. Modern mobile browsers compensate for this by allowing you to zoom and pan, so you can read and interact with these pages.

This is a nice feature to have while browsing the web on your phone, but it can quickly detract from your PhoneGap app’s user experience. Nowadays, PhoneGap disables zooming by default when you create a new application. If for some reason PhoneGap’s defaults were not set when you started your project, you can disable zooming and panning by adding the following meta tag to the head of your HTML document:

<meta
  name="viewport"
  content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

You should only do this if you have designed your app to work correctly at this scale. It is possible to render web pages (and by extension, your PhoneGap app) almost completely unusable on mobile devices by adding this tag without any forethought. Make sure text is large enough to be readable and buttons are large enough to be tappable.

comments powered by Disqus