WO2021068331A1

WO2021068331A1 - Web page adaptive layout method, server and computer-readable storage medium

Info

Publication number: WO2021068331A1
Application number: PCT/CN2019/117347
Authority: WO
Inventors: 刘志凯; 孔祥成; 姜凯英
Original assignee: 平安科技（深圳）有限公司
Priority date: 2019-10-11
Filing date: 2019-11-12
Publication date: 2021-04-15
Also published as: CN110837617A; CN110837617B

Abstract

A web page adaptive layout method. Said method comprises: setting rem as a unit of attributes. i.e. width, height, margin, padding, left top of an element in a CSS (S301); when a web page is opened, adjusting a font-size value of an HTML element according to the size of the screen, so that an attribute value of an element in a body is synchronously adjusted according to the font-size value (S302); calculating an aspect ratio of a design file and an aspect ratio of a terminal screen, and comparing the aspect ratio of the design file and the aspect ratio of the terminal screen, so as to obtain a comparison result (S303); optimizing the attribute value of the element in the body according to the comparison result, so as to obtain an optimized attribute value of the element in the body (S304); and generating an optimized page according to the optimized attribute value of the element in the body (S305). In this way, by means of the described method, the size of a design file can be directly converted into the size of a code, and all the elements of a page can be automatically adjusted to an appropriate size merely by taking the width or height of a terminal as a determination reference, so that the layout of all the content on the page is the same as the layout of the design file, and the ratio of the design file is completely restored.

Description

Webpage adaptive layout method, server and computer readable storage medium

This application claims the priority of a Chinese patent application filed with the Chinese Patent Office on October 11, 2019, the application number is 201910975459.6, and the invention title is "A webpage adaptive layout method, server and computer-readable storage medium", all of which The content is incorporated in the application by reference.

Technical field

This application relates to the field of web front-end development, and in particular to a web page adaptive layout method, server and computer-readable storage medium.

Background technique

At present, workers in the field of web front-end development, when encountering web page adaptive layout problems, mainly use content area fixed-width layout and media query, JavaScript dynamic calculation of width and height, percentage layout, flow layout, etc., although these The solution optimizes the layout of the page to a certain extent and optimizes the visual presentation effect, but it still cannot fully restore the size ratio of the design draft, or needs to fine-tune the layout, or needs to hide some elements on a smaller screen. For example, for a fluid layout scheme, the width is defined by a percentage when the page is laid out, and the height is mostly fixed with pixels (pixel, px), so the display effect under some screens will become that the width of some page elements is stretched Very long, but the height is still the same as before. The actual display is very inconsistent, and the layout is even chaotic. The effect presented under the screen of only a few sizes is usually satisfactory, whether it is a visual designer or a web user. , Are unable to accept this kind of presentation effect.

Summary of the invention

In view of this, this application proposes a web page adaptive layout method and server, which can be directly converted into code size according to the size of the design draft without considering the specific size value of the design draft. It is only necessary to set the current page to be based on the terminal width or based on the The height of the terminal is used as the criterion for judging, so that all elements of the page can be automatically adjusted to the appropriate size. At the same time, the layout of all content on the page can be maintained the same as the layout of the design draft. The proportion of the design draft is completely restored, and it can be adapted to all computers ( personal computer, PC) screen size.

First of all, in order to achieve the above purpose, this application proposes a web page adaptive layout method, which is applied to a server, and the method includes:

Set rem as the unit of the element width, height, margin, padding, left top attribute in Cascading Stylesheet (CSS);

When the web page is opened, adjust the font-size value of the HyperText Markup Language (HTML) element according to the screen size, so that the attribute value of the element in the body is adjusted synchronously with the font-size value;

Calculate the aspect ratio of the design draft and the terminal screen aspect ratio, and compare the design draft aspect ratio and the terminal screen aspect ratio to obtain the comparison result;

Optimize the attribute value of the element in the body according to the comparison result, and obtain the optimized attribute value of the element in the body;

An optimized page is generated according to the optimized attribute values of the elements in the body.

In addition, in order to achieve the above object, the present application also provides a server, the server including a memory, a processor, and a web page adaptive layout system stored on the memory and running on the processor, the web page automatically When the adaptive layout system is executed by the processor, the steps of the above-mentioned web page adaptive layout method are realized.

Thirdly, in order to achieve the above object, this application also provides a computer non-volatile readable storage medium, the computer non-volatile readable storage medium stores a web page adaptive layout system, and the web page adaptive layout system can Is executed by at least one processor, so that the at least one processor executes the steps of the above-mentioned web page adaptive layout method.

Compared with the prior art, the server, web page adaptive layout method, and computer non-volatile readable storage medium proposed in this application. First, set rem to the unit of the element width, height, margin, padding, left top attribute in CSS; second, when the web page is opened, adjust the font-size value of the HTML element according to the screen size to make the attribute value of the element in the body Synchronously adjust with the font-size value; again, calculate the aspect ratio of the design draft and the terminal screen aspect ratio, and compare the design draft aspect ratio with the terminal screen aspect ratio to obtain the comparison result; further, optimize the elements in the body according to the comparison result To obtain the optimized attribute value of the element in the body; finally, an optimized page is generated according to the optimized attribute value of the element in the body. In this way, the above solution can be directly converted into the code size according to the size of the design draft, without considering the specific size value of the design draft, only need to set the current page to be based on the terminal width or terminal height as the judgment criterion, and the page size can be changed. All elements are automatically adjusted to the appropriate size, and the layout of all content on the page can be maintained the same as the layout of the design draft, which completely restores the proportions of the design draft and adapts to all PC screen sizes.

