# Weixin Mini Program Large Screen Adaptation Guide
# Summary
In order to ensure that users use Weixin Mini Program on the PC side also have a smooth and friendly experience, this guide will provide a series of large-screen adaptation recommendations for reference.
# 1. Why do we have to adapt?
Since users can use Weixin Mini Program on a PC, and it is possible to switch under different sizes of views, in order to ensure a smooth and user-friendly experience for Mini Programs on different sizes, we recommend that developers adapt Mini Programs according to the user's device and scenario.Align the recommended grid system with the response policy to achieve a dynamic layout of the page.
- Use a raster system for page design
Grid system has regularity, and the width and height of elements can be expressed by percentage. This feature makes the page layout designed with grid system have regularity, which improves the consistency and reusability of page layout under different resolutions.
- Develop a response strategy for Weixin Mini Program pages
Responsiveness is the system's feedback and adaptation to external changes, i.e. the development of a change strategy through a reasonable design scheme and a standardized technique.
A responsive strategy is designed to make the Weixin Mini Program experience sound and consistent across any screen size.
# 2.Not adapted to Weixin Mini Program on PC side experience
Without the appropriate Weixin Mini Program, it will not be able to switch Weixin Mini Program window size on the PC side, the specific display rules are as follows.
Weixin Mini Program
Regardless of the screen size, it is always displayed in the phone size 414 x 736.
Weixin Mini Program
Regardless of screen size, it is always displayed in a tablet size of 768 x 1024.
Vertical display MiniGame
With the tablet size 1072 x 768 as the benchmark screen size, let MiniGame window based on the phone size 320 x 568 to do proportional scaling processing.
Horizontal display MiniGame
With the tablet size 1072 x 768 as the screen benchmark size, let the MiniGame window do proportional scaling based on the phone size 736 x 414.
# Developers adapt design guidelines
# 1. Basic Appropriation Principles
PC screen size relative to the mobile terminal has a larger content display space and display advantages, such as multiple windows can be opened at the same time, the window can be dragged, the window can be switched to different sizes. In order to improve screen utilization and maximize the added value of the experience brought by the larger screen, there are the following experience principles in the adaptation process:
(1) View information displays complete readability
After the Weixin Mini Program view size switch, the view information should be fully readable, and there should be no information deformation, missing, resolution decline and other changes.
(2) View size switching interaction is smooth and friendly
When the Weixin Mini Program view is enlarged, more information is displayed; The view switching process should be smooth and friendly, and the layout of the Mini Program can be optimized by appropriate means.
# 2. Dynamic layout - Common layouts
(1) Vertical or vertical expansion
Layout features: Stretch the page elements horizontally to an area of the appropriate screen size. It is often used on pages with simple elements / structures, such as lists, tables, etc.
Adaptation rules: The page displays a fixed height and the width is not a defined value; When the display size of the layout changes, the display width of the elements changes as well.
(2) Arrange between lines
Layout features: Select the page elements to be arranged up and down according to the layout width. It is often used for content presentation pages with fewer layers of information architecture, such as content details pages.
Adaptation rules: Determine the horizontal width of the layout area and whether it can accommodate several elements. If it can accommodates, use left-right layout, and if it cannot accommodate, use up and down layout.
(3) Horizontal expansion
Layout features: Repeatly extend the page elements to an area relative to the size of the screen. It is often used for pages with a fixed module structure and a simple and ordered layout within the module, such as e-commerce.
Adaptation rules: Increase more elements horizontally, based on the horizontal width of the layout area, while maintaining one of the page element sizes or spacings.
(4) Page display
The layout features: Take advantage of the width of the screen to arrange the layout components with the same attributes horizontally in rows. It is often used for content rendering pages with fewer layers of information architecture, such as song lists, app lists, etc.
Adaptation rules: You can define the width rules for individual components and automatically calculate the number of elements that can be repeated as the horizontal width of the layout area changes.
(5) Hierarchical presentation
The layout features: The page is divided into multiple columns, and the content of each module is displayed in subregions. The partition has a clear subordinate relationship, with the subordinate part dependent on the existence of the dominant part. It is often used to have a hierarchical structure and to display pages that are not affected by information acquisition, such as tools applications, with a parent menu on the left, a submenu in the middle, and a content detail on the right.
Adaptation rules: Set the minimum width of each column, determine the number of levels that can be accommodated based on the horizontal width of the layout area, and display the number of available columns.
(6) Free layout
The layout features: Divide the page into multiple functional modules, and after determining the main module, the dependent modules are structured around the main module. It is often used when there are multiple functional modules within a page, where there is and only one main module, such as a content detail page.
Adaptation rules: determine the maximum value and fixed position of the master module, the variation of the slave module with the horizontal width of the layout area, automatically calculate the rendering mode around the master module.
(7) Side railing
The layout features: There is a clear master-substitution relationship in the page, the master module is the navigation module, and the master module can be displayed in the form of a sidebar at large sizes, so that the page can quickly browse or manipulate the master-substitution module at the same time.
Adaptation rules: set the width of the page breakpoint, beyond the breakpoint size, the main module changes into the page sidebar, the subordinate module automatically calculates the amount of information that can be presented according to the width of the layout area.
# 3. Interactive mode translation - gesture interaction and mouse
Unlike the mobile side, the PC side mainly relies on the mouse and keyboard for operation, which allows the PC side to provide physical, more stable control. Because the pointer is small, the user can position and operate more precisely.
In order to make Weixin Mini Program more suitable for the PC side, the operation that needs to be performed by the mobile side Mini Program relying on gesture input in the adaptation process corresponds to the PC side.
Commonly used interactive mode translation table
Both the mobile terminal and the PC terminal have their own unique interactive mode.
# 4. Adapt to other points of attention
The following key points also need special attention when adapting Weixin Mini Program on the PC side.
(1) Navigation Bar and Tab Bar
The height of the Navigation Bar and Tab Bar, if any, remains the same after adaptation.
(2) Click a window
To avoid the deformation of the pop-up control caused by the adaptation, the pop-up control can be rendered by following the mouse pointer.
(3) Suspended Toolbar
The hovering toolbar may appear outside the visible range due to changes in the position of the window. In PC-side adaptation, if the toolbar is related to a specific area, it is recommended to present it in a more stable form.
(4) Page refresh operation
On the PC side, the finger pull down for page refresh operation is not friendly.In the adaptation process, if your Weixin Mini Program page needs refresh ability, you need to use a relatively stable presentation to render.
