A webpage adaptation method compatible with multiple screens

Abstract

The present invention relates to the field of Internet technology, and in particular to a webpage adaptation method compatible with multiple screens, comprising the following steps: adding a meta subtag to a common template header tag; in common logic, adding a listener window resize event and setting the maximum window font size; in common styles, responsively setting the body font-size; other templates and other logic are written normally; and other styles are written using rem as the size unit. The present invention solves problems such as inconsistent display, unreasonable layout, and overlapping styles on screens with different resolutions; instead of writing multiple styles for screens with different resolutions, only one set of code is needed, which reduces development difficulty, thereby improving development efficiency and reducing maintenance costs; optimizing the module of the window document and further optimizing the webpage layout; and is suitable for webpage design on different devices such as PCs, tablets, and mobile phones, thereby improving user experience.

Description

Technical Field

[0001] The present invention relates to the field of Internet technology, and in particular to a webpage adaptation method compatible with multiple screens. Background Art

[0002] At present, when building a website, the popular sizes of different browsers and different terminal devices are also different. As far as the PC web design size is concerned, the more common resolutions are 1920*1080 and 1366*768. The mobile web design sizes are more diverse, with a wide range of sizes, including IOS and Android. Usually, they are divided into 750px or 960px or 1080px, and are generally not less than 750px pixel size (width). If you need to be compatible with the display sizes of different browsers and different terminal devices, the more popular approach is to make a responsive website, that is, display different sizes according to different resolutions. Whether you are using a mobile phone, iPad, or computer, the page can automatically switch resolutions, image sizes and related script functions, etc., and is compatible with multiple terminal devices.

[0003] Commonly used adaptation methods include adaptive and responsive layouts. Adaptive layouts require multiple code developments, loading different URLs based on page size. This results in high development and maintenance costs, and the display quality varies from page to page. Responsive layouts include static, percentage-based, breakpoint, and elastic layouts. Each has its own advantages and disadvantages, and they are often used in conjunction with each other during development. Careful consideration is required in selecting and debugging these layouts. Sometimes, media type (@media) styles must be used for different terminal types and screen sizes, which requires high technical skills. Summary of the Invention

[0004] The purpose of the present invention is to solve the defects mentioned in the above background technology by proposing a web page adaptation method compatible with multiple screens.

[0005] The technical solution adopted in the present invention is as follows:

[0006] A webpage adaptation method compatible with multiple screens is provided, comprising the following steps:

[0007] S1: Add meta subtag to the Head tag of the public template;

[0008] S2: In the public logic, add a listener for the window's resize event and set the maximum font size of the browser window document;

[0009] S3: In the common style, set the body font-size responsively;

[0010] S4: Other templates, write normally;

[0011] S5: other logic, written normally;

[0012] S6: Other styles are written in rem as the size unit.

[0013] As a preferred technical solution of the present invention: the S1 is used to be compatible with the display effects of various devices.

[0014] As a preferred technical solution of the present invention: in S2, when the screen is larger than the vertical screen size, the fontSize is fixed.

[0015] As a preferred technical solution of the present invention: in S2, the fontSize of each device has a minimum value by default.

[0016] As a preferred technical solution of the present invention: in said S2, a distance model of the browser window document is constructed to adaptively adjust the module layout of the browser window document.

[0017] As an optimal technical solution of the present invention: in the distance model, a plane rectangular coordinate system is established with the upper left corner of the browser window document as the origin, and the position coordinates of each element in the browser window document on the page are obtained through the plane rectangular coordinate system.

[0018] As a preferred technical solution of the present invention: in the distance model, each element in the browser window document is divided into a corresponding rectangular area, with the upper left corner of the rectangle as the base point, and a four-tuple x is defined for each node. i ,y i , w i , h i , where x i Represents the component of the element on the horizontal coordinate in the plane rectangular coordinate system, y i Represents the component of the element on the ordinate in the plane rectangular coordinate system, w i Indicates the width of the element in pixels, h i Indicates the height of the element in pixels; for elements i and j, there are:

[0019]

[0020]

[0021] in:

[0022] x ijl =x j -x i

[0023] x ijr =xj +w j -x i -w i

[0024] y ijl =y j -y i

[0025] y ijr =y j +h j -y i -h i

