Responsive Design

Learn how to build responsive Wisej Mobile applications.

Responsive design is an approach to web design that makes web pages render well on a variety of devices and window or screen sizes from minimum to maximum display size. Wisej provides several tools to simplify this usually complex process.

Viewport

The browser's viewport is the area of the window in which web content can be seen. This is often not the same size as the rendered page, in which case the browser provides scrollbars for the user to scroll around and access all the content.

A typical mobile-optimized site contains something like the following:

<!-- Add to Default.html -->
<meta name="viewport" content="width=device-width, initial-scale=1">

The above viewport still allows the user to zoom in and out by pinching. If you want to disable zoom, add the following viewport.

<!-- Add to Default.html -->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

Input fields with a font size of < 16px will zoom on focus by default.

Client Profiles

Client Profiles are a set of device-related properties associated to a name that are matched to the client device when the page is loaded or the browser is resized.

Responsive Properties

Wisej supports a unique system of "responsive properties" in order to enable an application to adapt its UI to the client browser without being limited to CSS media selectors and styles.

Last updated