1 Overview

The Viewport component is a Screen component that adds the viewport meta tag <meta name="viewport"> to rendered screens. The viewport meta tag is an approach for controlling the size and scale of the visible area of a page when loaded on a mobile device. It was first introduced in Mobile Safari and is now supported by most browsers.

1.1 About Viewports

On a desktop machine, the viewport is the visible area of the page. The user resizes this visible area by resizing the window. If the page is larger than the viewport, scrollbars are shown. The user must scroll to see the rest of the page.

On mobiles, we need to consider two viewports:

Visual viewport — the part of the page currently shown on the screen. The user can scroll or zoom to change the size of what they see on the screen, i.e. the visual viewport can change.
Layout viewport — the content that is shown on the screen in a fully zoomed-out mode. This is what the users see when the screen is first loaded.

When the screen is first loaded, i.e. fully zoomed-out, the layout viewport has the same size as the visual viewport. As the user interacts with the screen by zooming and scrolling, the visual viewport changes, but the layout viewport always stays the same size.

The viewport meta tag is a way to define the width of the layout viewport in CSS pixels. The main goal is to make sure that the page looks good when first rendered by the browser.
Without a viewport meta tag, the content of a page is shrunk — it is zoomed out by the mobile browser to fit the entire layout viewport on the device’s screen. Therefore, a page that looks good on a desktop device looks like this on a mobile phone:

The viewport meta tag instructs the browser to show the content within a layout viewport of a specified size or corresponding to the device width:

Note: For more details on the viewport concept, see this article by Peter-Paul Koch.

1.2 Using the Viewport Component

1.2.1 From Appway 6.3.2

From Appway 6.3.2, a default Viewport component is automatically added to each rendered screen. It is not necessary to manually add a Viewport component unless you need to change its default properties. You can view the default Viewport by inspecting the page source via your browser’s developer tools:

If a Viewport component is manually added via the Screen Designer, the default Viewport component is overridden. For example, if you add a Viewport component into a screen as shown below, the page source changes accordingly:

Configuration Property

nm.workspace.screen.metatags.defaultviewport (Boolean) — Adds a Viewport component to each screen by default when true.
- Default value: true

1.2.2 Before Appway 6.3.2

In Appway versions earlier than 6.3.2, the Viewport component has to be manually added via the Screen Designer in the Appway Studio.

1.3 Viewport Properties

Component Property	Description
Minimal UI Boolean	This is an old configuration property for iOS 7.1 Triggers the fullscreen mode automatically (some browser elements such as the URL bar are hidden). Deprecated since iOS 8. Default value: true
User Scalable Boolean	Allows users to scale the page when "true". Default value: false
Initial Scale	Controls the zoom level when the page is first loaded, e.g. 2.0 defines twice the size. Default value: 1.0
Maximum Scale	Controls by how much users can to zoom in to the page, e.g. 2.0 defines twice the size. Default value: 1.0
HTML Id	Specifies an identifier for the viewport. This identifier must be unique.
Specify Width Boolean	Sets whether you can manually specify a width or let the browser infer the width. Default value: false
Width	If "Specify Width" is set to "true", use "Width" to control the size of the layout viewport: Device width — sets the viewport width to the width of the device. It is the width of the screen in CSS pixels at a scale of 100%. Equivalent to: `<meta name="viewport" content="width=device-width"`> Specific width – specifies the width in pixels in the "Width in px" field. This is useful if your page is narrower than the device width. Equivalent to: `<meta name="viewport" content="width=###">`

1.4 Viewport and Other Appway Components

Some of Appway’ s Screen components interact with the Viewport component.The Datepicker and the Dropdown components introduced in Appway 6.3, for example, have two main rendering modes:

The adaptive mode is used in normal situations, such as when the components are used within a form.
The fullscreen mode is triggered only on viewports smaller than 550 px. Therefore, this mode is only triggered if the screen uses the default viewport ("width=device-width") or a custom viewport with the width property set to a value of less than 550px (e.g. "width=500").

2 Related Links

For design suggestions, see the Viewport section of design.appway.com.