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:
content=”width=device-width; initial-scale=1.0; maximum-scale=1.0;
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 ...