Multi-terminal and multi-size page adaptation method

Abstract

The invention provides a multi-terminal multi-size page adaptation method, which comprises the following steps of: accessing a unified page URL (Uniform Resource Locator) through a browser of terminal equipment, entering a view control component, and determining a page adaptation mode according to service requirements; calling a corresponding adaptation mode function based on the page adaptation mode, and calculating a view component type matched with the terminal equipment; and controlling the page to load the matched view component, and displaying the corresponding page view to the user through the client browser. According to the embodiment of the invention, a uniform access path URL is provided, two adaptation modes of a user agent identifier and a screen size are provided, the adaptation scheme is flexible to select and easy to expand, a uniform control function is provided, adaptation control logic is uniformly arranged at a client, front and rear ends are separated more thoroughly, UI coupling of multi-end, multi-device and multi-size page adaptation is reduced, and the user experience is improved. And the cross-end multiplexing of the logic layer improves the development and maintenance efficiency, and each end is loaded as required, so that the network flow is saved, and the page loading speed is improved.

Description

Technical Field

[0001] The present invention relates to the field of computers, and more specifically, to a multi-terminal and multi-size page adaptation method. Background Art

[0002] With the development of the Internet and 5G, various network terminal devices are being used on the market, including PCs, smartphones, and tablets. These devices have various operating systems, screen sizes, and application types. In order for users to be able to open the pages they need to access conveniently and normally, and for manufacturers to be able to provide more corresponding features for different terminals, page applications need to adapt to various devices. The current adaptation solutions include server-side adaptation technology based on userAgent and client-side adaptation technology based on screen size (media query, rem, etc.).

[0003] There are at least two problems with existing technologies: on the one hand, the server adapts the page based on userAgent, and the adaptation control is in the server, which requires collaboration between the front-end and back-end. The separation of the front-end and back-end is not complete, and two or even more page applications need to be developed, which has high development and maintenance costs. On the other hand, the client adapts the page based on the screen size, mixing multiple sets of HTML structures and CSS styles together. For complex adaptation requirements, it may be necessary to write a large number of media query rules, resulting in a chaotic page structure and difficulty in maintenance. It increases the file size and the first screen loading time, which is especially unfriendly to mobile terminals and consumes more traffic. In particular, the screen size adaptation achieved by relying on media query technology will frequently trigger browser page redrawing when the display area size changes, increasing overhead. Summary of the invention

[0004] In view of the technical problems existing in the prior art, the present invention provides a multi-terminal and multi-size page adaptation method, which can be compatible with terminals with different systems and different screen sizes, realize one page entrance, two adaptation methods, and adaptation of multiple device types, avoid repeated development, reduce maintenance investment, and improve development efficiency.

[0005] According to a first aspect of the present invention, a multi-terminal and multi-size page adaptation method is provided, comprising:

[0006] Step 1: Access a unified page URL through a browser of a terminal device, enter a view control component, and determine a page adaptation mode of the terminal device according to business requirements. The page adaptation mode includes a page adaptation mode based on screen size and a page adaptation mode based on a user agent identifier;

[0007] Step 2: Based on the page adaptation mode, call the corresponding adaptation mode function to calculate the view component type that matches the terminal device;

[0008] Step 3, control the page to load the matching view component and display the corresponding page view to the user through the client browser.

[0009] Based on the above technical solution, the present invention can also make the following improvements.

[0010] Optionally, the step 2, based on the page adaptation mode, calls a corresponding adaptation mode function to calculate the view component type matching the terminal device, including:

[0011] If the page adaptation mode of the terminal device is determined to be a page adaptation mode based on the screen size according to business requirements, the first adaptation mode function is called to calculate the view component type matching the terminal device according to the screen size of the terminal device.

[0012] Optionally, the calling of the first adaptation mode function to calculate the view component type matching the terminal device according to the screen size of the terminal device includes:

[0013] Get the screen size of the terminal device through the window.screen.width or window.innerWidth function;

[0014] When the screen width is ≤750px, the first adaptation mode function returns the mobile type, and the view component type that matches the terminal device is the mobile view component. The mobile type indicates that the screen size of the terminal device is within the screen size adaptation range of the mobile phone.