[0026] Among them, n i 、n j are the rectangular areas corresponding to the two elements i and j, d x (n i , n j ) is the distance in the horizontal direction of the element, x ij is the difference between the left horizontal coordinate components of the two elements, x ijr is the difference between the right horizontal coordinate components of the two elements; d x (n i , n j ) is the distance in the vertical direction of the element, y ijl is the difference between the ordinate components below the two elements, y ijr is the difference between the upper ordinate components of the two elements.

[0027] As a preferred technical solution of the present invention: in the distance model, the distance in the horizontal coordinate direction and the distance in the vertical coordinate direction corresponding to the two elements i and j are added to obtain the element visual distance:

[0028] d(n i , n j )=d x (n i , n j )+d x (n i , n j )

[0029] Among them, d(n i , n j ) is the visual distance between the two elements.

[0030] As a preferred technical solution of the present invention: in the distance model, when the projections of two elements i and j on the rectangular coordinate axis have a rectangular edge overlapping or the projection of one rectangle completely covers the projection of the other rectangle, the distance between the two elements on the corresponding coordinate axis is considered to be 0; when the projections of two elements on the rectangular coordinate axis do not overlap or cover each other, the minimum value between the edge where the vertices of the two elements are located and the projection of the other edge on the coordinate axis is selected as the distance value between the two elements; based on the element distance model, the element rectangles in the browser window document are clustered and divided using the DBSCAN algorithm to optimize the layout of the browser window document.

[0031] As a preferred technical solution of the present invention: in S3, responsive settings are performed for the mobile phone side and the PC side in horizontal and vertical screens respectively.

[0032] Compared with the prior art, the webpage adaptation method compatible with multiple screens provided by the present invention has the following beneficial effects:

[0033] 1. Solved the problems of inconsistent display, unreasonable layout, and overlapping styles on screens with different resolutions (including horizontal and vertical screens);

[0034] 2. No need to write multiple styles for different resolution screens, only one set of code is needed, which reduces the development difficulty, thereby improving development efficiency and reducing maintenance costs;

[0035] 3. Optimize the window document module through visual distance calculation and clustering algorithm, and further optimize the web page layout;

[0036] 4. Web design suitable for different devices such as PC, tablets, mobile phones, etc., so that every user can have a good experience. BRIEF DESCRIPTION OF THE DRAWINGS

[0037] Figure 1 Flowchart of a method according to a preferred embodiment of the present invention. DETAILED DESCRIPTION

[0038] It should be noted that, unless there is a conflict, the embodiments and features in the embodiments of this embodiment can be combined with each other. 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 only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without making creative efforts are within the scope of protection of the present invention.

[0039] Reference Figure 1 The preferred embodiment of the present invention provides a webpage adaptation method compatible with multiple screens, comprising the following steps:

[0040] S1: Add meta subtag to the Head tag of the public template;

[0041] S2: In the public logic, add a listener for the window's resize event and set the maximum font size of the browser window document;

[0042] S3: In the common style, set the body font-size responsively;

[0043] S4: Other templates, write normally;

[0044] S5: other logic, written normally;

[0045] S6: Other styles are written in rem as the size unit.

[0046] The S1 is used to be compatible with the display effects of various devices.

[0047] In S2, when the screen size is larger than the vertical screen size, the fontSize is fixed.

[0048] In S2, the fontSize of each device has a minimum value by default.

[0049] In the above-mentioned S2, a distance model of the browser window document is constructed to adaptively adjust the module layout of the browser window document.

[0050] In the distance model, a plane rectangular coordinate system is established with the upper left corner of the browser window document as the origin, and the position coordinates of each element in the browser window document on the page are obtained through the plane rectangular coordinate system.

[0051] In the distance model, each element in the browser window document is divided into a rectangular area, and a quadruple x is defined for each node with the upper left corner of the rectangle as the base point. i ,y i , w i , h i , where x i Represents the component of the element on the horizontal coordinate in the plane rectangular coordinate system, y i Represents the component of the element on the ordinate in the plane rectangular coordinate system, w i Indicates the width of the element in pixels, h i Indicates the height of the element in pixels; for elements i and j, there are:

[0052]

[0053]

[0054] in:

[0055] x ijl =x j -x i

[0056] x ijr =x j +w j -x i -w i

[0057] y ijl =y j -y i

[0058] y ijr =y j +h j -y i -h i

