WO2021068331A1 - 一种网页自适应布局方法、服务器及计算机可读存储介质 - Google Patents

一种网页自适应布局方法、服务器及计算机可读存储介质 Download PDF

Info

Publication number
WO2021068331A1
WO2021068331A1 PCT/CN2019/117347 CN2019117347W WO2021068331A1 WO 2021068331 A1 WO2021068331 A1 WO 2021068331A1 CN 2019117347 W CN2019117347 W CN 2019117347W WO 2021068331 A1 WO2021068331 A1 WO 2021068331A1
Authority
WO
WIPO (PCT)
Prior art keywords
aspect ratio
design draft
page
screen
width
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Ceased
Application number
PCT/CN2019/117347
Other languages
English (en)
French (fr)
Inventor
刘志凯
孔祥成
姜凯英
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Ping An Technology Shenzhen Co Ltd
Original Assignee
Ping An Technology Shenzhen Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Ping An Technology Shenzhen Co Ltd filed Critical Ping An Technology Shenzhen Co Ltd
Publication of WO2021068331A1 publication Critical patent/WO2021068331A1/zh
Anticipated expiration legal-status Critical
Ceased legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING OR CALCULATING; COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G—PHYSICS
    • G06—COMPUTING OR CALCULATING; COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/957—Browsing optimisation, e.g. caching or content distillation
    • G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
    • G—PHYSICS
    • G06—COMPUTING OR CALCULATING; COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces

