Mobile terminal multi-size webpage adaptive display method based on browser viewport

Abstract

The invention discloses a mobile terminal multi-size webpage adaptive display method based on a browser viewport, which belongs to the field of browsers and comprises the following steps of: firstly, selecting iPhoneX (375px width) as a reference viewport size; and then, calculating a zoom factor according to the proportion of the viewport width of the current equipment to the reference viewport width, and dynamically adjusting the webpage content. And then, zooming the page root element by using the zooming factor. In order to adapt to screen widths and resolutions of different devices, breakpoints are set, a compact layout is applied to a narrower device, and more blanks and spaces are reserved on a wider device. And finally, recalculating the scaling in real time and updating the page. The method has the beneficial effects that a finer self-adaptive design is realized by dynamically calculating the zoom factor, adjusting the page layout in real time and optimizing display according to the breakpoint of the equipment.

Description

Technical Field

[0001] The present invention relates to the field of browsers, and more specifically, to a method for displaying mobile terminal multi-size web pages based on browser viewports. Background Art

[0002] The mobile multi-size web page adaptation technology based on the browser viewport aims to solve the display adaptation problem of web page content on mobile phones and tablets of different sizes. The core of this method is to dynamically adjust the layout and content size of the web page through media query technology combined with CSS to adapt to the user's screen width. In the early stage of Internet popularization, web page design was mainly based on the PC side, which could not adapt to the diverse screen sizes of the mobile side. With the popularization of smartphones, the demand for web page adaptation continues to increase, and responsive design, referred to as RWD, has become an important solution. The adaptation method based on the browser viewport can display the same web page on devices with different resolutions, and optimize the web page content according to the viewport width through breakpoint technology, thereby providing a smooth user experience. The application of this method not only solves the problem of user experience consistency, but also helps reduce website maintenance costs. Developers do not have to design web pages separately for each device, but use a set of codes to adapt to multiple screens. This method has accelerated the development of mobile Internet, enabling web pages to be quickly promoted in different terminals and meet users' instant access needs.

[0003] However, viewport-based adaptation technology also has its shortcomings. The biggest problem is that it is difficult to meet the special needs of extreme resolution devices, especially when the screen ratio is too wide or too narrow, which may cause some content distortion or abnormal layout. At the same time, for some websites with complex interactions and dense content, adaptation on the mobile terminal often sacrifices usability and visual effects. This method is difficult to meet the requirements of high precision and specific device optimization, especially in complex design scenarios such as touch interaction and multi-level layout, the user experience may decline. Summary of the invention

[0004] The purpose of the present invention is to provide a mobile terminal multi-size web page adaptation and display method based on the browser viewport to solve the problems raised in the above-mentioned background technology: However, the viewport-based adaptation technology also has its shortcomings. The biggest problem is that it is difficult to meet the special needs of extreme resolution devices, especially when the screen ratio is too wide or too narrow, which may cause some content distortion or abnormal layout. At the same time, for some websites with complex interactions and intensive content, adaptation on the mobile terminal often sacrifices usability and visual effects. This method is difficult to meet the requirements of high precision and optimization for specific devices, especially in complex design scenarios such as touch interaction and multi-level layout, the user experience may decline.

[0005] Technical solution: 1. A mobile terminal multi-size web page adaptation and display method based on a browser viewport, characterized in that the mobile terminal multi-size web page adaptation and display method based on a browser viewport comprises the following steps:

[0006] S1. Select the 375px width of the benchmark device iPhoneX as the reference viewport size for the design, that is, the benchmark viewport size; the benchmark viewport size is used as the standard for calculating the scaling ratio of other devices;

[0007] S2. Calculate the ratio of the width and height of the current device viewport to the reference viewport size to obtain a scaling factor; the scaling factor dynamically adjusts the webpage content so that the content is adapted consistently on devices of different sizes;

[0008] S3. Use the scaling factor to scale the root element of the page so that the size of the entire page layout and content is automatically adjusted with the viewport ratio;