Description of the drawings

FIG. 1 is a schematic diagram of an optional application environment of each embodiment of the present application;

FIG. 2 is a schematic diagram of an optional hardware architecture of the server in FIG. 1;

FIG. 3 is a schematic diagram of program modules of the first embodiment of the webpage adaptive layout system according to the present application;

4 is a schematic diagram of program modules of a second embodiment of the web page adaptive layout system according to the present application;

FIG. 5 is a schematic flowchart of a first embodiment of a webpage adaptive layout method according to this application;

FIG. 6 is a schematic flowchart of a second embodiment of a webpage adaptive layout method according to this application;

Reference signs:

移动终端 Mobile terminal	11
服务器 server	22
网络The internet	33
存储器Memory	1111
处理器processor	1212
网络接口Network Interface	1313
网页自适应布局系统Web page adaptive layout system	200200
设置模块Setting up the module	201201
调整模块Adjustment module	202202
计算模块Calculation module	203203
优化模块Optimization module	204204
生成模块Generate module	205205
切换模块Switch module	206206
缩放模块Scaling module	207207

The realization, functional characteristics, and advantages of the purpose of this application will be further described in conjunction with the embodiments and with reference to the accompanying drawings.

Detailed ways

In order to make the purpose, technical solutions, and advantages of this application clearer, the following further describes this application in detail with reference to the accompanying drawings and embodiments. It should be understood that the specific embodiments described here are only used to explain the present application, and are not used to limit the present application. Based on the embodiments in this application, all other embodiments obtained by a person of ordinary skill in the art without creative work shall fall within the protection scope of this application.

It should be noted that the descriptions related to "first", "second", etc. in this application are only for descriptive purposes, and cannot be understood as indicating or implying their relative importance or implicitly indicating the number of indicated technical features . Therefore, the features defined with "first" and "second" may explicitly or implicitly include at least one of the features. In addition, the technical solutions between the various embodiments can be combined with each other, but it must be based on what can be achieved by a person of ordinary skill in the art. 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. , Is not within the scope of protection required by this application.

Refer to FIG. 1, which is a schematic diagram of an optional application environment of each embodiment of the present application.

In this embodiment, the application can be applied to an application environment including, but not limited to, the mobile terminal 1, the server 2, and the network 3. Wherein, the mobile terminal 1 may be a mobile phone, smart phone, notebook computer, digital broadcast receiver, PDA (personal digital assistant), PAD (tablet computer), PMP (portable multimedia player), navigation device, etc. Equipment, and fixed terminals such as digital TVs, desktop computers, notebooks, servers, etc. The server 2 may be a computing device such as a rack server, a blade server, a tower server, or a cabinet server. The server 2 may be an independent server or a server cluster composed of multiple servers. The network 3 may be an intranet, the Internet, a global system of mobile communication (GSM), a wideband code division multiple access (WCDMA), a 4G network, 5G network, Bluetooth (Bluetooth), Wi-Fi and other wireless or wired networks.

Wherein, the server 2 is in communication connection with one or more of the mobile terminals 1 through the network 3 to perform data transmission and interaction.

In this embodiment, when the web page adaptive layout system 200 is installed and running in the server 2, when the web page adaptive layout system 200 is running, the server 2 pre-stores the benchmark script library, interface specifications, and computer Data specification; when the tested software code is received, scan the tested software code to generate an interface function list; then match the interface function list and the benchmark test script library to generate existing interface function test scripts and new interface functions; and Generate a parameter assignment rule for the new interface function according to the interface specification and the computer data specification; then generate a new interface function test script according to the new interface function and the parameter assignment rule; finally test according to the new interface function The script and the existing interface function test script generate a test script of the tested software code. In this way, the automatic creation of test scripts is realized through software tools, which saves testers from duplication of work, improves test efficiency, and avoids manual errors; the style of standardized test scripts is also unified, and people who do not understand the code can also complete the later stages. Regression testing reduces the labor and time costs of software testing.

Refer to FIG. 2, which is a schematic diagram of an optional hardware architecture of the server 2 in FIG. 1. In this embodiment, the server 2 may include, but is not limited to, a memory 11, a processor 12, and a network interface 13 that can communicate with each other through a system bus. It should be pointed out that FIG. 2 only shows the mobile terminal 1 with the components 11-13, but it should be understood that it is not required to implement all the components shown, and more or fewer components may be implemented instead.