[0015] When 750px<screen width≤1280px, the first adaptation mode function returns the pad type, and the view component type matching the terminal device is the pad view component, and the pad type indicates that the screen size of the terminal device is the screen size adaptation interval of the tablet;

[0016] When the screen width is greater than 1280px, the first adaptation mode function returns the PC type, and the view component type matching the terminal device is the PC view component. The PC type indicates that the screen size of the terminal device is in the screen size adaptation range of a PC computer.

[0017] Optionally, when the screen width is ≤750px, the first adaptation mode function returns a mobile type, and the view component type matching the terminal device is a mobile view component, including:

[0018] If the screen width of the terminal device is less than 420px, the first adaptation mode function returns the mini-mobile type, and the view component type that matches the terminal device is the mini-mobile view component;

[0019] If the screen width of the terminal device is between 420px and 750px, the first adaptation mode function returns the large-mobile type, and the view component type that matches the terminal device is the large-mobile view component;

[0020] When the screen width is greater than 1280px, the first adaptation mode function returns the PC type, and the view component type matching the terminal device is the PC view component, including:

[0021] If the screen width of the terminal device is between 1280px and 1920px, and the first adaptation mode function returns the mini-pc type, then the view component type that matches the terminal device is the mini-pc view component;

[0022] If the screen width of the terminal device is greater than 1920px, the first adaptation mode function returns the large-pc type, and the view component type that matches the terminal device is the large-pc view component.

[0023] Optionally, the step 2, based on the page adaptation mode, calls a corresponding adaptation mode function to calculate the view component type matching the terminal device, including:

[0024] If the page adaptation mode of the terminal device is determined to be the page adaptation mode based on the user agent identifier according to business requirements, the second adaptation mode function is called to calculate the view component type matching the terminal device according to the type of the terminal device.

[0025] Optionally, the calling of the second adaptation mode function to calculate the view component type matching the terminal device according to the type of the terminal device includes:

[0026] Get the user agent ID of the terminal device;

[0027] If the user agent identifier contains both Android characters and Mobile characters, or contains iPhone characters, and the second adaptation mode function returns the mobile type, then the view component type that matches the terminal device is the mobile view component;

[0028] If the user agent identifier contains the character "Android" but does not contain the character "Mobile", or the user agent identifier contains the character "iPad", and the second adaptation mode function returns the pad type, the view component type that matches the terminal device is the pad view component;

[0029] If the user agent identifier contains Windows characters or Mac characters, the second adaptation mode function returns a PC type, and the view component type that matches the terminal device is a PC view component.

[0030] Optionally, the calling of the second adaptation mode function to calculate the view component type matching the terminal device according to the type of the terminal device includes:

[0031] The second adaptation mode function is called to calculate the view component type that matches the terminal device according to the system platform or application of the terminal device.

[0032] Optionally, the calling of the second adaptation mode function to calculate the view component type matching the terminal device according to the system platform or application of the terminal device includes:

[0033] If the user agent identifier contains the character Android, the terminal device is an Android platform;

[0034] If the user agent identifier contains the characters iPhone, iPad, or Mac, the terminal device is an iOS platform;

[0035] If the user agent identifier contains the Linux character, the terminal device is a Linux platform;

[0036] If the user agent identifier contains Windows characters, the terminal device is a Windows platform;

[0037] Calculate the view component type that matches the terminal device according to the system platform of the terminal device;

[0038] as well as,

[0039] If the user agent identifier contains the MicroMessenger character, the current application on the terminal device is the WeChat application;

[0040] If the user agent identifier contains the word alipay, the current application on the terminal device is the Alipay application;

[0041] If the user agent identifier contains the character "weibo", the current application on the terminal device is the Weibo application;

[0042] According to the current application on the terminal device, the view component type matching the terminal device is calculated.

[0043] Optionally, the structure of the view component includes HTML structure, CSS expression and JS behavior, wherein the HTML structure and CSS expression together constitute the UI layer of the page view, which is owned by each view component separately; the JS behavior is the interactive logic layer, which is shared by each page view;

[0044] The step 3, controlling the page to load a matching view component, and displaying the corresponding page view to the user through the client browser, includes:

[0045] According to the view component type that matches the terminal device, the HTML structure, CSS expression, own JS and shared JS of the corresponding view component are downloaded and loaded, and the corresponding page view is displayed to the user through the client browser.

[0046] Optionally, the method further includes:

[0047] The resize event of the client browser is monitored through the event monitoring function addEventListener of the client browser. When the visible window size of the terminal device changes, step 2 and step 3 are re-executed.

[0048] The present invention provides a multi-terminal and multi-size page adaptation method, which provides a unified access path URL, has two adaptation modes of user agent identifier and screen size, and has flexible adaptation scheme selection and easy expansion. It provides a unified control function, and uniformly places the adaptation control logic on the client, so that the front-end and back-end are separated more thoroughly, and the UI coupling of multi-terminal, multi-device and multi-size page adaptation is reduced. The logic layer is reused across terminals, which improves the efficiency of development and maintenance. Each terminal is loaded on demand, which saves network traffic and improves the page loading speed. BRIEF DESCRIPTION OF THE DRAWINGS

[0049] Figure 1 A flow chart of a multi-terminal and multi-size page adaptation method provided by the present invention;

[0050] Figure 2 is a flow chart of the page adaptation method of the present invention;

[0051] Figure 3 It is a sub-step flow chart of the adaptation mode of the present invention;

[0052] Figure 4 This is a working principle diagram of the screen size adaptation mode in the present invention;

[0053] Figure 5 This is a working principle diagram of the user agent identifier userAgent adaptation mode in the present invention;

[0054] Figure 6 It is a structural diagram of all view components in the present invention;

[0055] Figure 7 A module diagram of a single view component in the present invention;

[0056] Figure 8 The figure is a schematic diagram of the structure of a computer device in the present invention. DETAILED DESCRIPTION

[0057] In order to make the purpose, technical solutions and advantages of the embodiments of the present invention clearer, the technical solutions in the embodiments of the present invention will be clearly and completely described below in conjunction with the drawings in the embodiments of the present invention. Obviously, the described embodiments are part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments in the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention. In addition, the technical features in the various embodiments or single embodiments provided by the present invention can be arbitrarily combined with each other to form a feasible technical solution. This combination is not subject to the constraints of the sequence of steps and / or the structural composition mode, but must be based on the ability of ordinary technicians in this field to achieve. When the combination of technical solutions is contradictory or cannot be achieved, it should be considered that such a combination of technical solutions does not exist and is not within the scope of protection required by the present invention.

[0058] The multi-terminal and multi-size page adaptation method of the present invention is applied to electronic terminal devices, wherein the electronic terminal devices can be terminal devices with display screens such as PC desktops, PC notebooks, tablet computers, and mobile phones. The implementation details of the page adaptation method of this embodiment are described in detail below. The following content is only for the convenience of understanding the implementation details provided, and is not necessary for implementing this solution.

[0059] Figure 1 A flow chart of a multi-terminal and multi-size page adaptation method provided by the present invention is as follows: Figure 1 and Figure 2 As shown, the method includes:

[0060] Step 1: Access a unified page URL through the browser of the terminal device, enter the view control component, and determine the page adaptation mode of the terminal device according to business needs. The page adaptation mode includes a page adaptation mode based on screen size and a page adaptation mode based on user agent identifier.

[0061] It is understandable that, through the browser of the terminal device, a unified page address URL is accessed to enter the page. At this time, the client browser will load the document and related resources of the page and execute the initialization of the page.

[0062] After the resources are loaded, the program is executed and enters the view control component. Figure 3, two page adaptation modes are configured in the view control component. According to business needs, one of the page adaptation modes can be selected as the page adaptation mode of the current terminal device. These two page adaptation modes are the getViewByScreenWidth mode based on screen size and the getViewByUserAgent mode based on user agent identifier, that is, the page adaptation mode based on screen size and the page adaptation mode based on user agent identifier. Select a mode that meets the needs in these two modes and configure the adaptation mode function for each page adaptation mode.

[0063] Step 2: Based on the page adaptation mode, call the corresponding adaptation mode function to calculate the view component type that matches the terminal device.