[0009] S4. Define the size of page elements according to the size of the benchmark design draft; the container width and font size in the layout are set based on the viewport units rem and vw, and automatically adapt to the scaling ratio;

[0010] S5. Set breakpoints for devices with different screen widths and resolutions; apply more compact layouts on narrower devices and leave more whitespace and spacing on wider devices;

[0011] S6. When the device is rotated and the window size changes, the zoom ratio is recalculated in real time and applied to the page. When the device is switched to landscape or portrait mode, the web page content is updated according to the calculated viewport ratio.

[0012] Preferably, dynamic loading and interaction simplification strategies are adopted in mobile terminal design; based on viewport scaling, the function of loading content on demand is added;

[0013] For complex interactions, use progressive display, scrolling to trigger loading, paging display, simplified interaction methods, simplified menus, and floating buttons to replace complex navigation to adapt to users' operating habits on small screens;

[0014] Simplify complex content and multi-level interactive modules into "expand / collapse" and "tab" modes.

[0015] Preferably, use content priority grading to display the core content in the viewport first, and hide secondary elements and interactive elements adaptively according to different screen resolutions; only display the most core content modules on the mobile terminal, and adjust the secondary modules to a deeper level, and manually load them when users need them; identify the functions that users use most frequently on the mobile terminal through user behavior analysis data, and dynamically adjust the interface content and interactive design based on the data to enhance the response speed of important interactions;

[0016] In order to improve the touch experience of mobile users, we introduced button and icon layouts adapted to touch operations, increased the interactive area, increased button size, and added sliding gestures for intuitive operations.

[0017] Preferably, an adaptive mode switching function is added to small-sized devices to automatically identify the screen size and switch to the most suitable display mode; users can switch between different display modes, with the "compact mode" only displaying the core content and the "detailed mode" displaying the full functions.

[0018] Preferably, the calculation formula of the S2 scaling factor is as follows:

[0019]

[0020] If width priority is selected, the scaling factor is the ratio of the current viewport width to the reference viewport width; if height priority is selected, the scaling factor is the ratio of the current viewport height to the reference viewport height.

[0021] Preferably, the minimum and average values ​​of the width and height ratios are used to adapt to more flexible layout requirements. The formula is as follows:

[0022]

[0023] Every time the viewport changes, the zoom factor is recalculated and used as the core parameter for scaling the web page content.

[0024] Preferably, S3 dynamically adjusts the global font size of the HTML and CSS variables using the scaling factor, with the root element font-size set to:

[0025] Font-size = base font size × scaling factor

[0026] Passing the scaling factor through the CSS variable to perform global layout calculation;

[0027] Use dynamic units for the width, height, and spacing of layout element containers on the page: use viewport units vw and vh to adapt to the current device; use relative units rem to coordinate dynamically adjusted root font sizes; dynamically control content display based on the size of the scaling factor:

[0028] In small viewports, hide secondary content and prioritize core functionality;

[0029] In large viewports, load more content or expand hidden information.

[0030] Preferably, S5 defines and calculates the breakpoints and related adjustments as follows:

[0031] Assume the design width is W design , the screen width of the current device is W device , then the scaling factor S is:

[0032]

[0033] Define key breakpoints according to the range of S: if S<0.5, apply the small-screen mobile layout; if 0.5≤S<1, apply the large-screen mobile layout; if S≥1, apply the tablet and desktop layout.

[0034] Preferably, the layout and element size are linked to the screen width through the breakpoints, and relative units are used to achieve automatic scaling:

[0035] Element width = W 基准元素 ×S

[0036] Among them, W 基准元素 is the width of the element in the design draft, and S is the scaling factor;

[0037] Font size and image size usually need to scale dynamically with screen size; assuming the base font size is F design , then the font size F after the screen width changes responsive , which can be calculated as:

[0038] F responsive =F design ×S

[0039] Image width = W design image ×S

[0040] Using viewport units allows you to dynamically set the size based on the viewport width and height, which is particularly suitable for responsive design; the viewport width vw and height vh unit formulas are:

[0041]

[0042] If the width of an element is 50vw, the width of the element is 50% of the screen width:

[0043]

[0044] Compared with the prior art, the advantages of the present invention are:

[0045] (1) The scaling ratio is calculated in real time based on window size changes and device rotation to ensure that the layout is always adapted when the screen is switched between landscape and portrait or the window is adjusted.

[0046] (2) Combining width priority, height priority and comprehensive adaptation strategies, it supports devices with different screen ratios and more flexibly meets the needs of complex content display.

[0047] (3) Avoid functional reduction, optimize layout and interaction design, and improve function retention and user experience on small-screen devices.

[0048] (4) Optimize breakpoint positions based on scaling and content characteristics to improve adaptation accuracy and reduce dependence on specific resolutions.

[0049] (5) Combine viewport units and device pixel ratio (DPR) to improve image clarity and font display effects and enhance visual quality. BRIEF DESCRIPTION OF THE DRAWINGS

[0050] Figure 1 It is a schematic diagram of the overall system of the mobile terminal multi-size web page adaptation display method based on the browser viewport of the present invention; DETAILED DESCRIPTION

[0051] For examples, see Figure 1 A mobile terminal multi-size web page adaptation and display method based on a browser viewport, the mobile terminal multi-size web page adaptation and display method based on a browser viewport comprises the following steps:

[0052] S1. Select the 375px width of the benchmark device iPhoneX as the reference viewport size for the design, that is, the benchmark viewport size; the benchmark viewport size is used as the standard for calculating the scaling ratio of other devices;

[0053] S2. Calculate the ratio of the width and height of the current device viewport to the base viewport size to obtain a scaling factor; the scaling factor dynamically adjusts the webpage content so that the content fits consistently on devices of different sizes;

[0054] S3. Use the scaling factor to scale the root element of the page so that the size of the entire page layout and content is automatically adjusted according to the viewport ratio;

[0055] S4. Define the size of page elements according to the size of the benchmark design draft; the container width and font size in the layout are set based on the viewport units rem and vw, and automatically adapt to the scaling ratio;

[0056] S5. Set breakpoints for devices with different screen widths and resolutions; apply more compact layouts on narrower devices and leave more whitespace and spacing on wider devices;

[0057] S6. When the device is rotated and the window size changes, the zoom ratio is recalculated in real time and applied to the page. When the device is switched to landscape or portrait mode, the web page content is updated according to the calculated viewport ratio.

[0058] Adopt dynamic loading and interaction simplification strategies in mobile terminal design; based on viewport scaling, add content loading function on demand;

[0059] For complex interactions, use progressive display, scrolling to trigger loading, paging display, simplified interaction methods, simplified menus, and floating buttons to replace complex navigation to adapt to users' operating habits on small screens;

[0060] Simplify complex content and multi-level interactive modules into "expand / collapse" and "tab" modes.

[0061] Use content priority grading to display the core content in the viewport first, and hide secondary elements and interactive elements adaptively according to different screen resolutions; only display the most core content modules on the mobile terminal, and adjust the secondary modules to a deeper level, and then load them manually when users need them; identify the functions that users use most frequently on the mobile terminal through user behavior analysis data, and dynamically adjust the interface content and interactive design based on the data to enhance the response speed of important interactions;

[0062] Specifically, behavioral analysis data identifies the functions most frequently used by users on mobile devices, including the following steps:

[0063] Funnel Analysis: Identify the key steps for users to complete their goal path (such as login, order, and payment).

[0064] Determine the starting point and the end point: such as "enter the homepage -> click the purchase button -> complete the payment".

[0065] Analyze the conversion rate and dropout rate of each step.

[0066] BehaviorFlow: Visualize the flow of users between pages.

[0067] Identify the most frequently visited page combinations; find out the functional points with high frequency of interaction.

[0068] Data extraction: Count the number of clicks on each function button; calculate the frequency of use of each function (such as daily visits and visit ratio). In view of the touch experience of mobile users, introduce buttons and icon layouts adapted to touch operations, increase the interactive area, increase the button size, and add sliding gestures for intuitive operation.

