Centering  Your Content With Viewports Mobiole Web Structure

Centering Your Content With Viewports Mobiole Web Structure

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 format- ted 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.

Written by imkits