[0064] It can be understood that based on the page adaptation mode of the terminal device, the corresponding adaptation mode function is called. When the page adaptation mode of the terminal device is a page adaptation mode based on the screen size, the corresponding adaptation mode function is called the first adaptation mode function; when the page adaptation mode of the terminal device is a page adaptation mode based on the user agent identifier, the corresponding adaptation mode function is called the second adaptation mode function.

[0065] Wherein, the step 2, based on the page adaptation mode, calls the corresponding adaptation mode function to calculate the view component type matching the terminal device, including:

[0066] If the page adaptation mode of the terminal device is determined to be a page adaptation mode based on the screen size according to business requirements, the first adaptation mode function is called to calculate the view component type matching the terminal device according to the screen size of the terminal device.

[0067] It is understandable that when the page adaptation mode of the terminal device is a page adaptation mode based on the screen size, the specific view component type is determined according to the screen size of the terminal device.

[0068] See also Figure 4 According to the more common screen size classification, the screen size is obtained through window.screen.width or window.innerWidth, and the execution function of the adaptation mode is configured, that is, 750px physical width and below is the screen size adaptation range of mobile phones, 750px to 1280px physical width is the screen size adaptation range of tablets, and 1280px and above is the screen size adaptation range of PCs. According to this rule, configure the getViewByScreenWidth function:

[0069] When the screen size of the terminal device (mainly refers to the screen width of the terminal device) is less than or equal to 750px, the adaptation mode function returns the mobile type; when the screen size is greater than 1280, the adaptation mode function returns the pc type, and for other sizes, the adaptation mode function returns the pad type.

[0070] The preset screen size division rules can be set according to actual needs, and this embodiment does not specifically limit this. For example, the screen width of the terminal device below 420px can be configured as mini-mobile, between 420px and 750px as large-mobile, 750px to 1280px as pad, 1280px to 1920px as mini-pc, and above 1920px as large-pc.

[0071] The adaptation mode function calculates the view component type that matches the current terminal device under the current visible window size through the preset matching conditions, and loads the view component through the program control page. When the adaptation result matches the mobile type, the view-mobile view component is loaded; when the matching result matches the pad type, the view-pad view component is loaded; when the matching result matches the pc type, the view-pc view component is loaded.

[0072] Wherein, the step 2, based on the page adaptation mode, calls the corresponding adaptation mode function to calculate the view component type matching the terminal device, including:

[0073] If the page adaptation mode of the terminal device is determined to be the page adaptation mode based on the user agent identifier according to business requirements, the second adaptation mode function is called to calculate the view component type matching the terminal device according to the type of the terminal device.

[0074] It is understandable that when the page adaptation mode of the terminal device is a page adaptation mode based on the user agent identifier, the view component type is determined according to the type of the terminal device, or the view component type matching the terminal device can also be determined according to the system platform of the terminal device or the application on the terminal device.

[0075] See also Figure 5In the embodiment of the present invention, the execution function of the adaptation mode is configured according to the more common device type classification, that is: obtain the user agent identifier of the terminal device; if the user agent identifier contains Android and contains the Mobile character, the terminal device is an Android phone; if the user agent identifier contains the iPhone character, the terminal device is an Apple phone; if the user agent identifier contains Android but does not contain the Mobile character, the terminal device is an Android tablet; if the user agent identifier contains the iPad character, the terminal device is an Apple tablet; if the user agent identifier contains the Mac character, the terminal device is an Apple computer; if the user agent identifier contains the Windows character, the terminal device is a Windows computer. According to this rule, configure the getViewByUserAgent function to obtain the user agent identifier of the terminal device.

[0076] Specifically, when the userAgent flag string contains both Android characters and Mobile characters, or contains iPhone characters, the second adaptation mode function returns the mobile type; when the userAgent flag string contains Android characters but does not contain Mobile characters, or contains iPad characters, the second adaptation mode function returns the pad type; when the userAgent flag string contains Windows characters, or contains Mac characters, the second adaptation mode function returns the pc type; other cases are also classified as pc type. According to the type of terminal device returned by the second adaptation mode function, the corresponding view component type is matched for the terminal device, and the page is controlled to load the corresponding view component, and the view page is displayed through the browser.

