Building native UI for the mobile

When using PhoneGap, you create hybrid apps based on standards. The app is rendered to the user through a WebView, which means it is a browser instance wrapped into the app itself.

For this reason, it's important to know how to use mobile-specific HTML tags, CSS properties, and JavaScript methods, properties, and events.

The viewport meta tag

The viewport meta tag was introduced by Apple with iOS 1.0 and is largely supported in all the major mobile browsers. When a web page doesn't fit the size of the browser, the default behavior of a mobile browser is to scale it. The viewport meta tag is what you need in order to have control over this behavior.

A viewport meta tag looks like the following code snippet:

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1, maximum-scale=1.5, user-scalable=1">

What you are actually saying to the browser is that the default width and height...