To build applications for mobile devices (H5), you can switch the page mode from Desktop to Mobile. This adapts the page for different device scenarios.
Feature description
Desktop page: This mode is for web pages viewed on a PC.
Mobile page: This mode is for H5 pages viewed on a mobile phone.
Switch mobile device previews: Because different mobile devices have different canvas widths, this feature lets you preview how your page appears on various devices.
Default transform logic: When you switch the page mode, the system automatically transforms the layout of the Main container if it has no child components.
Desktop page: The Main container defaults to a grid layout.
Mobile page: The Main container defaults to a flex layout. For more information, see Flex Layout.
Mobile page details
1. The minimum application width rule does not apply to mobile pages. This ensures compatibility with different mobile devices.
2. When viewing a mobile page on a phone, the pinch-to-zoom feature is disabled to provide a better viewing experience.
3. For mobile pages, you can customize the maximum page width. For example, you can set it to 800 px to improve the viewing experience on a PC.
Maximum page width
You can customize the maximum page width. You can choose to inherit the application settings or define a custom rule for the page.
For mobile pages, we recommend that you set the maximum page width to 800 px. This ensures a good experience on mobile phones and improves the viewing experience on PCs. It prevents a portrait mobile page from stretching to fill the full width of a PC screen.
The option to customize the maximum page width
Customize maximum page width
The maximum page width is set
After publishing, the application displays normally on a mobile phone
After publishing, the application is centered with a width of 800 px on a PC