[0077] The configuration terminal device type matching details can be set according to actual needs, and this implementation does not specifically limit this. The terminal device platform and the current application on the terminal device can also be expanded here to judge and distinguish, specifically:

[0078] Android characters are included for Android platforms, iPhone, iPad, and Mac characters are included for iOS platforms, Linux characters are included for Linux platforms, and Windows characters are included for Windows platforms. MicroMessenger characters are included for WeChat applications, alipay characters are included for Alipay applications, weibo characters are included for Weibo applications, and so on. Differentiated page adaptation is provided for different platforms and applications.

[0079] Step 3, control the page to load the matching view component and display the corresponding page view to the user through the client browser.

[0080] It is understandable that step 2 matches the view component type of the terminal device, so this step loads the corresponding view component according to the view component type matched by the terminal device.

[0081] The structure of the view components is composed of HTML structure, CSS expression and JS behavior. The HTML structure and CSS expression together constitute the UI layer of the page view, which is owned by each view component separately; the JS behavior is the interactive logic layer, which is shared by all page views.

[0082] According to the view component type that matches the terminal device, the HTML structure, CSS expression, own JS and shared JS of the corresponding view component are downloaded and loaded, and the corresponding page view is displayed to the user through the client browser.

[0083] It is understandable that each view component consists of HTML structure, CSS expression and JS behavior, as shown in Figure 6 , shows the structure of the view components of pc type, pad type and mobile type. HTML and CSS together constitute the UI layer of the page view, and JS is the interactive logic layer. For different views of the same page, the UI is often different, but the interactive logic JS is basically the same. Figure 7 , the UI of each view component is developed separately (i.e. HTML structure and CSS expression), and then the view group's own specific interaction logic (own JS behavior) is combined with the common interaction logic (common JS behavior) of each view component to form a complete component interaction logic. The component instance code is as follows:

[0084] On-demand loading is achieved through the component development model provided by modern front-end development frameworks such as Vue and React, as well as construction tools such as webpack and rollup. That is, when loading the moblie view, the browser only needs to download the HTML, CSS, its own JS and shared JS of the moblie component, without loading the HTML, CSS, JS and other resources of other view components. When the monitoring takes effect and triggers the view switch, the page will switch from the mobile view to the pad view. At this time, the browser can download the HTML, CSS and its own JS of the pad component according to resource needs. In this way, the UI coupling between views is reduced, the code reuse rate and development efficiency are improved, while saving network traffic and increasing page loading speed.

[0085] In the process of page adaptation for the terminal device, since the size of the visible window of the terminal device will change, the present invention will monitor the changes of the visible window of the terminal device in real time and adjust the view component type according to the changes of the screen size of the terminal device at any time.

[0086] Specifically, the browser's event listening function addEventListener is used to listen to the browser's resize event. When the visible window size of the terminal device changes, the view adaptation functions in steps 2 and 3 are triggered to re-execute and recalculate the view component type matched by the terminal device. Once the matching result changes, such as from mobile type to pad type, the front-end framework vue3.0 will automatically cancel the view-mobile component and load the view-pad component to achieve responsive adaptation of the page. The same applies to changes in other matching types.

[0087] According to one embodiment of the present invention, the present invention further provides a computer device and a computer storage medium. The computer device provided by the present invention includes at least one processor and at least one memory connected to the processor in communication. The memory stores computer instructions that can be executed by at least one processor, and the computer instructions are executed by at least one processor so that at least one processor can execute the page adaptation processing method described in any of the above embodiments.

[0088] like Figure 8 As shown, it is the framework of the computer device according to the embodiment of the present invention, and the computer device represents various forms of computers or mobile terminal devices, wherein the digital computer may include a desktop computer, a portable computer, a server, a mainframe computer and other suitable computers, and the mobile terminal device may include a tablet computer, a smart phone, a wearable device, etc.