Wherein, the memory 11 includes at least one type of readable storage medium, the readable storage medium includes flash memory, hard disk, multimedia card, card-type memory (for example, SD or DX memory, etc.), random access memory (RAM) , Static random access memory (SRAM), read only memory (ROM), electrically erasable programmable read only memory (EEPROM), programmable read only memory (PROM), magnetic memory, magnetic disks, optical disks, etc. In some embodiments, the storage 11 may be an internal storage unit of the server 2, for example, a hard disk or a memory of the server 2. In other embodiments, the memory 11 may also be an external storage device of the server 2, for example, a plug-in hard disk equipped on the server 2, a smart media card (SMC), and a secure digital (Secure Digital). Digital, SD) card, flash card (Flash Card), etc. Of course, the memory 11 may also include both the internal storage unit of the server 2 and its external storage device. In this embodiment, the memory 11 is generally used to store the operating system and various application software installed on the server 2, for example, the program code of the web page adaptive layout system 200 and so on. In addition, the memory 11 can also be used to temporarily store various types of data that have been output or will be output.

In some embodiments, the processor 12 may be a central processing unit (Central Processing Unit, CPU), a controller, a microcontroller, a microprocessor, or other data processing chips. The processor 12 is generally used to control the overall operation of the server 2, for example, to perform data interaction or communication-related control and processing with the mobile terminal 1. In this embodiment, the processor 12 is used to run the program code or processing data stored in the memory 11, for example, to run the web page adaptive layout system 200.

The network interface 13 may include a wireless network interface or a wired network interface, and the network interface 13 is usually used to establish a communication connection between the server 2 and other electronic devices. In this embodiment, the network interface 13 is mainly used to connect the server 2 to the one or more mobile terminals 1 through the network 3, and the server 2 is connected to the one or more mobile terminals 1 through the network 3. Establish data transmission channels and communication connections between.

So far, the application environment of each embodiment of the present application and the hardware structure and functions of related devices have been introduced in detail. Hereinafter, various embodiments of the present application will be proposed based on the above-mentioned application environment and related equipment.

First, this application proposes a web page adaptive layout system 200.

Refer to FIG. 3, which is a program module diagram of the first embodiment of the web page adaptive layout system 200 of the present application.

In this embodiment, the web page adaptive layout system 200 includes a series of computer program instructions stored on the memory 11. When the computer program instructions are executed by the processor 12, the automatic creation test of each embodiment of the application can be realized. Script operation. In some embodiments, the web page adaptive layout system 200 may be divided into one or more modules based on specific operations implemented by various parts of the computer program instructions. For example, in FIG. 3, the web page adaptive layout system 200 may be divided into a setting module 201, an adjustment module 202, a calculation module 203, an optimization module 204, and a generation module 205. among them:

The setting module 201 is used to set rem as the unit of the element width, height, margin, padding, and left top attribute in CSS.

Specifically, the current industry mainly adopts content area fixed-width layout + media query, JavaScript dynamic calculation of width and height, percentage layout, streaming layout and other solutions to adaptively adjust web pages. These solutions cannot completely restore the size of the design draft. proportion. rem is a unit attribute of css3, rem can make the attribute value of the element in the body change according to the font size of the root element in the HTML of the page, and the font size of the root element in the screen can be defined to realize the adaptive layout of web pages under different terminal screens. Therefore, rem is used as the unit of the element width, height, margin, padding, and left top attributes in css.

The adjustment mode 202 is used to adjust the font-size value of the HTML element according to the screen size when the webpage is opened, so that the attribute value of the element in the body is adjusted synchronously with the font-size value.

Specifically, in order to realize the linkage of the attribute value of the element in the body with the HTML root element, it is also necessary to define the font-size value of the HTML element, and in order to realize the size of the web page adaptive to the size of the terminal screen, the font-size value in the HTML is required The size changes with the screen size. Therefore, the font-size value of the HTML element is dynamically adjusted according to the screen size, thereby adjusting the objects and their attributes and values of all DOM elements, so that the attribute values of the elements in the body are adjusted synchronously with the font-size value.

The calculation module 203 is used to calculate the aspect ratio of the design draft and the terminal screen aspect ratio, and compare the design draft aspect ratio and the terminal screen aspect ratio to obtain a comparison result.

Specifically, different design drafts have different widths and heights, so there are different aspect ratios. The terminal screens that present the design drafts also have different aspect ratios due to the use scene and user preferences, such as those used in the early days. There are more square screens and the more popular 16:9 screens, and there are size differences and pixel differences. The design draft is presented on the terminal screen in a pixel-level manner. The size difference and pixel difference make it difficult for the same terminal screen to present different design drafts, and the same design draft is difficult to present on different terminal screens. Therefore, considering the inconsistency between the actual screen size ratio and the design draft's width-to-height ratio, it is often necessary to further optimize the presentation size of the design draft based on the presentation parameters of the initial design draft. The first step of the optimization work is Obtain the design draft aspect ratio and the terminal screen aspect ratio. In this embodiment, the web browser acquires the design draft width and design draft height of the design draft, and then divides the design draft width by the design draft height to obtain the design Draft aspect ratio; further, the server also obtains the screen width and screen height of the terminal screen, and then divides the screen width by the screen height to obtain the terminal screen aspect ratio; finally compares the design draft aspect ratio And the aspect ratio of the terminal screen.

The optimization module 204 is configured to compare the aspect ratio of the design draft with the aspect ratio of the terminal screen to obtain a comparison result, optimize the attribute value of the body element according to the comparison result, and obtain the optimized attribute value of the element in the body.

