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:
1
<!-- Add to Default.html -->
2
<meta name="viewport" content="width=device-width, initial-scale=1">
Copied!
The above viewport still allows the user to zoom in and out by pinching. If you want to disable zoom, add the following viewport.
1
<!-- Add to Default.html -->
2
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
Copied!
Input fields with a font size of < 16px will zoom on focus by default.
Using the viewport meta tag to control layout on mobile browsers - HTML: HyperText Markup Language | MDN
MDN Configuring a Viewport
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.
Client Profiles
Wisej
Wisej Client Profiles
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.
Responsive Properties
Wisej
Wisej Responsive Properties
​
Last modified 3mo ago
Export as PDF
Copy link