This document describes how to set the maximum and minimum width for an application on the Mobi platform. These settings control how the application is displayed on various screen sizes, ensuring a responsive interface and a consistent user experience.
Overview
In modern application design, controlling the maximum and minimum width of an interface is essential for ensuring it displays correctly on any device or screen size. By setting these widths, designers and developers can manage the layout of interface elements across various resolutions. This practice prevents the layout from becoming too crowded or sparse, which improves the user experience.
Maximum application width
The maximum width setting defines the widest an application can be displayed on a large screen. If the browser window is wider than the specified maximum width, the application content stops expanding. Instead, the content is displayed based on the selected alignment.
Alignment: When setting the maximum width, you can select left, center, or right alignment.
Scenarios
Prevent content from spreading out too much on ultra-wide displays.
Maintain a smooth reading experience and a consistent interface.
Minimum application width
The minimum width setting defines the narrowest an application can be displayed. If the browser window is narrower than the specified minimum width, the content stops shrinking. A horizontal scroll bar appears to ensure that the content is not compressed or distorted.
Scenarios:
Prevent content from shrinking excessively on small screens, which can impair readability.
Ensure important interface elements remain readable and easy to use.
Previewing the results
After you set and save the minimum width, maximum width, and alignment, you can view a real-time preview in the interface on the right.
Preview the minimum width: Shrink the browser window until it is narrower than the specified minimum width. The content will stop shrinking and a scroll bar will appear to keep the layout stable.
Preview the maximum width and alignment: Expand the browser window until it is wider than the specified maximum width. Observe how the selected alignment affects the content layout.
Summary
By setting an application's minimum and maximum width, along with the appropriate alignment, you can control its appearance on various devices and screen sizes. This practice ensures a stable layout and a consistent user experience. This guide helps you use these width settings to create an optimal interactive experience for your users.