Specifically, it can be seen from the above that the size of a webpage is related to the screen, and the types of screens are difficult to count. Many design drafts can only take into account the resolution of mainstream users, and other resolutions are solved by adaptation. Through rem, the adaptive layout of web pages presented on different terminal screens can be realized. This is a general processing method, especially in font adjustment. However, this adaptive layout method still cannot fully restore the design draft ratio in some cases. , There are cases where the design draft is stretched or deformed or cannot be fully presented. By comparing the aspect ratio of the design draft and the terminal screen aspect ratio, the size of the design draft aspect ratio and the terminal screen aspect ratio can be obtained.

In an embodiment, the setting module 201 is further configured to set the minimum width of the design draft when the screen aspect ratio is smaller than the design draft aspect ratio.

Specifically, the minimum width is calculated according to the screen height and the design draft height, and then the minimum width is set on the HTML element, and a horizontal scroll bar is set. HTML is the root element. Setting the minimum width in HTML can simultaneously affect the presentation size of other elements, and finally present an optimized and adjusted design draft, which can better restore the design draft. The screen aspect ratio is smaller than the design draft aspect ratio. For example, the Founder display screen, that is, in the case of the same pixel-level height, the screen pixel-level width is smaller than the design draft's pixel-level width. At this time, in order to be able to fully restore Design draft, the pixel-level height of the design draft is consistent with the pixel-level height of the screen, or the pixel-level height of the design draft is consistent with the pixel-level height of the remaining screen after subtracting the pixel-level height of the browser head and bottom, and then according to the The design draft aspect ratio is used to obtain the pixel-level width of the design draft, and the pixel-level width of the design draft is set to the minimum width, which is set on the HTML element, and since the pixel-level width of the screen is smaller than the pixels of the design draft Level width, the screen cannot fully display the width of the design draft, and a horizontal scroll bar needs to be set. For example, suppose the pixel-level width of the screen is 1366px and the height is 768px, the pixel-level width of the design draft is 1620px, and the height is 768px. Set the minimum width of the HTML element to 1620px and set the horizontal scroll bar. Proportionally restore the design draft.

The setting module 201 is also used for scaling the design draft and other elements of the webpage when the screen aspect ratio is greater than the design draft aspect ratio.

Specifically, the screen height is multiplied by the design draft aspect ratio to obtain the actual displayed design draft width, the actual displayed design draft width is assigned to the body element, and a new HTML element font-size is calculated and set Value, and finally center the body element horizontally, and fill the blank spaces on both sides of the page with the background color.

In detail, in this case, when the screen aspect ratio is greater than the design draft aspect ratio, that is, when the screen is too flat, the pixel-level screen height is multiplied by the design draft aspect ratio to obtain the pixel Design draft presentation width, and assign the pixel-level design draft presentation width to the body element, and calculate the new font-size value = current value * (design draft aspect ratio/screen aspect ratio), and adjust the HTML element The font-size value means that all elements will be reduced by a certain proportion on the original basis. For example, assuming that the pixel-level width of the screen is 1366px and the height is 768px, the pixel-level width of the design draft is 945px and the height is 768px, and the rendering width of the pixel-level design draft is = the pixel-level screen height multiplied by the Design draft aspect ratio=768px*945px/768px=945px, assign 945px to the body element. For another example, for the font-size value, assuming the current value is 24px, then the font-size value=current value*(design draft aspect ratio/screen aspect ratio)=24px*((945px/768px)/(1366px/768px) ))=24px*945px/1366px=17px, assign this value to the font-size value, that is, realize the adjustment of all other elements.

In this embodiment, while assigning values to the body element, the body element is horizontally centered, and the extra white space on both sides is filled with the background color. In the previous example, the pixel-level width of the screen is 1366px, the pixel-level width of the design draft is 945px, and the pixel-level width of the design draft is less than 421px of the screen pixel-level width. At this time, for the beauty of the web page, we Center the design draft horizontally, and use the background color to fill the extra 421px blank space of the design draft.

The generating module 205 is configured to generate an optimized page according to the optimized attribute values of the elements in the body.

Specifically, the web browser obtains the necessary parameters for optimizing the web page, that is, the optimized attribute values of the elements in the body, and after adjusting these optimized attribute values, the optimized page can be generated. Compared with the conventional idea, this solution does not need to consider the specific size value of the design draft. It only needs to set the current page to be based on the terminal width or terminal height as the judgment criterion, so that all elements of the page can be automatically adjusted to the appropriate size. At the same time, the layout of all content on the page can be maintained the same as the layout of the design draft, which has better versatility.

Through the above-mentioned program modules 201-205, the web page adaptive layout system 200 proposed in this application. First, set rem to the unit of the element width, height, margin, padding, left top attribute in CSS; second, when the web page is opened, adjust the font-size value of the HTML element according to the screen size, so that the attribute value of the element in the body varies with The font-size value is adjusted synchronously; again, calculate the aspect ratio of the design draft and the terminal screen aspect ratio, and compare the design draft aspect ratio with the terminal screen aspect ratio to obtain the comparison result; optimize the attribute value of the element in the body according to the comparison result, The optimized attribute value of the element in the body is obtained; finally, an optimized page is generated according to the optimized attribute value of the element in the body. In this way, the above solution can be directly converted into the code size according to the size of the design draft, without considering the specific size value of the design draft, only need to set the current page to be based on the terminal width or terminal height as the judgment criterion, and the page size can be changed. All elements are automatically adjusted to the appropriate size, and the layout of all content on the page can be maintained the same as the layout of the design draft, which completely restores the proportions of the design draft and adapts to all PC screen sizes.