[0089] like Figure 8 As shown, the computer device 200 includes: a computing unit 201, a RAM 202, a ROM 203, a network unit 204, a storage unit 205, an input 206, an output 307, a bus 208, and an I / O interface 209. The computing unit 201, the RAM 202, and the ROM 203 are connected to each other via the bus 208, and the I / O interface 209 is also connected to the bus 208. The input unit 206, the output unit 207, the storage unit 205, and the network unit 204 can be connected to the I / O interface 209.

[0090] The computing unit 201 can perform various processes in the method embodiment of the present application according to the computer instructions stored in the read-only memory ROM203 or the computer instructions loaded from the storage unit 205 to the random access memory RAM202. The computing unit 201 can be various general and / or special processing components with processing and computing capabilities. The computing unit 201 may include but is not limited to a central processing unit (CPU), a graphics processing unit (GPU), various dedicated artificial intelligence (AI) computing chips, various computing units running machine learning model algorithms, digital signal processors (DSPs), and any appropriate processors, controllers, microcontrollers, etc. The input unit 206 can be such as a keyboard, a mouse, a touch screen, a microphone, etc.; the output unit 207 can be such as a display, a speaker, an indicator light, etc. The device 200 can exchange information, data, etc. with other devices through the network unit 204.

[0091] A multi-terminal and multi-size page adaptation method provided by an embodiment of the present invention provides a unified access path URL, has two adaptation modes of user agent identifier and screen size, has flexible adaptation scheme selection and is easy to expand, provides a unified control function, and uniformly places the adaptation control logic on the client, separates the front and back ends more thoroughly, reduces UI coupling of multi-terminal, multi-device, and multi-size page adaptation, and reuses the logic layer across terminals, improves the efficiency of development and maintenance, and each terminal loads on demand, saves network traffic, and improves page loading speed.

[0092] In addition, the division of the above-mentioned various method steps is for clear description. In specific implementation, they can be combined into one step, or some steps can be divided into multiple steps. As long as they include the same logical relationship, they are all within the protection scope of this patent; adding insignificant modifications to the algorithm or process or introducing insignificant designs that do not change the core design of the algorithm and process are all within the protection scope of this patent.

[0093] Those skilled in the art will appreciate that the above-mentioned embodiments are specific examples for implementing the present invention, and in actual applications, various changes may be made thereto in form and detail without departing from the spirit and scope of the present invention.

Claims

1. A multi-terminal and multi-size page adaptation method, characterized in that: include: Step 1: Access a unified page URL through a browser of a terminal device, enter a view control component, and determine a page adaptation mode of the terminal device according to business requirements. The page adaptation mode includes a page adaptation mode based on screen size and a page adaptation mode based on a user agent identifier; Step 2: Based on the page adaptation mode, call the corresponding adaptation mode function to calculate the view component type that matches the terminal device; Step 3, control the page to load the matching view component and display the corresponding page view to the user through the client browser.

2. The multi-terminal and multi-size page adaptation method according to claim 1, characterized in that: The step 2, based on the page adaptation mode, calls the corresponding adaptation mode function to calculate the view component type matching the terminal device, including: If the page adaptation mode of the terminal device is determined to be a page adaptation mode based on the screen size according to business requirements, the first adaptation mode function is called to calculate the view component type matching the terminal device according to the screen size of the terminal device.

3. The multi-terminal and multi-size page adaptation method according to claim 2, characterized in that: The calling of the first adaptation mode function to calculate the view component type matching the terminal device according to the screen size of the terminal device includes: Get the screen size of the terminal device through the window.screen.width or window.innerWidth function; When the screen width is ≤750px, the first adaptation mode function returns the mobile type, and the view component type that matches the terminal device is the mobile view component. The mobile type indicates that the screen size of the terminal device is within the screen size adaptation range of the mobile phone. When 750px<screen width≤1280px, the first adaptation mode function returns the pad type, and the view component type matching the terminal device is the pad view component, and the pad type indicates that the screen size of the terminal device is the screen size adaptation interval of the tablet; When the screen width is greater than 1280px, the first adaptation mode function returns the PC type, and the view component type matching the terminal device is the PC view component. The PC type indicates that the screen size of the terminal device is in the screen size adaptation range of a PC computer.

