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 books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