Definitions

  • 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.
  • 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.
  • this application proposes a web page adaptive layout method, which is applied to a server, and the method includes:
  • HTML HyperText Markup Language
  • An optimized page is generated according to the optimized attribute values of the elements in the body.
  • 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.
  • 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.
  • the server, web page adaptive layout method, and computer non-volatile readable storage medium proposed in this application.
  • 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.
  • 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. 6 is a schematic flowchart of a second embodiment of a webpage adaptive layout method according to this application.
  • Mobile terminal 1 server 2 The internet 3 Memory 11 processor 12 Network Interface 13 Web page adaptive layout system 200 Setting up the module 201 Adjustment module 202 Calculation module 203 Optimization module 204 Generate module 205 Switch module 206 Scaling module 207
  • FIG. 1 is a schematic diagram of an optional application environment of each embodiment of the present application.
  • 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.
  • 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.
  • GSM global system of mobile communication
  • WCDMA wideband code division multiple access
  • 4G network 4G network
  • 5G network Bluetooth (Blue
  • 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.
  • the server 2 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.
  • test scripts are 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.
  • FIG. 2 is a schematic diagram of an optional hardware architecture of the server 2 in FIG. 1.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • the memory 11 may also include both the internal storage unit of the server 2 and its external storage device.
  • 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.
  • the memory 11 can also be used to temporarily store various types of data that have been output or will be output.
  • 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.
  • 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.
  • 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.
  • this application proposes a web page adaptive layout system 200.
  • FIG. 3 is a program module diagram of the first embodiment of the web page adaptive layout system 200 of the present application.
  • 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.
  • 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.
  • 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.
  • 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 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.
  • the adaptive layout of web pages presented on different terminal screens can be realized. This is a general processing method, especially in font adjustment.
  • this adaptive layout method still cannot fully restore the design draft ratio in some cases.
  • the design draft is stretched or deformed or cannot be fully presented.
  • 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.
  • 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.
  • 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.
  • the pixel-level width of the screen is 1366px and the height is 768px
  • the pixel-level width of the design draft is 1620px
  • the height is 768px.
  • 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.
  • 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
  • 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.
  • the font-size value means that all elements will be reduced by a certain proportion on the original basis.
  • 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
  • the body element 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.
  • the pixel-level width of the screen is 1366px
  • the pixel-level width of the design draft is 945px
  • the pixel-level width of the design draft is less than 421px of the screen pixel-level width.
  • the generating module 205 is configured to generate an optimized page according to the optimized attribute values of the elements in the body.
  • 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.
  • 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.
  • the layout of all content on the page can be maintained the same as the layout of the design draft, which has better versatility.
  • 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.
  • the web page adaptive layout system 200 further includes a switching module 206 and a zooming module 207, where:
  • 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.
  • the web page automatically renders the optimized page.
  • 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.
  • the zoom module 207 is used to zoom the page or the specified content in the page according to the instruction.
  • 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.
  • 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.
  • 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.
  • this application also proposes a web page adaptive layout method.
  • FIG. 5 is a schematic flowchart of a first embodiment of a web page adaptive layout method according to the present application.
  • the execution order of the steps in the flowchart shown in FIG. 5 can be changed, and some steps can be omitted.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • the adaptive layout of web pages presented on different terminal screens can be realized. This is a general processing method, especially in font adjustment.
  • this adaptive layout method still cannot fully restore the design draft ratio in some cases.
  • the design draft is stretched or deformed or cannot be fully presented.
  • the minimum width of the design draft is set.
  • 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.
  • 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.
  • the pixel-level width of the screen is 1366px and the height is 768px
  • the pixel-level width of the design draft is 1620px
  • the height is 768px.
  • 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
  • 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.
  • the body element 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.
  • the pixel-level width of the screen is 1366px
  • the pixel-level width of the design draft is 945px
  • the pixel-level width of the design draft is less than 421px of the screen pixel-level width.
  • step S305 an optimized page is generated according to the optimized attribute value of the element in the body.
  • 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.
  • 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.
  • the layout of all content on the page can be maintained the same as the layout of the design draft, which has better versatility.
  • the web page adaptive layout method proposed in this application.
  • 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.
  • 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.
  • FIG. 6 it is a schematic flowchart of a second embodiment of a web page adaptive layout method according to the present application.
  • the steps of the webpage adaptive layout method include:
  • Step S401 Switch the page mode of the web page according to the instruction.
  • 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.
  • 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.
  • Step S403 When an instruction to present an optimized page is received, the page is switched to the optimized page.
  • the web page adaptive layout method can also switch the scene mode of the web page according to the instruction.
  • the web page can also switch the page mode of the web page according to the instruction.
  • the page 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.
  • 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.
  • 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 web page adaptive layout method can also zoom the page or the specified content in the page according to the instruction.
  • 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.
  • 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 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.
  • a terminal device which can be a mobile phone, a computer, a server, an air conditioner, or a network device, etc.

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Software Systems (AREA)
  • Data Mining & Analysis (AREA)
  • Human Computer Interaction (AREA)
  • Information Transfer Between Computers (AREA)
  • Document Processing Apparatus (AREA)

Abstract

一种网页自适应布局方法，该方法包括：将rem设置为CSS中元素width,height,margin,padding,left top属性的单位（S301）；当网页打开时，根据屏幕大小调整HTML元素的font-size值，使得body中元素的属性值随font-size值同步调整（S302）；计算设计稿宽高比和终端屏幕宽高比，并对比设计稿宽高比和终端屏幕宽高比得到对比结果（S303）；根据对比结果优化body中元素的属性值，得到body中元素的优化后属性值（S304）；根据所述body中元素的优化后属性值生成优化页面（S305）。这样，通过上述方法可直接根据设计稿的尺寸转换成代码尺寸，只需要将终端宽度或高度作为判断基准，即可使页面的所有元素自动调整到合适的大小，页面上所有内容的布局与设计稿布局相同，完整还原设计搞比例。

Description

一种网页自适应布局方法、服务器及计算机可读存储介质
本申请要求于2019年10月11日提交中国专利局、申请号为201910975459.6、发明名称为“一种网页自适应布局方法、服务器及计算机可读存储介质”的中国专利申请的优先权，其全部内容通过引用结合在申请中。
技术领域
本申请涉及Web前端开发领域，尤其涉及一种网页自适应布局方法、服务器及计算机可读存储介质。
背景技术
当前，Web前端开发领域的工作者们，在遇到网页自适应布局问题时，主要采用内容区定宽布局和媒体查询、JavaScript动态计算宽度和高度、百分比布局、流式布局等方案，虽然这些方案在一定程度上优化了页面的布局情况，优化了视觉呈现效果，但是仍无法完整地还原设计稿的尺寸比例，或者需要对布局做微调，或者需要在较小屏幕下隐藏部分元素。比如对于流式布局方案，在页面布局的时候通过百分比来定义宽度，而高度大都是用像素(pixel，px)来固定住，所以在部分屏幕下显示效果会变成有些页面元素宽度被拉的很长，但是高度还是和原来一样，实际显示非常的不协调，甚至布局出现混乱，往往仅有几个尺寸的屏幕下呈现的效果是令人满意的，这无论是视觉设计师，还是网页用户，都是无法接受这种呈现效果的。
发明内容
有鉴于此，本申请提出一种网页自适应布局方法及服务器，可以直接根据设计稿的尺寸转换成代码尺寸，无需考虑设计稿具体的尺寸值，只需要设定当前页面是基于终端宽度或者基于终端高度来作为判断基准，即可使页面的所有元素自动调整到合适的大小，同时页面上所有内容的布局可以维持与设计稿的布局相同，完整地还原设计稿的比例，适配所有计算机(personal computer，PC)屏幕尺寸。
首先，为实现上述目的，本申请提出一种网页自适应布局方法，该方法应用于服务器，所述方法包括：
将rem设置为层叠样式表(Cascading Stylesheet，CSS)中元素width,height,margin,padding,left top属性的单位；
当网页打开时，根据屏幕大小调整超文本标记语言(Hyper Text Markup Language，HTML)元素的font-size值，使得body中元素的属性值随font-size值同步调整；
计算设计稿宽高比和终端屏幕宽高比，并对比设计稿宽高比和终端屏幕宽高比得到对比结果；
根据所述对比结果优化body中元素的属性值，得到body中元素的优化 后属性值；
根据所述body中元素的优化后属性值生成优化页面。
此外，为实现上述目的，本申请还提供一种服务器，所述服务器包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的网页自适应布局系统，所述网页自适应布局系统被所述处理器执行时实现如上述的网页自适应布局方法的步骤。
再次，为实现上述目的，本申请还提供一种计算机非易失性可读存储介质，所述计算机非易失性可读存储介质存储有网页自适应布局系统，所述网页自适应布局系统可被至少一个处理器执行，以使所述至少一个处理器执行如上述的网页自适应布局方法的步骤。
相较于现有技术，本申请所提出的服务器、网页自适应布局方法及计算机非易失性可读存储介质。首先，将rem设置为CSS中元素width,height,mar gin,padding,left top属性的单位；其次，当网页打开时，根据屏幕大小调整HTML元素的font-size值，使得body中元素的属性值随font-size值同步调整；再次，计算设计稿宽高比和终端屏幕宽高比，并对比设计稿宽高比和终端屏幕宽高比得到对比结果；进一步地，根据对比结果优化body中元素的属性值，得到body中元素的优化后属性值；最后，根据所述body中元素的优化后属性值生成优化页面。这样，通过上述方案可以直接根据设计稿的尺寸转换成代码尺寸，无需考虑设计稿具体的尺寸值，只需要设定当前页面是基于终端宽度或者基于终端高度来作为判断基准，即可使页面的所有元素自动调整到合适的大小，同时页面上所有内容的布局可以维持与设计稿的布局相同，完整地还原设计稿的比例，适配所有PC屏幕尺寸。
附图说明
图1是本申请各个实施例一可选的应用环境示意图；
图2是图1中服务器一可选的硬件架构的示意图；
图3是本申请网页自适应布局系统第一实施例的程序模块示意图；
图4是本申请网页自适应布局系统第二实施例的程序模块示意图；
图5为本申请网页自适应布局方法第一实施例的流程示意图；
图6为本申请网页自适应布局方法第二实施例的流程示意图；
附图标记：
移动终端 1
服务器 2
网络 3
存储器 11
处理器 12
网络接口 13
网页自适应布局系统 200
设置模块 201
调整模块 202
计算模块 203
优化模块 204
生成模块 205
切换模块 206
缩放模块 207
本申请目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。
具体实施方式
为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处所描述的具体实施例仅用以解释本申请，并不用于限定本申请。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都 属于本申请保护的范围。
需要说明的是，在本申请中涉及“第一”、“第二”等的描述仅用于描述目的，而不能理解为指示或暗示其相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”的特征可以明示或者隐含地包括至少一个该特征。另外，各个实施例之间的技术方案可以相互结合，但是必须是以本领域普通技术人员能够实现为基础，当技术方案的结合出现相互矛盾或无法实现时应当认为这种技术方案的结合不存在，也不在本申请要求的保护范围之内。
参阅图1所示，是本申请各个实施例一可选的应用环境示意图。
在本实施例中，本申请可应用于包括，但不仅限于，移动终端1、服务器2、网络3的应用环境中。其中，所述移动终端1可以是移动电话、智能电话、笔记本电脑、数字广播接收器、PDA(个人数字助理)、PAD(平板电脑)、PMP(便携式多媒体播放器)、导航装置等的可移动设备，以及诸如数字TV、台式计算机、笔记本、服务器等等的固定终端。所述服务器2可以是机架式服务器、刀片式服务器、塔式服务器或机柜式服务器等计算设备，该服务器2可以是独立的服务器，也可以是多个服务器所组成的服务器集群。所述网络3可以是企业内部网(Intranet)、互联网(Internet)、全球移动通讯系统(Global System of Mobile communication，GSM)、宽带码分多址(Wideband Code Division Multiple Access，WCDMA)、4G网络、5G网络、蓝牙(Bluetooth)、Wi-Fi等无线或有线网络。
其中，所述服务器2中通过所述网络3分别与一个或多个所述移动终端1通信连接，以进行数据传输和交互。
本实施例中，当所述服务器2内安装并运行有网页自适应布局系统200时，当所述网页自适应布局系统200运行时，所述服务器2预存储基准测试脚本库、接口规范、计算机数据规范；当接收到被测软件代码时，扫描被测软件代码生成接口函数列表；然后匹配所述接口函数列表和所述基准测试脚本库，生成现有接口函数测试脚本、新接口函数；再根据所述接口规范、所述计算机数据规范生成所述新接口函数的参数赋值规则；进而根据所述新接口函数和所述参数赋值规则生成新接口函数测试脚本；最后根据所述新接口函数测试脚本和所述现有接口函数测试脚本生成所述被测软件代码的测试脚本。这样，通过软件工具实现测试脚本的自动创建，免去测试人员重复劳动，提高测试效率，同时还能避免手工带来失误；规范测试脚本的风格也得到统一，不了解代码的人也可以完成后期的回归测试，减少软件测试工作的人工和时间成本。
参阅图2所示，是图1中服务器2一可选的硬件架构的示意图。本实施例中，所述服务器2可包括，但不仅限于，可通过系统总线相互通信连接存储器11、处理器12、网络接口13。需要指出的是，图2仅示出了具有组件 11-13的移动终端1，但是应理解的是，并不要求实施所有示出的组件，可以替代的实施更多或者更少的组件。
其中，所述存储器11至少包括一种类型的可读存储介质，所述可读存储介质包括闪存、硬盘、多媒体卡、卡型存储器(例如，SD或DX存储器等)、随机访问存储器(RAM)、静态随机访问存储器(SRAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、可编程只读存储器(PROM)、磁性存储器、磁盘、光盘等。在一些实施例中，所述存储器11可以是所述服务器2的内部存储单元，例如该服务器2的硬盘或内存。在另一些实施例中，所述存储器11也可以是所述服务器2的外部存储设备，例如该服务器2上配备的插接式硬盘，智能存储卡(Smart Media Card,SMC)，安全数字(Secure Digital,SD)卡，闪存卡(Flash Card)等。当然，所述存储器11还可以既包括所述服务器2的内部存储单元也包括其外部存储设备。本实施例中，所述存储器11通常用于存储安装于所述服务器2的操作系统和各类应用软件，例如所述网页自适应布局系统200的程序代码等。此外，所述存储器11还可以用于暂时地存储已经输出或者将要输出的各类数据。
所述处理器12在一些实施例中可以是中央处理器(Central Processing Unit，CPU)、控制器、微控制器、微处理器、或其他数据处理芯片。该处理器12通常用于控制所述服务器2的总体操作，例如执行与所述移动终端1进行数据交互或者通信相关的控制和处理等。本实施例中，所述处理器12用于运行所述存储器11中存储的程序代码或者处理数据，例如运行所述的网页自适应布局系统200等。
所述网络接口13可包括无线网络接口或有线网络接口，该网络接口13通常用于在所述服务器2与其他电子设备之间建立通信连接。本实施例中，所述网络接口13主要用于通过所述网络3将所述服务器2与一个或多个所述移动终端1相连，在所述服务器2与所述一个或多个移动终端1之间的建立数据传输通道和通信连接。
至此，己经详细介绍了本申请各个实施例的应用环境和相关设备的硬件结构和功能。下面，将基于上述应用环境和相关设备，提出本申请的各个实施例。
首先，本申请提出一种网页自适应布局系统200。
参阅图3所示，是本申请网页自适应布局系统200第一实施例的程序模块图。
本实施例中，所述网页自适应布局系统200包括一系列的存储于存储器11上的计算机程序指令，当该计算机程序指令被处理器12执行时，可以实现本申请各实施例的自动创建测试脚本操作。在一些实施例中，基于该计算机程序指令各部分所实现的特定的操作，网页自适应布局系统200可以被划分为一个或多个模块。例如，在图3中，所述网页自适应布局系统200可以被分割成设置模块201、调整模块202、计算模块203、优化模块204、以及生成模块205。 其中：
所述设置模块201，用于将rem设置为CSS中元素width,height,margin,padding,left top属性的单位。
具体地，目前业内主要采用内容区定宽布局+媒体查询、JavaScript动态计算宽度和高度、百分比布局、流式布局等方案对网页页面进行自适应调整，这些方案并不能完整地还原设计稿的尺寸比例。rem是css3的一个单位属性，rem能够使得body中元素的属性值根据页面的HTML中根元素字体大小进行转变的单位，定义好屏幕中根元素的字体大小能够实现不同终端屏幕下网页呈现的自适应布局，因此，将rem作为css中元素width、height、margin、padding、left top属性的单位。
所述调整模式202，用于当网页打开时，根据屏幕大小调整HTML元素的font-size值，使得body中元素的属性值随font-size值同步调整。
具体地，为了实现body中元素的属性值随着HTML根元素联动，还需要定义HTML元素的font-size值，而为了实现网页页面的大小自适应终端屏幕的大小，需要HTML中font-size值的大小随着屏幕大小变化。因此，根据屏幕大小动态地调整HTML元素的font-size值，从而调整所有DOM元素的对象及其属性、值，从而实现body中元素的属性值随font-size值同步调整。
所述计算模块203，用于计算设计稿宽高比和终端屏幕宽高比，并对比设计稿宽高比和终端屏幕宽高比得到对比结果。
具体地，不同的设计稿存在不同的宽度和高度，也就存在不同的宽高比，而呈现设计稿的终端屏幕由于使用场景，用户喜好等原因也存在不同的宽高比，例如早期用的较多的正方形屏幕以及现在较为流行的16:9屏，且存在尺寸差异和像素差异。设计稿在终端屏幕上是像素级的呈现方式，所述尺寸差异和像素差异导致同一终端屏幕难以很好的呈现不同的设计稿，同一设计稿难以在不同的终端屏幕上呈现。因此，考虑到实际屏幕尺寸比例和设计稿宽高比例不一致的情况，往往需要在所述初始设计稿呈现参数的基础上，设计稿的呈现尺寸进行进一步的优化，而优化工作的第一步需要获取设计稿宽高比和终端屏幕宽高比，在本实施例中，网页浏览器获取所述设计稿的设计稿宽和设计稿高，然后根据设计稿宽除以设计稿高得到所述设计稿宽高比；进一步地，所述服务器还获取所述终端屏幕的屏宽和屏高，然后根据屏宽除以屏高得到所述终端屏幕宽高比；最后对比所述设计稿宽高比和所述终端屏幕宽高比。
所述优化模块204，用于对比设计稿宽高比和终端屏幕宽高比得到对比结果，根据对比结果优化body元素的属性值，得到body中元素的优化后属性值。
具体地，从上文可知，为网页尺寸与屏幕相关，而屏幕的种类难以统计，许多设计稿只能主要顾及主流用户的分辨率，其他分辨率用适配的方式来解决。通过rem能够实现不同终端屏幕下网页呈现的自适应布局，这是一种通用的处理方式，尤其在字体的调整方面，但是这种自适应布局方式在部分情 况下仍然不能完整地还原设计稿比例，存在设计稿被拉伸变形或者无法完整呈现的情况。通过对比设计稿宽高比和终端屏幕宽高比，得到设计稿宽高比和终端屏幕宽高比的大小情况。
在实施例中，所述设置模块201还用于当所述屏幕宽高比小于所述设计稿宽高比时，设置设计稿的最小宽度。
具体地，根据所述屏高和所述设计稿高计算出最小宽度，然后将所述最小宽度设置于HTML元素上，并设置横向滚动条。HTML为根元素，在HTML设置最小宽度能够同步影响其他元素的呈现尺寸，最终呈现一个经过优化调整后的设计稿，更好地还原设计稿。所述屏幕宽高比小于所述设计稿宽高比，例如方正显示屏，也就是在同一像素级高度的情况下，屏幕像素级宽度小于设计稿像素级宽度，此时，为了能够完整地还原设计稿，所述设计稿像素级高度与所述屏幕像素级高度一致，或者所述设计稿像素级高度与减去浏览器头部和底部像素级高度后剩余屏幕像素级高度一致，然后根据所述设计稿宽高比得到所述设计稿像素级宽度，将所述设计稿像素级宽度设置为所述最小宽度，设置于HTML元素上，而由于所述屏幕像素级宽度小于所述设计稿像素级宽度，屏幕是无法完整呈现所述设计稿宽度的，需要设置横向滚动条。例如，假设所述屏幕像素级宽度为1366px，高度为768px，所述设计稿像素级宽度为1620px，高度为768px，在HTML元素设置最小宽度为1620px，并设置横向滚动条，此时就能够原比例还原设计稿。
所述设置模块201还用于当所述屏幕宽高比大于所述设计稿宽高比时，缩放设计稿及网页其他元素。
具体地，以所述屏高乘以所述设计稿宽高比，得到实际显示的设计稿宽度，将所述实际显示的设计稿宽度赋值于body元素，计算并设置新的HTML元素font-size值，最后将body元素水平居中，页面两侧空白处使用背景色填充。
详细而言，在本案中，当所述屏幕宽高比大于所述设计稿宽高比时，即屏幕太扁时，以所述像素级屏高乘以所述设计稿宽高比，得到像素级设计稿呈现宽度，并所述像素级设计稿呈现宽度赋值给body元素，同时计算新的font-size值＝当前值*(设计稿宽高比/屏幕宽高比)，并调整HTML元素的font-size值，即让所有元素在原有基础上再次缩小一定的比例。例如，假设所述屏幕像素级宽度为1366px，高度为768px，所述设计稿像素级宽度为945px，高度为768px，所述像素级设计稿呈现宽度为＝所述像素级屏高乘以所述设计稿宽高比＝768px*945px/768px＝945px，将945px赋值给body元素。再例如，对于font-size值，假设当前值为24px，则font-size值＝当前值*(设计稿宽高比/屏幕宽高比)＝24px*((945px/768px)/(1366px/768px))＝24px*945px/1366px＝17px，将该值赋值给font-size值，即实现其他所有元素的调整。
在本实施例中，在赋值给body元素的同时，将body元素水平居中，两侧多余的空白使用背景色填充。在前一例子中，所述屏幕像素级宽度为1366px，所述设计稿像素级宽度为945px，设计稿像素级宽度是小于屏幕像素 级宽度的421px的，此时，为了网页画面的美观，我们将设计稿水平居中，设计稿检测多余的421px空白处使用背景色填充。
所述生成模块205，用于根据所述body中元素的优化后属性值生成优化页面。
具体地，网页浏览器得到优化网页的必要参数，即body中元素的优化后属性值，根据这些优化后的属性值进行调整后，可生成优化页面。与常规思路相比，本方案无需考虑设计稿具体的尺寸值，只需要设定当前页面是基于终端宽度或者基于终端高度来作为判断基准，即可使页面的所有元素自动调整到合适的大小，同时页面上所有内容的布局可以维持与设计稿的布局相同，具有更好的通用性。
通过上述程序模块201-205，本申请所提出的网页自适应布局系统200。首先，将rem设置为CSS中元素width,height,margin,padding,left top属性的单位；其次，当网页打开时，根据屏幕大小调整HTML元素的font-size值，使得body中元素的属性值随font-size值同步调整；再次，计算设计稿宽高比和终端屏幕宽高比，并对比设计稿宽高比和终端屏幕宽高比得到对比结果；根据对比结果优化body中元素的属性值，得到body中元素的优化后属性值；最后，根据所述body中元素的优化后属性值生成优化页面。这样，通过上述方案可以直接根据设计稿的尺寸转换成代码尺寸，无需考虑设计稿具体的尺寸值，只需要设定当前页面是基于终端宽度或者基于终端高度来作为判断基准，即可使页面的所有元素自动调整到合适的大小，同时页面上所有内容的布局可以维持与设计稿的布局相同，完整地还原设计稿的比例，适配所有PC屏幕尺寸。
再次，基于本申请网页自适应布局系统200的上述第一实施例，提出本申请的第二实施例(如图4所示)。本实施例中，所述网页自适应布局系统200还包括切换模块206、缩放模块207，其中，
所述切换模块206，用于根据指令切换网页页面的页面模式。
具体地，不同的用户有不同的浏览习惯，网页页面支持不同的呈现方式能够进一步满足更广泛的用户阅读习惯，提高用户体验。在本案中，网页页面根据指令切换网页页面的页面模式，可切换初始页面和优化页面，在默认情况下，网页是自动呈现优化页面的，当接收到呈现初始页面的指令时，页面切换为所述初始页面；当接收到呈现优化页面的指令时，页面切换为所述优化页面。
所述切换模块206，还用于根据指令切换网页页面的场景模式。
具体地，在一些特殊的应用场景下，如老人作为互联网用户的特殊群体，其在浏览普通网页页面时，往往存在一定的视力障碍。在本案中，网页页面还可以根据指令切换网页页面的页面模式，当接收到呈现初始页面的指令时，页面切换为所述初始页面；当接收到呈现优化页面的指令时，页面切换为所 述优化页面。例如，页面提供切换到老人模式的功能，并可根据用户需求调整页面的显示比例，如在适配计算公式中乘以一个比1大的系数，页面内容就会被相应地放大。例如，老人在浏览该页面时，默认显示的页面可能存在字体或者图片过小，老人无法看清的情况，此时老人可将页面选择为老人模式，或者在页面上通过特定的手势，根据自身的浏览需要调整页面的缩放大小。
所述缩放模块207，用于根据指令缩放页面或者页面内的指定内容。
具体地，在一些特定应用场景下，商家或者用户并不希望部分内容或者页面被缩放，此时，将该内容或者页面的单位从rem改为其他类型的单位，从而实现对任意指定页面或者内容不参与布局缩放。对于存在多个页面的网站，各个页面基于当前页面的设计稿进行适配计算，即各个页面计算其内容或者页面是否参与布局缩放，无需考虑自身与其他页面的设计差异。当接收到针对网页的缩放指令时，对网页所有内容进行缩放；当接收到针对网页指定内容的缩放指令时，对网页指定内容进行缩放。例如，某网页有10个页面，其中的2个页面需要按照特特定比例对其进行缩放，这时候仅需要对这两个页面的呈现比例进行调整即可；又例如某个页面的部分内容需要指定特定大小，此时仅需要指定这部分内容的显示比例即可。
通过上述程序模块206-207，本申请所提出的网页自适应布局系统100可以根据指令切换网页页面的页面模式，根据指令切换网页页面的场景模式，还可以根据指令缩放页面或者页面内的指定内容，使得网页的页面呈现模式具有可选择性，网页的场景模式更为丰富，具有更好的呈现效果和用户体验，是更为人性化的设计方案。
此外，本申请还提出一种网页自适应布局方法。
参阅图5所示，是本申请网页自适应布局方法第一实施例的流程示意图。在本实施例中，根据不同的需求，图5所示的流程图中的步骤的执行顺序可以改变，某些步骤可以省略。
步骤S301，将rem设置为CSS中元素width,height,margin,padding,left top属性的单位。
具体地，目前业内主要采用内容区定宽布局+媒体查询、JavaScript动态计算宽度和高度、百分比布局、流式布局等方案对网页页面进行自适应调整，这些方案并不能完整地还原设计稿的尺寸比例。rem是css3的一个单位属性，rem能够使得body中元素的属性值根据页面的HTML中根元素字体大小进行转变的单位，定义好屏幕中根元素的字体大小能够实现不同终端屏幕下网页呈现的自适应布局，因此，将rem作为CSS中元素width、height、margin、padding、left top属性的单位。
步骤S302，当网页打开时，根据屏幕大小调整HTML元素的font-size值，使得body中元素的属性值随font-size值同步调整。
具体地，为了实现body中元素的属性值随着HTML根元素联动，还需要 定义HTML元素的font-size值，而为了实现网页页面的大小自适应终端屏幕的大小，需要HTML中font-size值的大小随着屏幕大小变化。因此，根据屏幕大小动态地调整HTML元素的font-size值，从而调整所有DOM元素的对象及其属性、值，从而实现body中元素的属性值随font-size值同步调整。
步骤S303，计算设计稿宽高比和终端屏幕宽高比，并对比设计稿宽高比和终端屏幕宽高比得到对比结果。
具体地，不同的设计稿存在不同的宽度和高度，也就存在不同的宽高比，而呈现设计稿的终端屏幕由于使用场景，用户喜好等原因也存在不同的宽高比，例如早期用的较多的正方形屏幕以及现在较为流行的16:9屏，且存在尺寸差异和像素差异。设计稿在终端屏幕上是像素级的呈现方式，所述尺寸差异和像素差异导致同一终端屏幕难以很好的呈现不同的设计稿，同一设计稿难以在不同的终端屏幕上呈现。因此，考虑到实际屏幕尺寸比例和设计稿宽高比例不一致的情况，往往需要在所述初始设计稿呈现参数的基础上，设计稿的呈现尺寸进行进一步的优化，而优化工作的第一步需要获取设计稿宽高比和终端屏幕宽高比，具体步骤包括：获取所述设计稿的设计稿宽和设计稿高，然后根据设计稿宽除以设计稿高得到所述设计稿宽高比；获取所述终端屏幕的屏宽和屏高，然后根据屏宽除以屏高得到所述终端屏幕宽高比；最后对比所述设计稿宽高比和所述终端屏幕宽高比。
步骤S304，对比设计稿宽高比和终端屏幕宽高比得到对比结果，根据对比结果优化body元素的属性值，得到body中元素的优化后属性值。
具体地，从上文可知，为网页尺寸与屏幕相关，而屏幕的种类难以统计，许多设计稿只能主要顾及主流用户的分辨率，其他分辨率用适配的方式来解决。通过rem能够实现不同终端屏幕下网页呈现的自适应布局，这是一种通用的处理方式，尤其在字体的调整方面，但是这种自适应布局方式在部分情况下仍然不能完整地还原设计稿比例，存在设计稿被拉伸变形或者无法完整呈现的情况。通过对比设计稿宽高比和终端屏幕宽高比，得到设计稿宽高比和终端屏幕宽高比的大小情况。
在本申请的其他实施例中，当所述屏幕宽高比小于所述设计稿宽高比时，设置设计稿的最小宽度。
具体地，根据所述屏高和所述设计稿高计算出最小宽度，然后将所述最小宽度设置于HTML元素上，并设置横向滚动条。HTML为根元素，在HTML设置最小宽度能够同步影响其他元素的呈现尺寸，最终呈现一个经过优化调整后的设计稿，更好地还原设计稿。所述屏幕宽高比小于所述设计稿宽高比，例如方正显示屏，也就是在同一像素级高度的情况下，屏幕像素级宽度小于设计稿像素级宽度，此时，为了能够完整地还原设计稿，所述设计稿像素级高度与所述屏幕像素级高度一致，或者所述设计稿像素级高度与减去浏览器头部和底部像素级高度后剩余屏幕像素级高度一致，然后根据所述设计稿宽高比得到所述设计稿像素级宽度，将所述设计稿像素级宽度设置为所述最小宽度，设置于HTML元素上，而由于所述屏幕像素级宽度小于所述设计稿像 素级宽度，屏幕是无法完整呈现所述设计稿宽度的，需要设置横向滚动条。例如，假设所述屏幕像素级宽度为1366px，高度为768px，所述设计稿像素级宽度为1620px，高度为768px，在HTML元素设置最小宽度为1620px，并设置横向滚动条，此时就能够原比例还原设计稿。
当所述屏幕宽高比大于所述设计稿宽高比时，缩放设计稿及网页其他元素。
具体地，以所述屏高乘以所述设计稿宽高比，得到实际显示的设计稿宽度，将所述实际显示的设计稿宽度赋值于body元素，计算并设置新的HTML元素font-size值，最后将body元素水平居中，页面两侧空白处使用背景色填充。
详细而言，在本案中，当所述屏幕宽高比大于所述设计稿宽高比时，即屏幕太扁时，以所述像素级屏高乘以所述设计稿宽高比，得到像素级设计稿呈现宽度，并所述像素级设计稿呈现宽度赋值给body元素，同时计算新的font-size值＝当前值*(设计稿宽高比/屏幕宽高比)，并调整HTML元素的font-size值，即让所有元素在原有基础上再次缩小一定的比例。例如，假设所述屏幕像素级宽度为1366px，高度为768px，所述设计稿像素级宽度为945px，高度为768px，所述像素级设计稿呈现宽度为＝所述像素级屏高乘以所述设计稿宽高比＝768px*945px/768px＝945px，将945px赋值给body元素。再例如，对于font-size值，假设当前值为24px，则font-size值＝当前值*(设计稿宽高比/屏幕宽高比)＝24px*((945px/768px)/(1366px/768px))＝24px*945px/1366px＝17px，将该值赋值给font-size值，即实现其他所有元素的调整。
此外，在赋值给body元素的同时，将body元素水平居中，两侧多余的空白使用背景色填充。在前一例子中，所述屏幕像素级宽度为1366px，所述设计稿像素级宽度为945px，设计稿像素级宽度是小于屏幕像素级宽度的421px的，此时，为了网页画面的美观，我们将设计稿水平居中，设计稿检测多余的421px空白处使用背景色填充。
步骤S305，根据所述body中元素的优化后属性值生成优化页面。
具体地，前述步骤得到优化网页的必要参数，即body中元素的优化后属性值，根据这些优化后的属性值进行调整后，可生成优化页面。与常规思路相比，本方案无需考虑设计稿具体的尺寸值，只需要设定当前页面是基于终端宽度或者基于终端高度来作为判断基准，即可使页面的所有元素自动调整到合适的大小，同时页面上所有内容的布局可以维持与设计稿的布局相同，具有更好的通用性。
通过上述步骤S301-305，本申请所提出的网页自适应布局方法。首先，将rem设置为CSS中元素width,height,margin,padding,left top属性的单位；当网页打开时，根据屏幕大小调整HTML元素的font-size值，使得body中元素的属性值随font-size值同步调整；然后计算设计稿宽高比和终端屏幕宽高比；再次，对比设计稿宽高比和终端屏幕宽高比得到对比结果，根据对比结果优 化body元素的属性值，得到元素的优化属性值；最后，根据所述优化设计稿呈现参数生成优化页面。这样，通过上述方案可以直接根据设计稿的尺寸转换成代码尺寸，无需考虑设计稿具体的尺寸值，只需要设定当前页面是基于终端宽度或者基于终端高度来作为判断基准，即可使页面的所有元素自动调整到合适的大小，同时页面上所有内容的布局可以维持与设计稿的布局相同，完整地还原设计稿的比例，适配所有PC屏幕尺寸。
再次，基于本申请网页自适应布局方法的上述第一实施例，提出本申请网页自适应布局方法的第二实施例。
如图6所示，是本申请网页自适应布局方法第二实施例的流程示意图。本实施例中，所述的网页自适应布局方法的步骤包括：
步骤S401，根据指令切换网页页面的页面模式。
具体地，不同的用户有不同的浏览习惯，网页页面支持不同的呈现方式能够进一步满足更广泛的用户阅读习惯，提高用户体验。在本案中，网页页面根据指令切换网页页面的页面模式，可切换初始页面和优化页面，在默认情况下，为了提高用户的视觉体验效果，网页是自动呈现优化页面的。
步骤S402，当接收到呈现初始页面的指令时，页面切换为所述初始页面。
具体地，当接收到呈现初始页面的指令时，首先判断当前页面是否处于所述优化页面，如是，则页面切换为所述初始页面，如否，则保持当前页面。
步骤S403，当接收到呈现优化页面的指令时，页面切换为所述优化页面。
具体地，当接收到呈现初始页面的指令时，首先判断当前页面是否处于所述优化页面，如是，则保持当前页面，如否，则页面切换为所述优化页面。
在本申请的其他实施例中，所述网页自适应布局方法，还可根据指令切换网页页面的场景模式。
具体地，在一些特殊的应用场景下，如老人作为互联网用户的特殊群体，其在浏览普通网页页面时，往往存在一定的视力障碍。在本案中，网页页面还可以根据指令切换网页页面的页面模式，当接收到呈现初始页面的指令时，页面切换为所述初始页面；当接收到呈现优化页面的指令时，页面切换为所述优化页面。例如，页面提供切换到老人模式的功能，并可根据用户需求调整页面的显示比例，如在适配计算公式中乘以一个比1大的系数，页面内容就会被相应地放大。例如，老人在浏览该页面时，默认显示的页面可能存在字体或者图片过小，老人无法看清的情况，此时老人可将页面选择为老人模式，或者在页面上通过特定的手势，根据自身的浏览需要调整页面的缩放大小。
在本申请的其他实施例中，所述网页自适应布局方法，还可根据指令缩放页面或者页面内的指定内容。
具体地，在一些特定应用场景下，商家或者用户并不希望部分内容或者页面被缩放，此时，将该内容或者页面的单位从rem改为其他类型的单位，从而实现对任意指定页面或者内容不参与布局缩放。对于存在多个页面的网 站，各个页面基于当前页面的设计稿进行适配计算，即各个页面计算其内容或者页面是否参与布局缩放，无需考虑自身与其他页面的设计差异。当接收到针对网页的缩放指令时，对网页所有内容进行缩放；当接收到针对网页指定内容的缩放指令时，对网页指定内容进行缩放。例如，某网页有10个页面，其中的2个页面需要按照特特定比例对其进行缩放，这时候仅需要对这两个页面的呈现比例进行调整即可；又例如某个页面的部分内容需要指定特定大小，此时仅需要指定这部分内容的显示比例即可。
通过上述步骤S401-S403，本申请所提出的网页自适应布局方法，可以根据指令切换网页页面的页面模式，使得网页的页面呈现模式具有可选择性，具有更好的呈现效果和用户体验，是更为人性化的设计方案。
上述本申请实施例序号仅仅为了描述，不代表实施例的优劣。
通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质(如ROM/RAM、磁碟、光盘)中，包括若干指令用以使得一台终端设备(可以是手机，计算机，服务器，空调器，或者网络设备等)执行本申请各个实施例所述的方法。
以上仅为本申请的优选实施例，并非因此限制本申请的专利范围，凡是利用本申请说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本申请的专利保护范围内。

Claims (20)

  1. 一种网页自适应布局方法，其特征在于，所述方法包括：
    将rem设置为CSS中元素width,height,margin,padding,left top属性的单位；
    当网页打开时，根据终端屏幕大小调整HTML元素的font-size值，使得body中元素的属性值随font-size值同步调整；
    计算设计稿宽高比和终端屏幕宽高比，并对比设计稿宽高比和终端屏幕宽高比得到对比结果；
    根据所述对比结果优化body中元素的属性值，得到body中元素的优化后属性值；
    根据所述body中元素的优化后属性值生成优化页面。
  2. 如权利要求1所述的网页自适应布局方法，所述计算设计稿宽高比和终端屏幕宽高比，并对比设计稿宽高比和终端屏幕宽高比得到对比结果的步骤，具体包括如下步骤：
    获取所述设计稿的设计稿宽和设计稿高，根据设计稿宽除以设计稿高得到所述设计稿宽高比；
    获取所述终端屏幕的屏宽和屏高，根据屏宽除以屏高得到所述终端屏幕宽高比；
    对比所述设计稿宽高比和所述终端屏幕宽高比以得到对比结果。
  3. 如权利要求2所述的网页自适应布局方法，所述根据所述对比结果优化body元素的属性值，得到body中元素的优化后属
    性值的步骤，具体包括如下步骤：
    当所述屏幕宽高比小于所述设计稿宽高比时，设置设计稿的最小宽度；
    当所述屏幕宽高比大于所述设计稿宽高比时，缩放设计稿及网页其他元素。
  4. 如权利要求3所述的网页自适应布局方法，所述当所述屏幕宽高比小于所述设计稿宽高比时，设置设计稿的最小宽度的步骤，具体包括如下步骤：
    根据所述屏高和所述设计稿高计算出最小宽度；
    将所述最小宽度设置于HTML元素上；
    设置横向滚动条。
  5. 如权利要求3所述的网页自适应布局方法，所述当所述屏幕宽高比大于所述设计稿宽高比时，缩放设计稿及网页其他元素的步骤，具体包括如下步骤：
    以所述屏高乘以所述设计稿宽高比，得到实际显示的设计稿宽度；
    将所述实际显示的设计稿宽度通过DOM树赋值于body元素；
    计算并设置新的HTML元素font-size值；
    将body元素水平居中，页面两侧空白处使用背景色填充。
  6. 如权利要求1-5中任一项所述的网页自适应布局方法，其特征在于，所述方法还包括：
    根据指令切换网页页面的页面模式；
    当接收到呈现初始页面的指令时，页面切换为所述初始页面；
    当接收到呈现优化页面的指令时，页面切换为所述优化页面。
  7. 如权利要求1-5中任一项所述的网页自适应布局方法，其特征在于，所述方法还包括：
    根据指令切换网页页面的场景模式；
    当接收到进入特殊场景的指令时，页面切换为特殊场景模式；
    当接收到进入普通场景的指令时，页面切换为普通场景模式。
  8. 如权利要求1-5中任一项所述的网页自适应布局方法，其特征在于，所述方法还包括：
    根据指令缩放页面或者页面内的指定内容；
    当接收到针对网页的缩放指令时，对网页所有内容进行缩放；
    当接收到针对网页指定内容的缩放指令时，对网页指定内容进行缩放。
  9. 如权利要求1所述的网页自适应布局方法，其特征在于，所述调整后的font-size值＝当前font-size值*(设计稿宽高比/屏幕宽高比)。
  10. 一种服务器，其特征在于，所述服务器包括存储器、处理器，所述存储器上存储有可在所述处理器上运行的网页自适应布局系统，所述网页自适应布局系统被所述处理器执行时实现如下所述的网页自适应布局方法的步骤：
    将rem设置为CSS中元素width,height,margin,padding,left top属性的单位；
    当网页打开时，根据终端屏幕大小调整HTML元素的font-size值，使得body中元素的属性值随font-size值同步调整；
    计算设计稿宽高比和终端屏幕宽高比，并对比设计稿宽高比和终端屏幕宽高比得到对比结果；
    根据所述对比结果优化body中元素的属性值，得到body中元素的优化后属性值；
    根据所述body中元素的优化后属性值生成优化页面。
  11. 如权利要求10所述的服务器，所述计算设计稿宽高比和终端屏幕宽高比，并对比设计稿宽高比和终端屏幕宽高比得到对比结果的步骤，具体包括如下步骤：
    获取所述设计稿的设计稿宽和设计稿高，根据设计稿宽除以设计稿高得到所述设计稿宽高比；
    获取所述终端屏幕的屏宽和屏高，根据屏宽除以屏高得到所述终端屏幕宽高比；
    对比所述设计稿宽高比和所述终端屏幕宽高比以得到对比结果。
  12. 如权利要求11所述的服务器，所述根据所述对比结果优化body元素的属性值，得到body中元素的优化后属性值的步骤，具体包括如下步骤：
    当所述屏幕宽高比小于所述设计稿宽高比时，设置设计稿的最小宽度；
    当所述屏幕宽高比大于所述设计稿宽高比时，缩放设计稿及网页其他元 素。
  13. 如权利要求12所述的服务器，所述当所述屏幕宽高比小于所述设计稿宽高比时，设置设计稿的最小宽度的步骤，具体包括如下步骤：
    根据所述屏高和所述设计稿高计算出最小宽度；
    将所述最小宽度设置于HTML元素上；
    设置横向滚动条。
  14. 如权利要求12所述的服务器，所述当所述屏幕宽高比大于所述设计稿宽高比时，缩放设计稿及网页其他元素的步骤，具体包括如下步骤：
    以所述屏高乘以所述设计稿宽高比，得到实际显示的设计稿宽度；
    将所述实际显示的设计稿宽度通过DOM树赋值于body元素；
    计算并设置新的HTML元素font-size值；
    将body元素水平居中，页面两侧空白处使用背景色填充。
  15. 如权利要求10-14中任一项所述的服务器，其特征在于，所述方法还包括：
    根据指令切换网页页面的页面模式；
    当接收到呈现初始页面的指令时，页面切换为所述初始页面；
    当接收到呈现优化页面的指令时，页面切换为所述优化页面。
  16. 如权利要求10-14中任一项所述的服务器，其特征在于，所述方法还包括：
    根据指令切换网页页面的场景模式；
    当接收到进入特殊场景的指令时，页面切换为特殊场景模式；
    当接收到进入普通场景的指令时，页面切换为普通场景模式。
  17. 一种计算机非易失性可读存储介质，其特征在于，所述计算机非易失性可读存储介质存储有网页设计稿自适应布局系统，所述网页设计稿自适应布局系统可被至少一个处理器执行，以使所述至少一个处理器执行如下所述网页设计稿自适应布局方法的步骤：
    将rem设置为CSS中元素width,height,margin,padding,left top属性的单位；
    当网页打开时，根据终端屏幕大小调整HTML元素的font-size值，使得body中元素的属性值随font-size值同步调整；
    计算设计稿宽高比和终端屏幕宽高比，并对比设计稿宽高比和终端屏幕宽高比得到对比结果；
    根据所述对比结果优化body中元素的属性值，得到body中元素的优化后属性值；
    根据所述body中元素的优化后属性值生成优化页面。
  18. 如权利要求17所述的计算机非易失性可读存储介质，所述计算设计稿宽高比和终端屏幕宽高比，并对比设计稿宽高比和终端屏幕宽高比得到对比结果的步骤，具体包括如下步骤：
    获取所述设计稿的设计稿宽和设计稿高，根据设计稿宽除以设计稿高得 到所述设计稿宽高比；
    获取所述终端屏幕的屏宽和屏高，根据屏宽除以屏高得到所述终端屏幕宽高比；
    对比所述设计稿宽高比和所述终端屏幕宽高比以得到对比结果。
  19. 如权利要求18所述的计算机非易失性可读存储介质，所述根据所述对比结果优化body元素的属性值，得到body中元素的优化后属性值的步骤，具体包括如下步骤：
    当所述屏幕宽高比小于所述设计稿宽高比时，设置设计稿的最小宽度；
    当所述屏幕宽高比大于所述设计稿宽高比时，缩放设计稿及网页其他元素。
  20. 如权利要求19所述的计算机非易失性可读存储介质，所述当所述屏幕宽高比小于所述设计稿宽高比时，设置设计稿的最小宽度的步骤，具体包括如下步骤：
    根据所述屏高和所述设计稿高计算出最小宽度；
    将所述最小宽度设置于HTML元素上；
    设置横向滚动条。
PCT/CN2019/117347 2019-10-11 2019-11-12 一种网页自适应布局方法、服务器及计算机可读存储介质 Ceased WO2021068331A1 (zh)

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN201910975459.6 2019-10-11
CN201910975459.6A CN110837617B (zh) 2019-10-11 2019-10-11 一种网页自适应布局方法、服务器及计算机可读存储介质

Publications (1)

Publication Number Publication Date
WO2021068331A1 true WO2021068331A1 (zh) 2021-04-15

Family

ID=69575351

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2019/117347 Ceased WO2021068331A1 (zh) 2019-10-11 2019-11-12 一种网页自适应布局方法、服务器及计算机可读存储介质

Country Status (2)

Country Link
CN (1) CN110837617B (zh)
WO (1) WO2021068331A1 (zh)

Cited By (16)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113836470A (zh) * 2021-09-29 2021-12-24 浪潮卓数大数据产业发展有限公司 一种构建响应式数据展示页面的方法及设备、介质
CN113886744A (zh) * 2021-12-08 2022-01-04 浙江口碑网络技术有限公司 内容渲染方法、装置、电子设备及存储介质
CN114442890A (zh) * 2021-12-28 2022-05-06 北京沃东天骏信息技术有限公司 用于移动端网页的信息分析方法、装置、设备和可读介质
CN114816182A (zh) * 2022-03-21 2022-07-29 昭通亮风台信息科技有限公司 可视化屏幕的地图展示方法、装置、设备及介质
CN115080027A (zh) * 2022-08-24 2022-09-20 深圳市信润富联数字科技有限公司 web页面自动适配方法、装置、设备及存储介质
CN115129603A (zh) * 2022-07-08 2022-09-30 中国银行股份有限公司 一种ui的检查方法及装置
CN115202657A (zh) * 2022-07-15 2022-10-18 珍岛信息技术（上海）股份有限公司 一种基于vw特性的页面自适应布局方法
CN115617339A (zh) * 2022-11-09 2023-01-17 天翼数字生活科技有限公司 一种前端设计稿自动兼容多尺寸屏幕方法及其相关装置
CN116009802A (zh) * 2021-10-22 2023-04-25 华为技术有限公司 页面显示方法、电子设备及计算机可读存储介质
CN116048507A (zh) * 2022-12-22 2023-05-02 大唐互联科技(武汉)有限公司 弹性布局页面处理方法、装置、电子设备及存储介质
WO2023103933A1 (zh) * 2021-12-10 2023-06-15 拉扎斯网络科技（上海）有限公司 内容渲染方法、装置、电子设备、存储介质和程序产品
CN116578219A (zh) * 2023-04-28 2023-08-11 北京洞悉网络有限公司 适用于左右双屏的表单页面自适配展示方法、装置、计算机设备及计算机可读存储介质
CN117112955A (zh) * 2023-08-17 2023-11-24 网易（杭州）网络有限公司 白屏检测方法、装置及电子设备
CN117194825A (zh) * 2023-09-22 2023-12-08 中电云计算技术有限公司 针对全局缩放的前端布局方法、存储介质、设备及装置
CN119441658A (zh) * 2025-01-08 2025-02-14 浙江网盛数新软件股份有限公司 基于web端的自由网格布局转换系统、方法及存储介质
CN120448657A (zh) * 2025-07-09 2025-08-08 杭州秋果计划科技有限公司 文本显示方法、电子设备和存储介质

Families Citing this family (24)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111382388B (zh) * 2020-03-19 2023-10-24 中国银行股份有限公司 一种利用css进行底部元素吸底控制的方法及系统
CN111581570B (zh) * 2020-04-01 2023-05-30 车智互联（北京）科技有限公司 一种页面布局方法及计算设备
CN111966434A (zh) * 2020-07-13 2020-11-20 北京明略软件系统有限公司 一种在窗口显示画面的方法、终端、系统和存储介质
CN114168128A (zh) * 2020-09-10 2022-03-11 华为技术有限公司 生成响应式页面的方法、图形用户界面及电子设备
CN112149021B (zh) * 2020-09-23 2021-07-30 四川天邑康和通信股份有限公司 一种路由器CSS Sprites技术中使用自适应布局单位的兼容方法
CN112114924B (zh) * 2020-09-24 2024-06-28 北京明略昭辉科技有限公司 一种页面元素的权限选择方法及装置
CN112261227A (zh) * 2020-10-28 2021-01-22 冠群信息技术(南京)有限公司 一种移动端多屏等比例适配的方法
CN112395033B (zh) * 2020-11-18 2024-08-06 中国平安人寿保险股份有限公司 网页自适应方法及相关产品
CN112416331B (zh) * 2020-12-07 2024-12-20 中国建设银行股份有限公司 页面的适配方法、装置、电子设备及计算机可读存储介质
CN112860255A (zh) * 2021-02-08 2021-05-28 无线生活（杭州）信息科技有限公司 页面适配方法及装置
CN112783496A (zh) * 2021-02-22 2021-05-11 中国工商银行股份有限公司 一种基于锚点的界面动态布局方法、装置、电子设备及存储介质
CN113050944B (zh) * 2021-04-21 2024-01-26 浪潮通用软件有限公司 前端页面生成方法、装置及计算机可读介质
CN113268226B (zh) * 2021-06-24 2024-06-18 中国平安人寿保险股份有限公司 页面数据生成方法、装置、存储介质及设备
CN115705185A (zh) * 2021-08-13 2023-02-17 江苏省环科院环境科技有限责任公司 基于Bootstrap框架的网页响应式显示方法及装置
CN113407878B (zh) * 2021-08-18 2022-02-08 深圳市明源云客电子商务有限公司 页面适配方法、显示终端及可读存储介质
CN113934339B (zh) * 2021-09-14 2024-11-29 南方电网数字平台科技(广东)有限公司 一种基于rem的页面自适应布局的方法及装置
CN114237789A (zh) * 2021-11-24 2022-03-25 浙江大学 一种基于uni-app的满足适老化的自适应框架及使用方法
CN114296674B (zh) * 2021-12-30 2024-03-12 北京天融信网络安全技术有限公司 屏幕适配方法、装置、计算机设备及存储介质
CN115098096B (zh) * 2022-05-20 2025-10-21 北京云梦智能科技有限公司 一种html网页中基于绝对定位的响应式布局方法
CN114880607A (zh) * 2022-06-21 2022-08-09 杭州安恒信息技术股份有限公司 一种网页自适应方法、装置、设备、存储介质
CN115033335B (zh) * 2022-08-11 2023-01-10 青岛中正合力软件有限公司 一种应用于网页同屏的显示处理方法
CN116501435B (zh) * 2023-06-28 2023-09-12 北京尽微致广信息技术有限公司 一种布局处理方法、装置及计算机存储介质
CN116680034B (zh) * 2023-08-02 2023-10-27 山东依鲁光电科技有限公司 一种led异步显示屏自适应群发实现方法
CN120295585A (zh) * 2025-03-17 2025-07-11 北京安锐卓越信息技术股份有限公司 一种门票打印模板尺寸的自适应调整方法及装置

Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20110264996A1 (en) * 2003-06-03 2011-10-27 Norris Iii Forbes Holten Flexible, dynamic menu-based web-page architecture
CN102890632A (zh) * 2012-09-18 2013-01-23 深圳市融创天下科技股份有限公司 一种屏幕自适应方法、系统和终端设备
CN103513979A (zh) * 2012-06-29 2014-01-15 百度在线网络技术（北京）有限公司 一种网页自适应布局方法及装置
CN103530079A (zh) * 2013-09-30 2014-01-22 山西云途信息技术有限公司 一种适配不同分辨率的移动终端的图片显示方法及装置
CN107797801A (zh) * 2017-10-20 2018-03-13 江苏电力信息技术有限公司 一种基于多种移动终端界面的适配方法
CN109308155A (zh) * 2018-08-21 2019-02-05 中国平安人寿保险股份有限公司 调整页面的方法、装置、计算机设备及存储介质

Family Cites Families (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US7210099B2 (en) * 2000-06-12 2007-04-24 Softview Llc Resolution independent vector display of internet content
US7362311B2 (en) * 2003-04-07 2008-04-22 Microsoft Corporation Single column layout for content pages
KR101494285B1 (ko) * 2008-04-15 2015-02-23 오페라 소프트웨어 에이에스에이 전자 문서의 선택 영역 표시 시 텍스트의 동적 래핑 방법 및 장치
US20130305145A1 (en) * 2012-05-09 2013-11-14 Ni Group Limited A Method of Publishing Digital Content
CN109683895A (zh) * 2018-12-21 2019-04-26 上海哔哩哔哩科技有限公司 基于css预处理器的网页适配多种浏览器尺寸的方法及系统

Patent Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20110264996A1 (en) * 2003-06-03 2011-10-27 Norris Iii Forbes Holten Flexible, dynamic menu-based web-page architecture
CN103513979A (zh) * 2012-06-29 2014-01-15 百度在线网络技术（北京）有限公司 一种网页自适应布局方法及装置
CN102890632A (zh) * 2012-09-18 2013-01-23 深圳市融创天下科技股份有限公司 一种屏幕自适应方法、系统和终端设备
CN103530079A (zh) * 2013-09-30 2014-01-22 山西云途信息技术有限公司 一种适配不同分辨率的移动终端的图片显示方法及装置
CN107797801A (zh) * 2017-10-20 2018-03-13 江苏电力信息技术有限公司 一种基于多种移动终端界面的适配方法
CN109308155A (zh) * 2018-08-21 2019-02-05 中国平安人寿保险股份有限公司 调整页面的方法、装置、计算机设备及存储介质

Cited By (17)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113836470A (zh) * 2021-09-29 2021-12-24 浪潮卓数大数据产业发展有限公司 一种构建响应式数据展示页面的方法及设备、介质
CN116009802A (zh) * 2021-10-22 2023-04-25 华为技术有限公司 页面显示方法、电子设备及计算机可读存储介质
CN113886744A (zh) * 2021-12-08 2022-01-04 浙江口碑网络技术有限公司 内容渲染方法、装置、电子设备及存储介质
WO2023103869A1 (zh) * 2021-12-08 2023-06-15 拉扎斯网络科技（上海）有限公司 内容渲染方法、装置、电子设备及存储介质
WO2023103933A1 (zh) * 2021-12-10 2023-06-15 拉扎斯网络科技（上海）有限公司 内容渲染方法、装置、电子设备、存储介质和程序产品
CN114442890A (zh) * 2021-12-28 2022-05-06 北京沃东天骏信息技术有限公司 用于移动端网页的信息分析方法、装置、设备和可读介质
CN114816182A (zh) * 2022-03-21 2022-07-29 昭通亮风台信息科技有限公司 可视化屏幕的地图展示方法、装置、设备及介质
CN115129603A (zh) * 2022-07-08 2022-09-30 中国银行股份有限公司 一种ui的检查方法及装置
CN115202657A (zh) * 2022-07-15 2022-10-18 珍岛信息技术（上海）股份有限公司 一种基于vw特性的页面自适应布局方法
CN115080027A (zh) * 2022-08-24 2022-09-20 深圳市信润富联数字科技有限公司 web页面自动适配方法、装置、设备及存储介质
CN115617339A (zh) * 2022-11-09 2023-01-17 天翼数字生活科技有限公司 一种前端设计稿自动兼容多尺寸屏幕方法及其相关装置
CN116048507A (zh) * 2022-12-22 2023-05-02 大唐互联科技(武汉)有限公司 弹性布局页面处理方法、装置、电子设备及存储介质
CN116578219A (zh) * 2023-04-28 2023-08-11 北京洞悉网络有限公司 适用于左右双屏的表单页面自适配展示方法、装置、计算机设备及计算机可读存储介质
CN117112955A (zh) * 2023-08-17 2023-11-24 网易（杭州）网络有限公司 白屏检测方法、装置及电子设备
CN117194825A (zh) * 2023-09-22 2023-12-08 中电云计算技术有限公司 针对全局缩放的前端布局方法、存储介质、设备及装置
CN119441658A (zh) * 2025-01-08 2025-02-14 浙江网盛数新软件股份有限公司 基于web端的自由网格布局转换系统、方法及存储介质
CN120448657A (zh) * 2025-07-09 2025-08-08 杭州秋果计划科技有限公司 文本显示方法、电子设备和存储介质

Also Published As

Publication number Publication date
CN110837617A (zh) 2020-02-25
CN110837617B (zh) 2024-05-07

Similar Documents

Publication Publication Date Title
WO2021068331A1 (zh) 一种网页自适应布局方法、服务器及计算机可读存储介质
US20220261129A1 (en) Display controlling method, terminal, information processing apparatus, and storage medium
CN111984351A (zh) 页面适配方法、电子设备、计算机可读存储介质
CN113934339B (zh) 一种基于rem的页面自适应布局的方法及装置
US9766860B2 (en) Dynamic source code formatting
CN103678622A (zh) 瀑布流式图片动态呈现的方法及装置
CN102364460B (zh) 基于移动终端的页面自动放大方法和系统
US11112927B2 (en) Digital content automated layout system
US8751924B2 (en) Rule-based grid independent of content
US11151314B2 (en) Extensible grid layout
US7434174B2 (en) Method and system for zooming in and out of paginated content
CN103648055A (zh) 智能电视浏览器的屏幕自适应方法和装置、智能电视
WO2022116936A1 (zh) 一种界面布局方法、电子设备和计算机可读存储介质
KR20150095658A (ko) 수정 동안 콘텐츠의 영역의 레이아웃 유지 기법
CN112434487B (zh) 一种图文排版方法、装置及电子设备
CN114996618A (zh) 图像显示方法、装置、计算机设备及存储介质
CN111694493B (zh) 一种网页截图方法、计算机设备及可读存储介质
CN112558969A (zh) 一种网页表单生成方法、装置、设备及介质
WO2025020756A1 (zh) 自适应可视区域的显示方法、装置、系统及介质
CN106168959A (zh) 网页布局方法及装置
CN119961546A (zh) 一种智能自适应布局引擎与页面组件重构方法、装置
CN113656020A (zh) 一种基于ReactNative的图片展示组件开发方法及相关组件
CN111475248A (zh) 一种rtl处理方法、系统、存储介质及电子设备
CN106575303A (zh) 显示网页的方法和设备
CN113792244A (zh) 网页适配方法、系统及相应计算机设备和存储介质

Legal Events

Date Code Title Description
121 Ep: the epo has been informed by wipo that ep was designated in this application

Ref document number: 19948666

Country of ref document: EP

Kind code of ref document: A1

NENP Non-entry into the national phase

Ref country code: DE

122 Ep: pct application non-entry in european phase

Ref document number: 19948666

Country of ref document: EP

Kind code of ref document: A1