Again, based on the above-mentioned first embodiment of the webpage adaptive layout system 200 of the present application, a second embodiment of the present application is proposed (as shown in FIG. 4). In this embodiment, the web page adaptive layout system 200 further includes a switching module 206 and a zooming module 207, where:

The switching module 206 is configured to switch the page mode of the web page according to the instruction.

Specifically, different users have different browsing habits, and web pages supporting different presentation modes can further satisfy a wider range of users' reading habits and improve user experience. In this case, the web page switches the page mode of the web page according to the instruction, and the initial page and the optimized page can be switched. By default, the web page automatically renders the optimized page. When the instruction to render the initial page is received, the page switches to all The initial page; when an instruction to render an optimized page is received, the page is switched to the optimized page.

The switching module 206 is also used to switch the scene mode of the web page according to the instruction.

Specifically, in some special application scenarios, for example, the elderly, as a special group of Internet users, often have certain visual impairments when browsing ordinary web pages. In this case, the web page can also switch the page mode of the web page according to the instruction. When an instruction to render the initial page is received, the page is switched to the initial page; when an instruction to render the optimized page is received, the page is switched to the Optimize the page. For example, the page provides the function of switching to the elderly mode, and the display scale of the page can be adjusted according to user needs. For example, if a coefficient greater than 1 is multiplied in the adaptation calculation formula, the page content will be enlarged accordingly. For example, when the elderly browses this page, the default displayed page may have fonts or pictures that are too small for the elderly to see clearly. At this time, the elderly can choose the elderly mode of the page, or use specific gestures on the page. The browsing needs to adjust the zoom size of the page.

The zoom module 207 is used to zoom the page or the specified content in the page according to the instruction.

Specifically, in some specific application scenarios, merchants or users do not want part of the content or pages to be zoomed. At this time, the unit of the content or page is changed from rem to other types of units, so as to realize any specified page or content. Does not participate in layout scaling. For a website with multiple pages, each page performs adaptation calculation based on the design draft of the current page, that is, each page calculates its content or whether the page participates in layout scaling, without considering the design difference between itself and other pages. When a zoom instruction for the webpage is received, all content of the webpage is zoomed; when a zoom instruction for the specified content of the webpage is received, the specified content of the webpage is zoomed. For example, a webpage has 10 pages, and 2 of them need to be scaled according to a specific ratio. At this time, only the rendering ratio of these two pages needs to be adjusted; for example, part of the content of a page needs to be scaled. Specify a specific size. At this time, you only need to specify the display ratio of this part of the content.

Through the above program modules 206-207, the web page adaptive layout system 100 proposed in this application can switch the page mode of the web page according to the instruction, switch the scene mode of the web page according to the instruction, and can also zoom the page or the specified content in the page according to the instruction , Make the page presentation mode of the webpage selectable, the scene mode of the webpage is richer, have better presentation effect and user experience, and it is a more humane design solution.

In addition, this application also proposes a web page adaptive layout method.

Refer to FIG. 5, which is a schematic flowchart of a first embodiment of a web page adaptive layout method according to the present application. In this embodiment, according to different requirements, the execution order of the steps in the flowchart shown in FIG. 5 can be changed, and some steps can be omitted.

In step S301, rem is set as the unit of the element width, height, margin, padding, and left top attribute in the CSS.

In step S302, when the webpage is opened, the font-size value of the HTML element is adjusted according to the screen size, so that the attribute value of the element in the body is adjusted synchronously with the font-size value.

Step S303: Calculate the aspect ratio of the design draft and the terminal screen aspect ratio, and compare the design draft aspect ratio and the terminal screen aspect ratio to obtain a comparison result.

Specifically, different design drafts have different widths and heights, so there are different aspect ratios. The terminal screens that present the design drafts also have different aspect ratios due to the use scene and user preferences, such as those used in the early days. There are more square screens and the more popular 16:9 screens, and there are size differences and pixel differences. The design draft is presented on the terminal screen in a pixel-level manner. The size difference and pixel difference make it difficult for the same terminal screen to present different design drafts, and the same design draft is difficult to present on different terminal screens. Therefore, considering the inconsistency between the actual screen size ratio and the design draft's width-to-height ratio, it is often necessary to further optimize the presentation size of the design draft based on the presentation parameters of the initial design draft. The first step of the optimization work is Obtaining the design draft aspect ratio and the terminal screen aspect ratio, the specific steps include: acquiring the design draft width and design draft height of the design draft, and then dividing the design draft width by the design draft height to obtain the design draft aspect ratio; Obtain the screen width and screen height of the terminal screen, and then divide the screen width by the screen height to obtain the terminal screen aspect ratio; finally, compare the design draft aspect ratio with the terminal screen aspect ratio.