[0069] Specifically, the calculation formula is as follows:

[0070]

[0071] Specifically, the purpose of user behavior cluster analysis is to divide users into different behavior groups and identify common functional patterns;

[0072] K-Means clustering: Group users based on indicators such as frequency of function use and access duration.

[0073] Behavioral feature extraction: for example, “user groups that prefer searching”, “user groups that frequently use shopping carts”.

[0074] Based on the analysis results: Identify high-frequency functions, such as "search", "add to cart", "checkout".

[0075] Find out the common paths: For example, 80% of the user paths are "Home -> Search -> Product Details -> Order".

[0076] Weight evaluation, function usage frequency: give priority to high-frequency functions.

[0077] User retention contribution: Analyze the impact of specific features on user retention and conversion.

[0078] An adaptive mode switching function is added to small-size devices to automatically identify the screen size and switch to the most suitable display mode; users can switch between different display modes, with "compact mode" only displaying core content and "detailed mode" showing full functions.

[0079] Specifically, screen size detection: obtain the device's screen size or viewport width through JavaScript to determine whether the device is a small-screen device. For example, define a device with a screen width less than 600px as a small-size device.

[0080] On small-screen devices, it automatically switches to simplified mode to display the most core functions.

[0081] On large-screen devices, switch to detailed mode to display full functionality and content.

[0082] Adapt to different resolutions: Use window.devicePixelRatio or screen resolution to determine high-resolution screen devices, optimize font size and image clarity, and ensure that they are still readable and easy to operate on small-screen devices.

[0083] Dynamically switch to the most suitable display mode based on conditions such as the device's screen size, system settings (such as system theme settings), and ambient brightness.

[0084] Steps: Screen size changes: Automatically switch to compact mode or detailed mode based on the user's screen width. For example, when the viewport width is less than 600px, it enters compact mode; when it exceeds this width, it switches to detailed mode.

[0085] System preference color scheme: Combined with prefers-color-scheme media query, determine the user's system theme (light mode or dark mode) to adjust the page display style.

[0086] Brightness sensing: For devices with brightness sensors, the display mode can be switched according to the ambient light brightness. If the ambient light is dim, it will automatically switch to dark mode to improve the reading experience in low-light environments.

[0087] In addition to automatic mode switching, provide a clear UI control to allow users to manually select "Lite Mode" or "Detailed Mode" and update the interface based on the user's selection.

[0088] Toggle button or menu: Provide users with a toggle button or sidebar menu that they can click to switch between compact and detailed modes.

[0089] Mode storage: Save the mode selected by the user (via localStorage or sessionStorage) so that the user can still maintain the selected mode the next time he visits.

[0090] Content display in different modes, streamlined mode: only display core content and the most basic functions, simplify page layout, remove unnecessary elements and interactions, and reduce the complexity of user operations.

[0091] Detailed mode: displays the entire content and complete functions of the page, including additional function buttons, detailed information, etc.

[0092] On small-screen devices, in addition to automatically switching modes, you can also further optimize the display effect through responsive layout.

[0093] Grid layout system: adjusts the arrangement of page elements according to the screen size. For example, in Lite mode, multiple content areas can be stacked or collapsed into a card-style layout to reduce page length and scrolling.

[0094] Font and image adaptation: Ensure that text size, line spacing, image size, etc. are adapted to the screen size. For example, in Lite mode, reduce the text size and image display to avoid too much content occupying a small screen space.

[0095] Since small-screen devices usually have limited computing resources, special attention needs to be paid to performance optimization to ensure a smooth user experience.

[0096] Lazy loading: In Lite mode, non-core content is loaded lazily to avoid performance bottlenecks on small-screen devices when loading large amounts of content.

[0097] Load resources on demand: When the user switches to detailed mode, load more images and complex interactive elements to avoid premature loading that affects page loading speed.