[0059] Among them, n i 、n j are the rectangular areas corresponding to the two elements i and j, d x (n i , n j ) is the distance in the horizontal direction of the element, x ijl is the difference between the left horizontal coordinate components of the two elements, x ijr is the difference between the right horizontal coordinate components of the two elements; d x (n i , n j ) is the distance in the vertical direction of the element, y ijl is the difference between the ordinate components below the two elements, y ijr is the difference between the upper ordinate components of the two elements.

[0060] In the distance model, the element visual distance is obtained by adding the distance in the horizontal coordinate direction and the distance in the vertical coordinate direction corresponding to the two elements i and j:

[0061] d(n i , n j )=d x (n i , n j )+d x (n i , n j )

[0062] Among them, d(n i , n j ) is the visual distance between the two elements.

[0063] In the distance model, when the projections of two elements i and j on the rectangular coordinate axis have a rectangular edge that overlaps or the projection of one rectangle completely covers the projection of the other rectangle, the distance between the two elements on the corresponding coordinate axis is considered to be 0; when the projections of two elements on the rectangular coordinate axis do not overlap or cover each other, the minimum value between the edge where the vertices of the two elements are located and the projection of the other edge on the coordinate axis is selected as the distance value between the two elements; based on the element distance model, the element rectangles in the browser window document are clustered and divided using the DBSCAN algorithm to optimize the layout of the browser window document.

[0064] In the S3, responsive settings are performed for the mobile phone side and the PC side, respectively, in horizontal and vertical screens.

[0065] In this embodiment, the commonly used design draft size for PC is 1920*1080px, and the commonly used design draft size for mobile phone is 375*667pt, taking the mobile phone as an example.

[0066] Add meta subtags to the Head tag of the public template to be compatible with the display effects of various devices, as follows:

[0067] <meta name＝″viewport″content＝″width＝device-width，initial-scale＝1.0，user-scalable＝no″> .

[0068] In the common logic, add a listener for the window's resize event and set the maximum font size for the browser window document. This is because each device's font size has a minimum value by default, but no maximum value. When using responsive dimensions, the font size will change with the screen size. When it reaches a certain level, the user experience is poor. Here, when the screen size is larger than 375pt (750px), the font size is fixed at 16px.

[0069] With the upper left corner of the browser window document as the origin, a plane rectangular coordinate system is established, and the position coordinates of each element in the browser window document on the page are obtained through the plane rectangular coordinate system. For each element in the browser window document, a rectangular area is divided accordingly, and with the upper left corner of the rectangle as the base point, a four-tuple x is defined for each node. i ,y i , w i , h i , where x i Represents the component of the element on the horizontal coordinate in the plane rectangular coordinate system, y i Represents the component of the element on the ordinate in the plane rectangular coordinate system, w i Indicates the width of the element in pixels, h i Indicates the height of the element in pixels; for elements i and j, there are:

[0070]

[0071]

[0072] in:

[0073] x ijl =x j -x i

[0074] x ijr =x j +w j -x i -w i

[0075] y ijl =y j -y i

[0076] y ijr =y j +h j -y i -h i

[0077] Among them, n i 、n j are the rectangular areas corresponding to the two elements i and j, d x (n i , n j ) is the distance in the horizontal direction of the element, x ijl is the difference between the left horizontal coordinate components of the two elements, x ijr is the difference between the right horizontal coordinate components of the two elements; d x (n i , n j ) is the distance in the vertical direction of the element, y ijl is the difference between the ordinate components below the two elements, y ijr is the difference between the upper ordinate components of the two elements.

[0078] The visual distance of the elements is obtained by adding the distance in the horizontal and vertical directions of the elements corresponding to the two elements i and j:

[0079] d(n i , n j )=d x (n i , n j )+d x (n i , n j )

[0080] Among them, d(n i , n j) is the visual distance between the two elements.

[0081] When the projections of elements i and j on a rectangular axis overlap or one rectangle completely covers the projection of the other, the distance between the two elements on the corresponding coordinate axis is considered to be 0. When the projections of two elements on a rectangular axis do not overlap or overlap, the minimum value between the edge on which the vertices of the two elements lie and the projection of the other edge on the coordinate axis is selected as the distance between the two elements. Based on the visual distance of the elements, the elements within the browser window document are divided into rectangular clusters using the DBSCAN algorithm. The DBSCAN algorithm clusters based on the density of data, which is described by the number of nodes in the neighborhood. A threshold for the neighborhood can be set, and cluster identification is performed using the DBSCAN algorithm. When the distance between two elements exceeds the threshold, the two elements are determined to be different modules, and the module layout of the two modules is adaptively adjusted, such as the selection effect and position of the two modules.