Step S304, comparing the design draft aspect ratio and the terminal screen aspect ratio to obtain a comparison result, and optimizing the attribute value of the body element according to the comparison result to obtain the optimized attribute value of the element in the body.

In other embodiments of the present application, when the aspect ratio of the screen is smaller than the aspect ratio of the design draft, the minimum width of the design draft is set.

When the screen aspect ratio is greater than the design draft aspect ratio, the design draft and other elements of the webpage are zoomed.

In detail, in this case, when the screen aspect ratio is greater than the design draft aspect ratio, that is, when the screen is too flat, the pixel-level screen height is multiplied by the design draft aspect ratio to obtain the pixel Design draft presentation width, and assign the pixel-level design draft presentation width to the body element, and calculate the new font-size value = current value * (design draft aspect ratio/screen aspect ratio), and adjust the HTML element The font-size value means that all elements will be reduced by a certain proportion on the original basis. For example, assuming that the pixel-level width of the screen is 1366px and the height is 768px, the pixel-level width of the design draft is 945px and the height is 768px, and the presentation width of the pixel-level design draft is = the pixel-level screen height multiplied by the Design draft aspect ratio=768px*945px/768px=945px, assign 945px to the body element. For another example, for the font-size value, assuming the current value is 24px, then the font-size value=current value*(design draft aspect ratio/screen aspect ratio)=24px*((945px/768px)/(1366px/768px) ))=24px*945px/1366px=17px, assign this value to the font-size value, that is, realize the adjustment of all other elements.

In addition, when assigning values to the body element, the body element is centered horizontally, and the extra white space on both sides is filled with the background color. In the previous example, the pixel-level width of the screen is 1366px, the pixel-level width of the design draft is 945px, and the pixel-level width of the design draft is less than 421px of the screen pixel-level width. At this time, for the beauty of the web page, we Center the design draft horizontally, and use the background color to fill the extra 421px blank space of the design draft.

In step S305, an optimized page is generated according to the optimized attribute value of the element in the body.

Specifically, the foregoing steps obtain the necessary parameters of the optimized webpage, that is, the optimized attribute values of the elements in the body, and after adjusting these optimized attribute values, the optimized page can be generated. Compared with the conventional idea, this solution does not need to consider the specific size value of the design draft. It only needs to set the current page to be based on the terminal width or terminal height as the judgment criterion, so that all elements of the page can be automatically adjusted to the appropriate size. At the same time, the layout of all content on the page can be maintained the same as the layout of the design draft, which has better versatility.

Through the above steps S301-305, the web page adaptive layout method proposed in this application. First, set rem to the unit of the element width, height, margin, padding, left top attribute in CSS; when the web page is opened, adjust the font-size value of the HTML element according to the screen size, so that the attribute value of the element in the body follows the font- The size value is adjusted synchronously; then the design draft aspect ratio and the terminal screen aspect ratio are calculated; again, the comparison result is obtained by comparing the design draft aspect ratio and the terminal screen aspect ratio, and the attribute value of the body element is optimized according to the comparison result to obtain the element's Optimize the attribute value; finally, generate an optimized page according to the presentation parameters of the optimized design draft. In this way, the above solution can be directly converted into the code size according to the size of the design draft, without considering the specific size value of the design draft, only need to set the current page to be based on the terminal width or terminal height as the judgment criterion, and the page size can be changed. All elements are automatically adjusted to the appropriate size, and the layout of all content on the page can be maintained the same as the layout of the design draft, which completely restores the proportions of the design draft and adapts to all PC screen sizes.

Thirdly, based on the above-mentioned first embodiment of the webpage adaptive layout method of the present application, a second embodiment of the webpage adaptive layout method of the present application is proposed.

As shown in FIG. 6, it is a schematic flowchart of a second embodiment of a web page adaptive layout method according to the present application. In this embodiment, the steps of the webpage adaptive layout method include:

Step S401: Switch the page mode of the web page according to the instruction.

Specifically, different users have different browsing habits, and web pages supporting different presentation modes can further satisfy a wider range of users' reading habits and improve user experience. In this case, the web page switches the page mode of the web page according to the instruction, and the initial page and the optimized page can be switched. By default, in order to improve the user's visual experience, the web page automatically presents the optimized page.

Step S402: When an instruction to present the initial page is received, the page is switched to the initial page.

Specifically, when an instruction to present the initial page is received, it is first determined whether the current page is on the optimized page, if so, the page is switched to the initial page, and if not, the current page is maintained.

Step S403: When an instruction to present an optimized page is received, the page is switched to the optimized page.

Specifically, when an instruction to present the initial page is received, it is first determined whether the current page is on the optimized page, if so, the current page is maintained, and if not, the page is switched to the optimized page.

In other embodiments of the present application, the web page adaptive layout method can also switch the scene mode of the web page according to the instruction.

In other embodiments of the present application, the web page adaptive layout method can also zoom the page or the specified content in the page according to the instruction.