[0098] Provide a light / dark switch button on the user interface so that users can manually select the mode according to their preference. Save the user's selection preference through local storage (such as localStorage) so that it remains valid when the page is refreshed or the next visit, ensuring a consistent user experience.

[0099] The S2 scaling factor is calculated as follows:

[0100]

[0101] If width priority is selected, the scaling factor is the ratio of the current viewport width to the base viewport width; if height priority is selected, the scaling factor is the ratio of the current viewport height to the base viewport height.

[0102] Use the minimum and average values ​​of the width and height ratios to adapt to more flexible layout requirements. The formula is as follows:

[0103]

[0104] Every time the viewport changes, the zoom factor is recalculated and used as the core parameter for scaling the web page content.

[0105] S3 dynamically adjusts the global font size of the html with CSS variables using the scaling factor, with the root element font-size set to:

[0106] font-size = base font size x scaling factor

[0107] Pass the scaling factor through CSS variables to perform global layout calculations;

[0108] Use dynamic units for the width, height, and spacing of layout element containers on the page: use viewport units vw and vh to adapt to the current device; use relative units rem to coordinate dynamically adjusted root font sizes; dynamically control content display based on the size of the scaling factor:

[0109] In small viewports, hide secondary content and prioritize core functionality;

[0110] In large viewports, load more content or expand hidden information.

[0111] S5 The formulas for defining and calculating breakpoints and associated adjustments are as follows:

[0112] Assume the design width is W design , the screen width of the current device is W device , then the scaling factor S is:

[0113]

[0114] Define key breakpoints according to the range of S: if S<0.5, apply the small-screen mobile layout; if 0.5≤S<1, apply the large-screen mobile layout; if S≥1, apply the tablet and desktop layout.

[0115] Use breakpoints to tie layout and element sizes to screen width, and use relative units to achieve automatic scaling:

[0116] Element width = W 基准元素 ×S

[0117] Among them, W 基准元素 is the width of the element in the design draft, and S is the scaling factor;

[0118] Font size and image size usually need to scale dynamically with screen size; assuming the base font size is F design , then the font size F after the screen width changes responsive , which can be calculated as:

[0119] F responsive =F design ×S

[0120] Image width = W design image ×S

[0121] Using viewport units allows you to dynamically set the size based on the viewport width and height, which is particularly suitable for responsive design; the viewport width vw and height vh unit formulas are:

[0122]

[0123] If the width of an element is 50vw, the width of the element is 50% of the screen width:

[0124]

[0125] The above shows and describes the basic principles, main features and advantages of the present invention; those skilled in the art should understand that the present invention is not limited to the above embodiments, and the above embodiments and descriptions are only preferred examples of the present invention and are not used to limit the present invention. Without departing from the spirit and scope of the present invention, the present invention may have various changes and improvements, and these changes and improvements all fall within the scope of the present invention to be protected; the scope of protection claimed by the present invention is defined by the attached claims and their equivalents.

Claims

1. A mobile terminal multi-size web page adaptation display method based on a browser viewport, characterized in that: The method for displaying mobile terminal multi-size web pages based on browser viewport includes the following steps: S1. Select the 375px width of the benchmark device iPhoneX as the reference viewport size for the design, that is, the benchmark viewport size; the benchmark viewport size is used as the standard for calculating the scaling ratio of other devices; S2. Calculate the ratio of the width and height of the current device viewport to the reference viewport size to obtain a scaling factor; the scaling factor dynamically adjusts the webpage content so that the content is adapted consistently on devices of different sizes; S3. Use the scaling factor to scale the root element of the page so that the size of the entire page layout and content is automatically adjusted with the viewport ratio; S4. Define the size of page elements according to the size of the benchmark design draft; the container width and font size in the layout are set based on the viewport units rem and vw, and automatically adapt to the scaling ratio; S5. Set breakpoints for devices with different screen widths and resolutions; apply more compact layouts on narrower devices and leave more whitespace and spacing on wider devices; S6. When the device is rotated and the window size changes, the zoom ratio is recalculated in real time and applied to the page. When the device is switched to landscape or portrait mode, the web page content is updated according to the calculated viewport ratio.

