Elements to Build

Having a solid framework and template makes developing for your mobile app a lot easier. Code replication can save hours of work and allow you to focus your attention on content. In this chapter, you build the navigation bar and set up the app’s header and footer. After they are built, you can reference these pieces of code every time you start a new physical or virtual (in another <div> element) page.

Centering your content with viewports

Your web app can use viewports to display the content in the center of the screen. Viewpoints are the equivalent of a user pinching and zooming the content for a website that isn’t formatted for mobile.

You want the Corks application to be front and center and snap to the width of the screen. To enable this, you want to open the index.html file and start editing the content inside the head section. Next, add the following code snippet right under the <html> opening bracket:

<meta name=”viewport”

content=”width=device-width; initial-scale=1.0; maximum-scale=1.0;

minimum-scale=1.0; user-scalable=false;”/>

This option sets the width of the application to the width of the phone without any scaling. This means no matter how big the screen is, the elements wrap to the edge of the screen.

Finally you set the user-scalable option to false, which ensures that the user can’t resize the content. This is usually set to false because all the elements on the screen should be visible and not require the user to pinch and zoom.

Using Full ...

Get Smashing Mobile Web Development now with the O’Reilly learning platform.

O’Reilly members experience live online training, plus books, videos, and digital content from nearly 200 publishers.