Specifically, in some specific application scenarios, merchants or users do not want part of the content or pages to be zoomed. At this time, the unit of the content or page is changed from rem to other types of units, so as to realize any specified page or content. Does not participate in layout scaling. For a website with multiple pages, each page is calculated based on the design draft of the current page, that is, each page calculates its content or whether the page participates in layout scaling, without considering the design differences between itself and other pages. When a zoom instruction for the webpage is received, all content of the webpage is zoomed; when a zoom instruction for the specified content of the webpage is received, the specified content of the webpage is zoomed. For example, a webpage has 10 pages, and 2 of them need to be scaled according to a specific ratio. At this time, only the rendering ratio of these two pages needs to be adjusted; another example is that part of the content of a page needs to be scaled. Specify a specific size. At this time, you only need to specify the display ratio of this part of the content.

Through the above steps S401-S403, the web page adaptive layout method proposed in this application can switch the page mode of the web page according to the instruction, so that the page presentation mode of the web page is selectable, and has a better presentation effect and user experience. More user-friendly design scheme.

The serial numbers of the foregoing embodiments of the present application are only for description, and do not represent the superiority of the embodiments.

Through the description of the above implementation manners, those skilled in the art can clearly understand that the above-mentioned embodiment method can be implemented by means of software plus the necessary general hardware platform, of course, it can also be implemented by hardware, but in many cases the former is better.的实施方式。 Based on this understanding, the technical solution of this application essentially or the part that contributes to the existing technology can be embodied in the form of a software product, and the computer software product is stored in a storage medium (such as ROM/RAM, magnetic disk, The optical disc) includes several instructions to enable a terminal device (which can be a mobile phone, a computer, a server, an air conditioner, or a network device, etc.) to execute the method described in each embodiment of the present application.

The above are only the preferred embodiments of the application, and do not limit the scope of the patent for this application. Any equivalent structure or equivalent process transformation made using the content of the description and drawings of the application, or directly or indirectly applied to other related technical fields , The same reason is included in the scope of patent protection of this application.

Claims

A web page adaptive layout method, characterized in that the method includes:

Set rem to the unit of the element width, height, margin, padding, and left top attribute in CSS;

When the web page is opened, adjust the font-size value of the HTML element according to the terminal screen size, so that the attribute value of the element in the body is adjusted synchronously with the font-size value;

Calculate the aspect ratio of the design draft and the terminal screen aspect ratio, and compare the design draft aspect ratio and the terminal screen aspect ratio to obtain the comparison result;

Optimize the attribute value of the element in the body according to the comparison result, and obtain the optimized attribute value of the element in the body;

An optimized page is generated according to the optimized attribute values of the elements in the body.
The webpage adaptive layout method according to claim 1, wherein the step of calculating the aspect ratio of the design draft and the terminal screen aspect ratio, and comparing the design draft aspect ratio and the terminal screen aspect ratio to obtain the comparison result, specifically includes the following step:

Obtain the design draft width and design draft height of the design draft, and obtain the design draft aspect ratio according to the design draft width divided by the design draft height;

Obtaining the screen width and screen height of the terminal screen, and dividing the screen width by the screen height to obtain the terminal screen aspect ratio;

The aspect ratio of the design draft is compared with the aspect ratio of the terminal screen to obtain a comparison result.
The web page adaptive layout method of claim 2, wherein the attribute value of the body element is optimized according to the comparison result to obtain the optimized subordinate of the element in the body

The steps of property value include the following steps:

When the screen aspect ratio is smaller than the design draft aspect ratio, set the minimum width of the design draft;

When the screen aspect ratio is greater than the design draft aspect ratio, the design draft and other elements of the webpage are zoomed.
8. The web page adaptive layout method of claim 3, wherein the step of setting the minimum width of the design draft when the screen aspect ratio is smaller than the design draft's aspect ratio includes the following steps:

Calculate the minimum width according to the height of the screen and the height of the design draft;

Setting the minimum width on the HTML element;

Set the horizontal scroll bar.
3. The web page adaptive layout method of claim 3, wherein when the screen aspect ratio is greater than the design draft aspect ratio, the step of scaling the design draft and other elements of the web page specifically includes the following steps:

Multiply the screen height by the width-to-height ratio of the design draft to obtain the actual displayed width of the design draft;

Assign the actual displayed width of the design draft to the body element through the DOM tree;

Calculate and set the font-size value of the new HTML element;

Center the body element horizontally, and fill the blank spaces on both sides of the page with the background color.
5. The web page adaptive layout method according to any one of claims 1-5, wherein the method further comprises:

Switch the page mode of the web page according to the instruction;

When an instruction to present the initial page is received, the page is switched to the initial page;

When an instruction to present an optimized page is received, the page is switched to the optimized page.
5. The web page adaptive layout method according to any one of claims 1-5, wherein the method further comprises:

Switch the scene mode of the web page according to the instruction;

When receiving an instruction to enter a special scene, the page switches to the special scene mode;

When an instruction to enter the normal scene is received, the page switches to the normal scene mode.
5. The web page adaptive layout method according to any one of claims 1-5, wherein the method further comprises:

Zoom the page or the specified content in the page according to the instruction;

When receiving the zoom instruction for the webpage, zoom all the content of the webpage;

When a zoom instruction for the specified content of the webpage is received, the specified content of the webpage is zoomed.
The web page adaptive layout method of claim 1, wherein the adjusted font-size value=current font-size value*(design draft aspect ratio/screen aspect ratio).
A server, characterized in that the server includes a memory and a processor, the memory stores a web page adaptive layout system that can run on the processor, and the web page adaptive layout system is controlled by the processor. When executed, the steps of the web page adaptive layout method described below are implemented:

Set rem to the unit of the element width, height, margin, padding, and left top attribute in CSS;

When the web page is opened, adjust the font-size value of the HTML element according to the terminal screen size, so that the attribute value of the element in the body is adjusted synchronously with the font-size value;

Calculate the aspect ratio of the design draft and the terminal screen aspect ratio, and compare the design draft aspect ratio and the terminal screen aspect ratio to obtain the comparison result;

Optimize the attribute value of the element in the body according to the comparison result, and obtain the optimized attribute value of the element in the body;

An optimized page is generated according to the optimized attribute values of the elements in the body.
10. The server according to claim 10, wherein the step of calculating the aspect ratio of the design draft and the terminal screen aspect ratio, and comparing the design draft aspect ratio with the terminal screen aspect ratio to obtain the comparison result, specifically includes the following steps:

Obtain the design draft width and design draft height of the design draft, and obtain the design draft aspect ratio according to the design draft width divided by the design draft height;

Obtaining the screen width and screen height of the terminal screen, and dividing the screen width by the screen height to obtain the terminal screen aspect ratio;

The aspect ratio of the design draft is compared with the aspect ratio of the terminal screen to obtain a comparison result.
The server according to claim 11, wherein the step of optimizing the attribute value of the body element according to the comparison result to obtain the optimized attribute value of the element in the body specifically includes the following steps:

When the screen aspect ratio is smaller than the design draft aspect ratio, set the minimum width of the design draft;

When the screen aspect ratio is greater than the design draft aspect ratio, the design draft and other elements of the web page are zoomed.
The server according to claim 12, wherein the step of setting the minimum width of the design draft when the screen aspect ratio is smaller than the aspect ratio of the design draft includes the following steps:

Calculate the minimum width according to the height of the screen and the height of the design draft;

Setting the minimum width on the HTML element;

Set the horizontal scroll bar.
The server according to claim 12, wherein the step of scaling the design draft and other elements of the webpage when the screen aspect ratio is greater than the design draft aspect ratio includes the following steps:

Multiply the screen height by the width-to-height ratio of the design draft to obtain the actual displayed width of the design draft;

Assign the actual displayed width of the design draft to the body element through the DOM tree;

Calculate and set the font-size value of the new HTML element;

Center the body element horizontally, and fill the blank spaces on both sides of the page with the background color.
The server according to any one of claims 10-14, wherein the method further comprises:

Switch the page mode of the web page according to the instruction;

When an instruction to present the initial page is received, the page is switched to the initial page;

When an instruction to present an optimized page is received, the page is switched to the optimized page.
The server according to any one of claims 10-14, wherein the method further comprises:

Switch the scene mode of the web page according to the instruction;

When receiving an instruction to enter a special scene, the page switches to the special scene mode;

When an instruction to enter the normal scene is received, the page switches to the normal scene mode.
A computer nonvolatile readable storage medium, wherein the computer nonvolatile readable storage medium stores a webpage design draft adaptive layout system, and the webpage design draft adaptive layout system can be configured by at least one The processor executes, so that the at least one processor executes the following steps of the webpage design draft adaptive layout method:

Set rem to the unit of the element width, height, margin, padding, and left top attribute in CSS;

When the web page is opened, adjust the font-size value of the HTML element according to the terminal screen size, so that the attribute value of the element in the body is adjusted synchronously with the font-size value;

Calculate the aspect ratio of the design draft and the terminal screen aspect ratio, and compare the design draft aspect ratio and the terminal screen aspect ratio to obtain the comparison result;

Optimize the attribute value of the element in the body according to the comparison result, and obtain the optimized attribute value of the element in the body;

An optimized page is generated according to the optimized attribute values of the elements in the body.
The computer non-volatile readable storage medium of claim 17, wherein the step of calculating the aspect ratio of the design draft and the terminal screen aspect ratio, and comparing the design draft aspect ratio and the terminal screen aspect ratio to obtain a comparison result , Specifically including the following steps:

Obtain the design draft width and design draft height of the design draft, and obtain the design draft aspect ratio by dividing the design draft width by the design draft height;

Obtaining the screen width and screen height of the terminal screen, and dividing the screen width by the screen height to obtain the terminal screen aspect ratio;

The aspect ratio of the design draft is compared with the aspect ratio of the terminal screen to obtain a comparison result.
17. The computer non-volatile readable storage medium of claim 18, wherein the step of optimizing the attribute value of the body element according to the comparison result to obtain the optimized attribute value of the element in the body specifically includes the following steps:

When the screen aspect ratio is smaller than the design draft aspect ratio, set the minimum width of the design draft;

When the screen aspect ratio is greater than the design draft aspect ratio, the design draft and other elements of the webpage are zoomed.
19. The computer non-volatile readable storage medium of claim 19, wherein when the screen aspect ratio is smaller than the design draft aspect ratio, the step of setting the minimum width of the design draft includes the following steps:

Calculate the minimum width according to the height of the screen and the height of the design draft;

Setting the minimum width on the HTML element;

Set the horizontal scroll bar.