2. The method for displaying mobile multi-size web pages based on browser viewport according to claim 1, characterized in that: Adopt dynamic loading and interaction simplification strategies in mobile terminal design; based on viewport scaling, add content loading function on demand; For complex interactions, use progressive display, scrolling to trigger loading, paging display, simplified interaction methods, simplified menus, and floating buttons to replace complex navigation to adapt to users' operating habits on small screens; Simplify complex content and multi-level interactive modules into "expand / collapse" and "tab" modes.

3. The method for displaying mobile multi-size web pages based on browser viewport according to claim 1, characterized in that: Use content priority grading to display the core content in the viewport first, and hide secondary elements and interactive elements adaptively according to different screen resolutions; only display the most core content modules on the mobile terminal, and adjust the secondary modules to a deeper level, and then load them manually when users need them; identify the functions that users use most frequently on the mobile terminal through user behavior analysis data, and dynamically adjust the interface content and interactive design based on the data to enhance the response speed of important interactions; In order to improve the touch experience of mobile users, we introduced button and icon layouts adapted to touch operations, increased the interactive area, increased button size, and added sliding gestures for intuitive operations.

4. According to claim 1, the method for mobile terminal multi-size web page adaptation and display based on browser viewport is characterized in that: An adaptive mode switching function is added to small-size devices to automatically identify the screen size and switch to the most suitable display mode; users can switch between different display modes, with "compact mode" only displaying core content and "detailed mode" displaying full functions.

5. According to claim 1, the method for mobile terminal multi-size web page adaptation and display based on browser viewport is characterized in that: The calculation formula of the S2 scaling factor is as follows: If width priority is selected, the scaling factor is the ratio of the current viewport width to the reference viewport width; if height priority is selected, the scaling factor is the ratio of the current viewport height to the reference viewport height.

6. The method for mobile terminal multi-size web page adaptation and display based on browser viewport according to claim 5, characterized in that: Use the minimum and average values ​​of the width and height ratios to adapt to more flexible layout requirements. The formula is as follows: Every time the viewport changes, the zoom factor is recalculated and used as the core parameter for scaling the web page content.

7. The method for mobile terminal multi-size web page adaptation and display based on browser viewport according to claim 1, characterized in that: S3 dynamically adjusts the global font size of the html with CSS variables using the scaling factor, with the root element font-size set to: Font-size = base font size × scaling factor Passing the scaling factor through the CSS variable to perform global layout calculation; Use dynamic units for the width, height, and spacing of layout element containers on the page: use viewport units vw and vh to adapt to the current device; use relative units rem to coordinate dynamically adjusted root font sizes; dynamically control content display based on the size of the scaling factor: In small viewports, hide secondary content and prioritize core functionality; In large viewports, load more content or expand hidden information.

8. The method for mobile terminal multi-size web page adaptation and display based on browser viewport according to claim 1, characterized in that: S5 The formulas for defining and calculating breakpoints and associated adjustments are as follows: Assume the width of the design is W design , the screen width of the current device is W device , then the scaling factor S is: Define key breakpoints according to the range of S: if S<0.5, apply the small-screen mobile layout; if 0.5≤S<1,z, apply the large-screen mobile layout; if S≥1, apply the tablet and desktop layout.

9. The method for mobile terminal multi-size web page adaptation and display based on browser viewport according to claim 8, characterized in that: Use relative units to auto-scale by tying layout and element sizes to screen width via these breakpoints: Element width = W 基准元素 ×S Among them, W 基准元素 is the width of the element in the design draft, and S is the scaling factor; Font size and image size usually need to scale dynamically with screen size; assuming the base font size is F design , then the font size F after the screen width changes responsive , which can be calculated as: F responsive =F design ×S Image width = W design image ×S Using viewport units allows you to dynamically set the size based on the viewport width and height, which is particularly suitable for responsive design; the viewport width vw and height vh unit formulas are: If the width of an element is 50vW, the width of the element is 50% of the screen width:

Images