4. The multi-terminal and multi-size page adaptation method according to claim 3, characterized in that: When the screen width is ≤750px, the first adaptation mode function returns the mobile type, and the view component type matching the terminal device is the mobile view component, including: If the screen width of the terminal device is less than 420px, the first adaptation mode function returns the mini-mobile type, and the view component type that matches the terminal device is the mini-mobile view component; If the screen width of the terminal device is between 420px and 750px, the first adaptation mode function returns the large-mobile type, and the view component type that matches the terminal device is the large-mobile view component; When the screen width is greater than 1280px, the first adaptation mode function returns the PC type, and the view component type matching the terminal device is the PC view component, including: If the screen width of the terminal device is between 1280px and 1920px, and the first adaptation mode function returns the mini-pc type, then the view component type that matches the terminal device is the mini-pc view component; If the screen width of the terminal device is greater than 1920px, the first adaptation mode function returns the large-pc type, and the view component type that matches the terminal device is the large-pc view component.

5. The multi-terminal and multi-size page adaptation method according to claim 1, characterized in that: The step 2, based on the page adaptation mode, calls the corresponding adaptation mode function to calculate the view component type matching the terminal device, including: If the page adaptation mode of the terminal device is determined to be the page adaptation mode based on the user agent identifier according to business requirements, the second adaptation mode function is called to calculate the view component type matching the terminal device according to the type of the terminal device.

6. The multi-terminal and multi-size page adaptation method according to claim 5, characterized in that: The calling of the second adaptation mode function to calculate the view component type matching the terminal device according to the type of the terminal device includes: Get the user agent ID of the terminal device; If the user agent identifier contains both Android characters and Mobile characters, or contains iPhone characters, and the second adaptation mode function returns the mobile type, then the view component type that matches the terminal device is the mobile view component; If the user agent identifier contains the character "Android" but does not contain the character "Mobile", or the user agent identifier contains the character "iPad", and the second adaptation mode function returns the pad type, the view component type that matches the terminal device is the pad view component; If the user agent identifier contains Windows characters or Mac characters, the second adaptation mode function returns a PC type, and the view component type that matches the terminal device is a PC view component.

7. The multi-terminal and multi-size page adaptation method according to claim 6, characterized in that: The calling of the second adaptation mode function to calculate the view component type matching the terminal device according to the type of the terminal device includes: The second adaptation mode function is called to calculate the view component type that matches the terminal device according to the system platform or application of the terminal device.

8. The multi-terminal and multi-size page adaptation method according to claim 7, characterized in that: The calling of the second adaptation mode function to calculate the view component type matching the terminal device according to the system platform or application of the terminal device includes: If the user agent identifier contains the character Android, the terminal device is an Android platform; If the user agent identifier contains the characters iPhone, iPad, or Mac, the terminal device is an iOS platform; If the user agent identifier contains the Linux character, the terminal device is a Linux platform; If the user agent identifier contains Windows characters, the terminal device is a Windows platform; Calculate the view component type that matches the terminal device according to the system platform of the terminal device; as well as, If the user agent identifier contains the MicroMessenger character, the current application on the terminal device is the WeChat application; If the user agent identifier contains the word alipay, the current application on the terminal device is the Alipay application; If the user agent identifier contains the character "weibo", the current application on the terminal device is the Weibo application; According to the current application on the terminal device, the view component type matching the terminal device is calculated.

9. The multi-terminal and multi-size page adaptation method according to claim 1, characterized in that: The structure of the view component includes HTML structure, CSS expression and JS behavior, wherein the HTML structure and CSS expression together constitute the UI layer of the page view, which is owned by each view component separately; JS behavior is the interactive logic layer, which is shared by each page view; The step 3, controlling the page to load a matching view component, and displaying the corresponding page view to the user through the client browser, includes: According to the view component type that matches the terminal device, the HTML structure, CSS expression, own JS and shared JS of the corresponding view component are downloaded and loaded, and the corresponding page view is displayed to the user through the client browser.

10. The multi-terminal and multi-size page adaptation method according to claim 1, characterized in that: The method further comprises: The resize event of the client browser is monitored through the event monitoring function addEventListener of the client browser. When the visible window size of the terminal device changes, step 2 and step 3 are re-executed.

Images