[0082] In the common styles, the body's font-size property uses the media type (@media) style, with portrait set to calc(100vw / 37.5) and landscape set to calc(100vw / 66.7). This way, the font-size will change depending on the screen. Other templates and logic are written normally. For other styles, rem is used as the size unit. In this design, lrem = 10px.

[0083] Through the above process, a responsive page is formed. At the same time, other responsive layout methods such as percentage layout and elastic layout can also be used.

[0084] It will be apparent to those skilled in the art that the present invention is not limited to the details of the exemplary embodiments described above and that the invention can be embodied in other specific forms without departing from the spirit or essential characteristics of the invention. Therefore, the embodiments should be considered in all respects as illustrative and non-restrictive, and the scope of the invention is defined by the appended claims, not the foregoing description, and all variations within the meaning and range of equivalents of the claims are intended to be included therein. Any reference sign in a claim should not be construed as limiting the claim to which it relates.

[0085] In addition, it should be understood that although this specification is described in terms of implementation methods, not every implementation method contains only one independent technical solution. This narrative method of the specification is only for the sake of clarity. Those skilled in the art should regard the specification as a whole. The technical solutions in each embodiment can also be appropriately combined to form other implementation methods that can be understood by those skilled in the art.

Claims

1. A webpage adaptation method compatible with multiple screens, characterized by: The steps include: S1: Add meta subtag to the Head tag of the public template; S2: In the public logic, add a listener for the window's resize event and set the maximum font size of the browser window document; S3: In the common style, set the body font-size responsively; S4: Other templates, write normally; S5: Other logic, write normally; S6: Other styles are written in rem as the size unit; In said S2, a distance model of the browser window document is constructed for adaptively adjusting the module layout of the browser window document; In the distance model, each element in the browser window document is divided into a rectangular area, and a quadruple is defined for each node with the upper left corner of the rectangle as the base point. ,in, Represents the component of the element on the horizontal coordinate in the plane rectangular coordinate system, Represents the component of the element on the ordinate in the plane rectangular coordinate system, Indicates the width of the element in pixels, Indicates the height of the element in pixels; for 、 Two elements, there are: in: in, 、 They are 、 The rectangular area corresponding to the two elements, is the distance in the horizontal direction of the element, is the difference between the left horizontal coordinate components of the two elements, is the difference between the right side abscissa components of the two elements; is the distance in the vertical direction of the element, is the difference between the ordinate components below the two elements, is the difference between the upper ordinate components of the two elements; In the distance model, when 、 When the projections of two elements on the rectangular coordinate axis have one rectangular edge overlapping or the projection of one rectangle completely covers the projection of another rectangle, the distance between the two elements on the corresponding coordinate axis is considered to be 0; when the projections of two elements on the rectangular coordinate axis do not overlap or cover, the minimum value between the edge where the vertices of the two elements are located and the projection of the other edge on the coordinate axis is selected as the distance value between the two elements; based on the element distance model, the DBSCAN algorithm is used to cluster and divide the element rectangles in the browser window document to optimize the layout of the browser window document.

2. The webpage adaptation method compatible with multiple screens according to claim 1, characterized in that: The S1 is used to be compatible with the display effects of various devices.

3. The webpage adaptation method compatible with multiple screens according to claim 2, characterized in that: In S2, when the screen size is larger than the vertical screen size, the fontSize is fixed.

4. The method for webpage adaptation compatible with multiple screens according to claim 3, characterized in that: In S2, the fontSize of each device has a minimum value by default.

5. The method for webpage adaptation compatible with multiple screens according to claim 4, characterized in that: In the distance model, a plane rectangular coordinate system is established with the upper left corner of the browser window document as the origin, and the position coordinates of each element in the browser window document on the page are obtained through the plane rectangular coordinate system.

6. The webpage adaptation method compatible with multiple screens according to claim 5, characterized in that: In the distance model, 、 The visual distance between two elements is obtained by adding the distance in the horizontal and vertical directions of the corresponding elements: in, The visual distance between two elements.

7. The webpage adaptation method compatible with multiple screens according to claim 1, characterized in that: In the S3, responsive settings are performed for the mobile phone side and the PC side, respectively, in horizontal and vertical screens.

Images