WO2015196822A1

WO2015196822A1 - Method and device for adapting webpage to screen layout

Info

Publication number: WO2015196822A1
Application number: PCT/CN2015/072948
Authority: WO
Inventors: 许国庆
Original assignee: 广州市动景计算机科技有限公司
Priority date: 2014-06-25
Filing date: 2015-02-12
Publication date: 2015-12-30
Also published as: CN105224564A; CN105224564B

Abstract

A method and device for adapting a webpage to screen layout. The method comprises: calculating the width of each node of a layout tree (S101); for nodes of which the widths are greater than the width of an intelligent terminal screen, limiting the widths of these nodes, modifying the styles of these nodes, and conducting layout in accordance with a screen adaptation rule (S104); and for nodes of which the widths are less than or equal to the width of the intelligent terminal screen, not conducting style processing, conducting layout in accordance with a standard flow, and reserving the original styles thereof (S103). Therefore, on the basis of adapting a webpage page to the screen, the original style of the page is reserved to a greater extent, so that the page display has better effects and visual experience. Moreover, by means of the method and device, the layout is only conducted on the nodes of which the widths are greater than the width of the screen using the screen adaptation rule, so that it is not easy to conflict with the standard flow generally, thereby solving the problem caused by the fact that it is difficult to achieve compatibility among various writing styles of pages.

Description

Web page adaptation screen layout method and device

Technical field

The present invention relates to the field of web page layout technology, and in particular, to a web page adaptation screen layout method and apparatus.

Background technique

With the popularity of mobile terminals such as smartphones and tablets and the rapid development of mobile network technologies, using mobile terminals to access the Internet has become the norm in people's lives. However, the current webpage of the website is mainly designed for the computer screen. When the user browses the website using the mobile terminal, due to the limitation of the screen size of the mobile terminal, the webpage display often appears deformed, disordered, and the content is lost, which greatly reduces the browsing experience of the user. .

In order to make the webpage display properly on the mobile terminal and improve the user experience, the browser usually modifies all the webpage elements of the webpage, and organizes the content into a data stream for layout according to the standard of all webpage elements not exceeding one screen width. This method only has a good display of pictures and texts. The original layout and style of the webpage are completely destroyed, and the problem of the typesetting characteristics of the original webpage is lost.

Summary of the invention

In the embodiment of the present application, a webpage adaptation screen layout method and device are provided to solve the problem that the related webpage layout technology cannot retain the original webpage layout and style.

In order to solve the above technical problem, the embodiment of the present application discloses the following technical solutions:

According to a first aspect of the embodiments of the present application, a webpage adaptation screen layout method is provided, including:

Calculating the width of each node in the web page layout tree;

Determine whether the width of each node is less than or equal to the screen width;

If the width of the node is less than or equal to the screen width, the original style of the node is retained, and the node is typeset according to a standard flow; otherwise, the style of the node is modified, and the node is typeset according to the adaptive screen rules.

Optionally, the calculating the width of each node in the webpage layout tree includes:

Traversing the nodes of the web page layout tree;

Determine whether the width value is set in the cascading style sheet of each node;

If the width value is set in the cascading style sheet of the node, the width of the cascading style sheet of the node is the width of the node;

If the width value is not set in the cascading style sheet of the node, all child nodes of the node are searched, and the width of the child node having the largest width is the width of the node, and the width of the child node is a cascading of the child nodes. The width of the style sheet;

If the width value is not set in the cascading style sheet of the node, and the width value is not set in the cascading style sheet in all the child nodes of the node, the width of the node is set to be less than or equal to the width of the screen.

Optionally, the modifying the style of the node includes:

Modifying the width value and the maximum width value of the cascading style sheet of the node such that the width value and the maximum width value of the cascading style sheet are smaller than the screen width;

Modifying the resolution of the padding attribute and the margin attribute of the cascading style sheet element box model in the node such that the resolution of the padding attribute and the margin attribute are respectively less than or equal to their preset values.

Optionally, the adapting to the screen rule layout includes:

After modifying the style of the node, the height of the element content of the node is the layout height of the node, and the typesetting is performed according to the layout height of the node;

The floating element is dynamically stretched, and after the n floating elements are typeset in one line, when there is a blank area on the right side of the line, the width value of the floating element is set to the floating After the minimum width value of the element, determining whether the blank area on the right side of the line is greater than the width of one or more of the floating elements, when the blank area on the right side of the line is larger than one or more of the floating elements In the width, one or more of the floating elements are added to the blank area on the right side of the line, where n is the number of the floating elements typeset in one line when typesetting according to a standard process.

According to a second aspect of the embodiments of the present application, a webpage adaptation screen layout apparatus is provided, including:

a calculation unit, configured to calculate a width of each node in the webpage layout tree;

a first determining unit, configured to determine whether a width of each node is less than or equal to a screen width;

a first execution unit, configured to reserve an original style of the node when the width of the node is less than or equal to a screen width, and typeset the node according to a standard process;

a second execution unit, configured to modify a style of the node when the width of the node is greater than a width of the screen, and format the node according to an adaptive screen rule.

Optionally, the calculating unit includes:

a first execution subunit, configured to traverse a node of a webpage layout tree;

a first determining subunit, configured to determine whether a width value is set in a cascading style sheet of each node;

a second execution subunit, configured to use a width of the cascading style sheet of the node as a width of a node when a width value is set in a cascading style sheet of the node;

a third execution subunit, configured to find all child nodes of the node when a width value is not set in the cascading style sheet of the node;

a second determining subunit, configured to determine whether a width value is not set in a cascading style sheet of all child nodes of the node;

a fourth execution subunit, configured to set a width of the node to be less than or equal to a width of the screen when a width value is not set in a cascading style sheet of all child nodes of the node;

And a fifth execution subunit, configured to: when a width value is set in the cascading style sheet of the child node having the node, the width of the child node having the largest width is the width of the node.

Optionally, the second execution unit includes:

A style modification subunit for modifying the style of a node;

Adapt to the screen rule layout sub-unit, used to format the nodes according to the rules of the screen.

Optionally, the modified style subunit includes:

a width modification sub-unit, configured to modify a width value and a maximum width value of the cascading style sheet of the node, so that the width value and the maximum width value of the cascading style sheet are smaller than the screen width;

The margin modification subunit modifies the resolution of the padding attribute and the margin attribute of the cascading style sheet element box model in the node, so that the resolution of the padding attribute and the margin attribute are respectively less than or equal to their preset values.

Optionally, the adapting screen rule typesetting subunit includes:

a high typesetting subunit, configured to modify a node's style, the height of the element content of the node is a layout height of the node, and typeset according to a layout height of the node;

Dynamically stretch subunits for dynamically stretching floating elements.

Optionally, the dynamic stretching subunit includes:

a third determining subunit, configured to determine whether there is a blank area on the right side of the line after the row of n floating elements is determined;

a sixth execution subunit, configured to set a width value of the floating element to a minimum width value of the floating element when a blank area exists on a right side of the row;

a fourth determining subunit, configured to: when a blank area exists on a right side of the row, set a width value of the floating element to a minimum width value of the floating element, and determine a blank area on a right side of the row Whether it is greater than the width of one or more of the floating elements;

a seventh execution subunit, configured to add one or more of the floating areas in a blank area to the right of the row when a blank area to the right of the row is greater than a width of one or more of the floating elements element,

Where n is the number of the floating elements typeset in a line when typesetting according to a standard process.

The application also provides a webpage adaptation screen layout apparatus, comprising a processor, the processor is configured to execute the following program unit:

The present application also provides a computer readable medium having program code executable by a processor, which, when executed, causes the processor to perform the steps of: calculating a width of each node in a web page layout tree; Whether the width of each node is less than or equal to the screen width; and if the width of the node is less than or equal to the screen width Degree, the original style of the node is retained, and the node is typeset according to a standard process; otherwise, the style of the node is modified, and the node is typeset according to the adaptive screen rules.

The technical solution disclosed in the embodiment of the present application calculates the width of each node of the typesetting tree, limits the width of the node to the node of the smart terminal screen, limits the width of the node, modifies the style of the node, and formats according to the adaptive screen rules. The display of the node can be adapted to the screen; the node whose width is less than or equal to the screen of the smart terminal is not styled, and is formatted according to a standard process, retaining its original style. The technical solutions disclosed in the embodiments of the present application include the following beneficial effects:

First, on the basis of ensuring that the webpage page adapts to the screen, the original layout and style of the page are more reserved, so that the page display has better effects and visual experience;

Second, the solution is simple and optimizes compatibility between various web page scripts. This scheme retains the original style of a large number of page nodes, and only modifies the styles of the nodes whose width is larger than the screen and uses the screen rules to adapt to the screen rules. Therefore, it is generally not easy to conflict with the standard process, which reduces the difficulty in compatibility between various page writing methods. problem.

DRAWINGS

In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings used in the embodiments or the description of the prior art will be briefly described below, and it will be apparent to those skilled in the art that In other words, other drawings can be obtained based on these drawings without paying for creative labor.

1 is a diagram showing the structure of a computer having a browser kernel according to an embodiment of the present application;

2 is a schematic diagram of a block model of a CSS provided according to an embodiment of the present application;

3 is a schematic flowchart of a method for adapting a webpage to a screen according to an embodiment of the present application;

4 is a schematic flowchart of calculating a width of each node in a webpage layout tree in the method shown in FIG. 3;

FIG. 5 is a schematic structural diagram of a webpage adaptation screen typesetting apparatus according to an embodiment of the present application;

Figure 6 is a schematic structural view of a computing unit in the apparatus shown in Figure 5;

Figure 7 is a schematic structural view of a second execution unit in the apparatus shown in Figure 5;

8 is a schematic structural diagram of a style modification subunit in the second execution unit shown in FIG. 7;

9 is a schematic structural diagram of a screen-alignment type sub-unit adapted to a screen in the second execution unit shown in FIG. 7;

FIG. 10 is a schematic structural diagram of a dynamic stretching subunit in the adaptive screen layout type subunit shown in FIG. 9.

detailed description

The technical solutions in the embodiments of the present application are clearly and completely described in the following, in which the technical solutions in the embodiments of the present application are clearly and completely described. The embodiments are only a part of the embodiments of the present application, and not all of them. All other embodiments obtained by a person of ordinary skill in the art based on the embodiments of the present application without departing from the inventive scope shall fall within the scope of the application.

1 is a diagram of a structure of a computer having a browser kernel provided in accordance with an embodiment of the present application.

1, a structure of a computer having a browser kernel provided in accordance with an embodiment of the present invention. The computer can be implemented as various types of computer devices, such as desktops, portable computers, tablets, smart phones, personal data assistants (PDAs), or other types of computer devices, but is not limited to any particular form. The computer can include a processing module 100, a storage subsystem 200, an input device 300, a display 400, a network interface 500, and a bus 600.

The processing module 100 can be a multi-core processor or multiple processors. In some embodiments, processing module 100 can execute executable instructions stored on storage subsystem 200. In the embodiment illustrated in FIG. 1, the processing module 100 is provided with an operating system 110 and a browser 120 running on the operating system 110. The browser 120 includes a typesetting engine (Webcore) 1231.

In the structure shown in FIG. 1, the typesetting engine 1231 further includes three modules: a parsing module, a typesetting module, and a rendering module. The parsing module can in turn include an HTML parser and a CSS parser. The HTML parser includes a tag generator and a tree constructor. The tag generator is used to parse the input web page content (usually the XML document format) into multiple HTML tags. HTML tags include start tags, end tags, attribute names, and attribute values. The tag generator identifies these tags and passes them to the tree constructor, then receives the next character to identify the next tag; iterates until the end of the input.

Storage subsystem 200 can include various types of storage units, such as system memory, read only memory (ROM), and persistent storage.

The user interface can be provided by one or more user input devices 300, display 400, and/or one or more other user output devices. Input device 300 can include means for a user to input signals to a computer that can interpret such signals containing particular user requests or information. In some embodiments, the web address may be input to the user interface through the keyboard, and the browser 120 is required to display the webpage content corresponding to the input web address through the user interface. In some embodiments, input device 300 can include some or all of a keyboard button, touch screen, mouse or other pointing device, scroll wheel, click wheel, dial, button, switch, keypad, microphone, and the like.

Display 400 can display images generated by a computer, and can include various types of image devices.

In some embodiments, the user interface can be provided through a graphical user interface. Certain areas of the display 400 define some visual graphical elements as interactive objects or control objects that the user selects through the input device 300.

Network interface 500 provides sound and/or data communication functionality to the computer.

The bus 600 can include various systems, external devices, and chip buses that connect various components within the computer.

With proper programming, the processing device 100 can implement multiple types of functions for the computer. For example, processing device 100 downloads web page content from a server to storage subsystem 200 via network interface 500. The processing device 100 then reads the web page file from the storage subsystem 200 to the typesetting engine 1231. The parsing module of the typesetting engine 1231 parses the web page and constructs it into a DOM tree. When the DOM tree is created, the typesetting module of the typesetting engine 1231 receives the style information of the CSS parser, constructs a new internal drawing model (RenderobjectTree, a rendering object tree, also called a typesetting tree), and calculates various elements in the model by the typesetting module. The position and size are then drawn from the model to the graphics by the rendering module.

In the embodiment shown in Figure 1, the primary role of the browser is to display web pages. Currently, a web page is a document written in HTML. With the development of technology, the style of web pages is now more abundant, using CSS style language and JavaScript language to control the display characteristics of web pages. Among them, CSS is used to describe the display information of the webpage, and the JS code is used to control the internal logic of the webpage.

CSS (Cascading Style Sheet) is a style sheet language that defines a series of style rules that act on each element to describe the display information of the element and control the display style of the web page.

Referring to FIG. 2, FIG. 2 is a schematic diagram of a block model of a CSS according to an embodiment of the present application. Each visual element in a web page is a network node. The layout of each visual element in an HTML page is designed according to the box model. CSS describes the layout structure of HTML elements through a box model (also known as a box model). A box model is divided into four parts from the inside out: the margins, the border, the padding, and the content. Web pages can achieve specific layout effects by setting these style properties on the elements.

Web developers have two ways to use CSS. One is to put the CSS code into the element "style", called the internal style sheet; the other is to reference the external CSS document, called the external style sheet. In addition, there is one Put the CSS code inside the <head> tag, called the internal style sheet. The internal style sheet is the default style sheet for the browser, and web page developers cannot control this part of the style sheet.

When the CSS parser parses CSS, whether it's using inline CSS code or an external style sheet.

The CSS parsing process refers to the process of changing the CSS string into the internal rules representation of the typesetting engine after being processed by the CSS parser. When the browser needs to parse the CSS content, it calls the parser to parse the CSS style, and finally stores the created result. After the CSS parser works, the rendering module of the layout engine selects appropriate style information for some visual nodes of the DOM tree according to the parsing result of the CSS parser to form a new internal drawing model. The new internal drawing model is a tree of visual elements in the order in which they are displayed, as well as a visual representation of the document. Its purpose is to let the browser draw content in the correct order. The nodes of each new internal drawing model represent a rectangular area, usually corresponding to the CSS box of the relevant node; where the type of the box is affected by the "display" style attribute associated with the node. In addition, the node type of the new internal drawing model is also one of the considerations, such as form controls and tables correspond to special frameworks.

FIG. 3 is a schematic flowchart of a webpage adaptation screen layout method according to an embodiment of the present application. As shown in FIG. 3, the method includes the following steps.

In step S101, calculating a width of each node in the webpage layout tree;

In step S102, it is determined whether the width of each node is less than or equal to the screen width;

In step S103, according to the determination result of step S102, if the width of the node is less than or equal to the screen width, the original style of the node is retained, and the node is typeset according to a standard process;

In step S104, according to the judgment result of step S102, if the width of the node is not less than or equal to the screen width, the style of the node is modified, and the node is typeset according to the adaptive screen rule.

The mobile terminal browser parses the page elements included in the acquired webpage resource, calculates the width of each node in the process of generating the typesetting tree node according to the parsing, or generates all the typesetting tree nodes according to the parsing. After that, it traverses the layout tree and calculates the width of each node.

In the step S101, the width of each node in the webpage layout tree is calculated. In a possible implementation manner, the following steps may be included:

Traversing the nodes of the web page layout tree;

If the width value is not set in the cascading style sheet of the node, and the width value is not set in the cascading style sheet of all the child nodes of the node, the width of the node is set to be less than or equal to the width of the screen.

4 is a flow chart showing the calculation of the width of each node in the webpage layout tree in the method shown in FIG. 3. The step shown in FIG. 4 corresponds to the step of calculating the width of each node in the layout tree in one possible implementation manner. . As shown in FIG. 4, in a possible implementation manner, calculating a width of each node in the layout tree may include:

In step S201, traversing a node of a webpage layout tree;

In step S202, it is determined whether a width value is set in the cascading style sheet of each node;

In step S203, when the width value is set in the cascading style sheet of the node, the width of the cascading style sheet of the node is the width of the node;

In step S204, when the width value is not set in the cascading style sheet of the node, all the child nodes of the node are searched;

In step S205, it is determined whether the width value is not set in the cascading style sheet of all the child nodes of the node;

In step S206, when the result of the determination in step S205 is that the width value is not set in the cascading style sheet of all the child nodes of the node, the width of the node is set to be less than or equal to the width of the screen;

In step S207, when the result of the determination in step S205 is that the width value is set in the cascading style sheet of the child node having the node, the width of the child node having the largest width is the width of the node.

In step S206, the width of the node is set to be less than or equal to the width of the screen, so that the width of the node is a width value less than or equal to the width of the screen, and the node is typeset according to a standard process.

Wherein, in step S207, when a child node having a width value set in the cascading style sheet exists in a child node of the node, the width of the child node having the largest width among the child nodes in which the width value is set in the cascading style sheet is taken as Place The width of the node. Finding the child node with the largest width in the child node may adopt a conventional round-robin method of finding the maximum value, for example, setting the intermediate variable max to find all the child nodes of the node, in the process of searching all the child nodes of the node, The width of the first child node whose width value is set in the cascading style sheet is taken as the initial value of max; in the subsequent search process, the width of the child node whose width value is set in the cascading style sheet is compared with max, If the width of the child node is less than max, the value of max is kept unchanged, and if the width of the child node is greater than or equal to max, let max be equal to the width of the child node; and so on, until the search is completed. All the child nodes of the node, the width of the set node is max, and the max is the width of the child node with the largest width. Since the width of the set node is to determine the size of the width of the node, it is not necessary to know which sub-node of the node corresponds to the maximum width in the process of finding, but knowing which maximum node corresponds to which sub-node of the node does not affect the present application. The principle.

In another possible implementation manner, if the width of each node is calculated in the process of generating the typeset tree node according to the parsing, when the width value is not set in the cascading style sheet of a certain node, the downward direction is continued. The layer parses the child nodes of the node, the width of the child node having the largest width is the width of the node, and the width of the child node is the width of the cascading style sheet of the child node; if all the child nodes of the node are After the parsing is completed, and the width values are not set in the cascading style sheets of the child nodes of all the nodes, the width of the nodes is set to be less than or equal to the width of the screen.

In step S103, according to the judgment result of step S102, if the width of the node is less than or equal to the screen width, the original style of the node is retained, and the node is typeset according to a standard flow.

Modifying the style of the node in step S104 may include, but is not limited to, the following rules:

Modify the width and maximum width values of the cascading style sheet of the node such that the width and maximum width values of the cascading style sheet are less than or equal to the screen width. In web page layout, the size attribute of the node's cascading style sheet includes width, maximum width, and minimum width, etc., wherein the width of the cascading style sheet is used to set the width of the element content area, and is used to determine the actual width of the object; the cascading style sheet The maximum width is used to limit the maximum width of the element, preventing element overflow, and along with the minimum width of the cascading style sheet, to prevent web page pages from being distorted due to being too large or too small. In the embodiment disclosed in the present application, if the width of the node is greater than the width of the screen, the width value of the cascading style sheet of the node is modified, so that the width value of the cascading style sheet is smaller than the screen width, that is, the width of the element content area does not exceed the screen. Width so that the element content does not exceed the screen when displayed. And modify the maximum width value of the node's cascading style sheet so that the maximum width value in the cascading style sheet is smaller than the screen width, thereby further preventing the element from overflowing the screen or deforming when displayed. If the width of the cascading style sheet of the set node is equal to the width of the screen, This will cause some of the display content to be close to the screen, affecting the visual experience, so it is preferable to set the width of the cascading style sheet of the node to be smaller than the width of the screen. The minimum width of the cascading style sheet is by default smaller than the width of the cascading style sheet, so the setting of the minimum width of the cascading style sheet is not described.

Modifying the resolution of the padding attribute and the margin attribute of the cascading style sheet in the node such that the resolution of the padding attribute and the margin attribute are respectively less than or equal to their preset values. In a cascading style sheet, the actual width of an element is determined by the sum of the width of the element content, the border property, the fill property, and the margin property. The value of the border property is usually small, so the adjustment of the border property can be ignored. The fill property is the interval between the content of the element and the border; the margin property is the interval between one element and another. The Fill and Margin properties are used to block the elements.

Modifying the resolution of the padding attribute and the margin attribute of the cascading style sheet element box model in the node, so that the resolution of the padding attribute and the margin attribute are respectively less than or equal to their own preset values, thereby preventing the element content from being displayed. There are too many blank areas around the screen, further expanding the display space of the element content on the screen, and avoiding the problem that the fill attribute and the margin attribute are too large to cause the text content to be broken in the web page. The preset value of the fill property and the preset value of the margin property may be the same or different. For most current mobile phone screens, the preset value of the fill attribute and the preset value of the margin attribute can be set to 6px, so that the blank area of the screen is not too big or too small, so that the user has a better visual experience. The preset value of the padding attribute and the preset value of the margin attribute may also be determined according to the screen size of the smart terminal used by the current user. For example, when the screen is large, a larger padding attribute preset value and a margin attribute may be taken. Set the value. When the screen is small, you can take a smaller padding property preset and margin property preset.

By modifying the width and maximum width values of the node's cascading style sheet, and modifying the fill and margin properties of the cascading style sheet element box model in the node, the display of the element content can be adapted to the width of the screen to avoid overflow. The content is incomplete and deformed.

In a preferred embodiment, the modifying the style of the node may further include:

Sets the vertical alignment property of all elements to baseline (the element is placed on the baseline of the parent element). That is, a uniform vertical alignment property is set for all elements, and the vertical alignment property is baseline, and the baseline value of the vertical alignment property refers to placing the element on the baseline of the parent element, so that all the elements are displayed neatly and prevented from being vertical due to the element. Elements caused by inconsistent alignment attributes show confusion in the vertical direction.

Filter the background image with a resolution greater than the preset value. The background image with the resolution greater than the preset value is difficult to maintain the original coordination effect with the text or context of the foreground after the node adapts to the screen rules. Therefore, the filtering resolution is larger than the background image of the preset image to avoid the page display effect. Uncoordinated, the page display is more concise, and the background image with resolution less than the preset value can be retained. For most current mobile phone screens, the preset value may be 240*300px, and the preset value may also be set according to the screen size of the smart terminal.

Limit the font size of text elements so that the font size does not exceed the font defaults. The limiting the font size of the text element includes: if the font size of the text element is less than or equal to the font preset value, the font size of the text element is not changed, and if the font size of the text element is greater than the font preset value, modifying the The font size of the text element such that the text font size is equal to the font preset value. Limiting the font size of text elements can prevent fonts from being too large to cause overlap after folding. For most current mobile phone screens, the font default value can be set to 20, which makes the font display clear and has good visibility. To avoid folding, the font preset value can also be set according to the screen size of the smart terminal.

Sets the line height of all text elements to be 1.6 times the font size of the text element. Setting the line height of all text elements to 1.6 times the font size of the text element can make the line spacing of the text moderate, not too close or too sparse, and improve the visual experience of text display.

Set the indentation of all text elements to the same value. Setting the indentation of all text elements to the same value allows the text to be indented and better aligned when the paragraph is wrapped, resulting in a better display. The same value may be a conventional text indentation value, such as 2px, or may be determined according to the screen size of the smart terminal.

Set the text element to be left aligned and set the picture element to center aligned. Setting the text element and picture element to a uniform and visually pleasing alignment format can improve the user's visual experience with the graphic display.

In step S104, the adaptation screen rule layout may include but is not limited to the following rules:

After modifying the style of the node, the height of the element content of the node is the layout height of the node, and the typesetting is performed according to the layout height of the node. After modifying the style of the node, since the width of the node changes, that is, the width of the element content of the node changes, the height of the element content of the node may change accordingly, so the height of the content of the changed element is the node. The height of the layout, rather than the height of the cascading style sheet of the node, is the height of the layout of the node, so that the content of the element is not displayed when it is displayed.

Dynamically stretching a float element, after dynamically formatting a floating element in a row, when a blank area exists on the right side of the line, the width value of the floating element is set to After the minimum width value of the floating element, determining whether the blank area on the right side of the line is greater than the width of one or more of the floating elements, when the blank area on the right side of the line is larger than one or more When floating the width of an element, one or more of the floating elements are added to the blank area to the right of the line. Where n is the number of the floating elements typeset in a line when typesetting according to a standard process. Floating element attributes include width, minimum width, and maximum width. Setting the width of the floating element to its minimum width value reduces the width of the floating element. When only the condition that the blank area on the right side of the line is larger than the width of one or more of the floating elements is satisfied, one or more of the floating elements are added to the blank area on the right side of the line. When there is no blank area on the right side of the line In the case of a domain, or when there is a blank area on the right side of the line but the blank area on the right side of the line is smaller than the width of one of the floating elements, the layout of the floating element is not processed.

Corresponding to the step of dynamically stretching the floating element, the dynamic stretching floating element may include the following process steps:

(1) After judging a row of n floating elements, whether there is a blank area on the right side of the line;

(2) when the judgment result of the step (1) is that there is a blank area on the right side of the line, the width value of the floating element is set to the minimum width value of the floating element;

(3) after step (2) setting the width value of the floating element to the minimum width value of the floating element, determining whether the blank area on the right side of the line is greater than the width of one or more floating elements;

(4) when the judgment result of the step (3) is that the blank area on the right side of the line is larger than the width of one or more floating elements, one or more of the blank areas in the right side of the line are added. Floating element.

In a possible implementation manner, step (3) may be: acquiring a width value of a blank area on the right side of the row, and dividing a width value of the blank area on the right side of the row by a floating element. a width value, rounding the obtained result, and determining whether the rounded result m is greater than or equal to 1;

Correspondingly, step (4) is: when the result of the determination in step (3) is that m is greater than or equal to 1, m floating elements are added to the blank area on the right side of the row;

If the judgment result of the step (3) is that there is no blank area on the right side of the line, or if the result of the judgment in the step (3) is that m is less than 1, the dynamic stretch floating element flow is ended, The layout of floating elements is not processed.

By dynamically stretching the floating elements, you can expand the displayable area of the floating elements, and type as many floating elements as possible in one line, thereby avoiding the display confusion and unevenness caused by the folding of the floating elements of the node's style, and also avoiding the screen. There are too many blank areas on the top.

In a preferred embodiment, the adapting to the screen rule layout may further include:

Expand all the Frame and Iframe elements. Since another page is usually nested in the frame element and the floating frame element, it is difficult to view the nested page without expanding them. Expands all the frame elements in the FrameSet, as well as the floating frame elements in all the pages, to display all the content in the frame elements and floating frame elements, preventing the content from being missing due to the inability to display the nested pages in the screen layout.

Type a table by line. Typesetting the rows by row instead of tabular. The line-by-line typesetting table is: sequentially arranging cells in the same row of the table in a layout line in the order of the cells themselves, and continuing to typeset a cell in a typesetting line that has not been typeset. When the cells in the same row in the table are typeset, the cells in the next row in the table are further typeset.

The line layout table can better adapt the table to the size of the screen, so that the table can be displayed on the screen in a complete and orderly manner, preventing the table content from being lost and cell deformation, and preventing the table contents from overlapping and confusing after the node's style is modified. Happening.

Remove excess white space. The removing the excess blank area includes: for a plurality of empty labels (<br>) that appear consecutively, only one empty label is reserved, and other empty labels are deleted, thereby compressing the height of the blank line; removing the paragraph label (<p>) , a single label in the cell label (<td>) and the block label (<div>), and the separate space is removed: when there is only one in a row and no other elements or content, ignore This line does not make a layout for this line. Removing unnecessary white space can make the effect of adapting to screen rule layout more compact.

Keep the aspect ratio of your images, videos, and plugin elements. The aspect ratio of the image, video, and plug-in elements is: obtaining the original aspect ratio of the image, video, and plug-in elements, and when the style of the node is modified, respectively, according to the width of the modified image, video, and plug-in elements, and The original aspect ratio adjusts the height of the modified image, video, and plug-in elements. For example, the original size of the image is 400*600px, the original aspect ratio is 3:2, and the width of the image is changed to 200px after the style of the node is modified. , the height of the image is adjusted to 300px, and the size of the image is adjusted to 200*300px.

Keep the aspect ratio of images, videos, and plug-ins for better display and prevent images, videos, and plug-ins from morphing as they appear.

The method for adapting a screen of a webpage according to an embodiment of the present application is to modify a style of the node only for a node whose width is larger than a screen of the smart terminal, and to perform layout according to an adaptive screen rule, so that the display of the node can adapt to the screen. And has a beautiful effect and visual experience; and the node whose width is less than or equal to the screen of the smart terminal retains its original style and is typeset according to standard procedures. Therefore, the original layout, style and style of the page are more preserved on the basis of ensuring that the webpage is adapted to the screen, and since only a part of the nodes are changed, the typesetting resources are saved, and it is generally not easy to conflict with the standard process, and is applicable to various page writing methods. . Through the description of the above method embodiments, those skilled in the art can clearly understand that the present application can be implemented by means of software plus a necessary general hardware platform, and of course, by hardware, but in many cases, the former is better. Implementation. Based on such understanding, the technical solution of the present application, which is essential or contributes to the prior art, may be embodied in the form of a software product stored in a storage medium, including a plurality of instructions for making a Computer device (can be a personal computer, server, or network device, etc.) to execute this application All or part of the steps of the methods described in the various embodiments are contemplated. The foregoing storage medium includes various types of media that can store program codes, such as a read only memory (ROM), a random access memory (RAM), a magnetic disk, or an optical disk.

According to the second aspect of the embodiments of the present application, a webpage adaptation screen layout apparatus provided by the embodiment of the present application is provided. The embodiment of the present application further provides a webpage adaptation screen layout apparatus. FIG. 5 is a schematic structural diagram of a webpage adaptation screen layout apparatus according to an embodiment of the present disclosure. In a possible implementation manner, as shown in FIG. 5, the apparatus includes:

a calculating unit U301, configured to calculate a width of each node in the webpage layout tree;

The first determining unit U302 is connected to the calculating unit U301, and is configured to determine whether the width of each node is less than or equal to the screen width;

The first execution unit U303 is connected to the first determining unit U302, and is configured to reserve the original style of the node when the width of the node is less than or equal to the screen width, and typeset the node according to a standard process;

The second execution unit U304 is connected to the first determining unit U302, and is configured to modify the style of the node when the width of the node is greater than the width of the screen, and typeset the node according to the adaptive screen rule.

It should be noted that the foregoing first determining unit U302, the first executing unit U303, and the second executing unit U304 may be run in a computer terminal as part of the device, and may be implemented by a processor in the computer terminal. Function, the computer terminal can also be a smart phone (such as an Android phone, an iOS phone, etc.), a tablet computer, an applause computer, and a mobile Internet device (MID), a PAD, and the like.

FIG. 6 is a schematic structural view of a computing unit in the apparatus shown in FIG. 5. In a possible implementation, the computing unit U301, as shown in FIG. 6, includes:

a first execution subunit U401, configured to traverse a node of a webpage layout tree;

The first determining subunit U402 is connected to the first executing subunit U401, and is configured to determine whether a width value is set in the cascading style sheet of each node;

The second execution subunit U403 is connected to the first judging subunit U402, and is configured to use the width of the cascading style sheet of the node as the width of the node when the width value is set in the cascading style sheet of the node;

The third execution subunit U404 is connected to the first determining subunit U402, and is configured to search all the child nodes of the node when the width value is not set in the cascading style sheet of the node;

The second determining subunit U405 is connected to the third executing subunit U404, and is configured to determine whether the width value is not set in the cascading style sheet of all the child nodes of the node;

The fourth execution subunit U406 is connected to the second judging subunit U405 and the third execution subunit U404, and is configured to set the node when the width value is not set in the cascading style sheet of all the child nodes of the node. The width is less than or equal to the width of the screen;

a fifth execution subunit U407, connected to the second judging subunit U405 and the third execution subunit U404, for when the width value is set in the cascading style sheet of the child node of the node, the width is the largest The width of the child node is the width of the node.

It should be noted that the foregoing first execution subunit U401, first judgment subunit U402, second execution subunit U403, third execution subunit U404, second judgment subunit U405, fourth execution subunit U406 and The fifth execution subunit U407 can be run in the computer terminal as part of the device, and the function implemented by the above module can be executed by a processor in the computer terminal, and the computer terminal can also be a smart phone (such as an Android mobile phone, an iOS mobile phone, etc.). Tablet PCs, applause computers, and mobile Internet devices (MID), PAD and other terminal devices.

FIG. 7 is a schematic structural view of a second execution unit in the apparatus shown in FIG. 5. In a possible implementation manner, the second executing unit U304, as shown in FIG. 7, includes:

The style modification subunit U501 is used to modify the style of the node;

The screen-adapted layout sub-unit U502 is connected to the style modification sub-unit U501 for formatting the nodes according to the adaptive screen rules.

It should be noted that the above-mentioned creation pattern modification subunit U501 and the adaptation screen rule layout subunit U502 can be run in the computer terminal as part of the device, and the functions implemented by the above module can be executed by the processor in the computer terminal, the computer The terminal can also be a smart phone (such as an Android phone, an iOS phone, etc.), a tablet computer, an applause computer, and a mobile Internet device (MID), a PAD, and the like.

FIG. 8 is a schematic structural diagram of a pattern modification subunit in the second execution unit shown in FIG. 7. In a possible implementation manner, the modified style subunit, as shown in FIG. 8, includes:

a width modifying subunit U601, configured to modify a width value and a maximum width value of the cascading style sheet of the node, so that the width value and the maximum width value of the cascading style sheet are smaller than the screen width;

The margin modification subunit U602, the resolution of the padding attribute and the margin attribute of the cascading style sheet element box model in the node is modified, so that the resolutions of the padding attribute and the margin attribute are respectively less than or equal to their preset values. .

It should be noted that the width modification subunit U601 and the margin modification subunit U602 may be run in a computer terminal as part of the device, and the functions implemented by the above module may be performed by a processor in the computer terminal, and the computer terminal is also It can be a smart phone (such as Android phone, iOS phone, etc.), tablet computer, applause computer, and mobile Internet devices (MID), PAD and other terminal devices.

FIG. 9 is a schematic structural diagram of a screen-aligning sub-unit adapted to a screen in the second execution unit shown in FIG. 7. In a possible implementation manner, the adapting screen rule typesetting subunit, as shown in FIG. 9, includes:

a high typesetting subunit U701, configured to modify a node's style, the height of the element content of the node is a layout height of the node, and typeset according to the typesetting height of the node;

Dynamic stretching subunit U702 for dynamically stretching floating elements.

It should be noted that the above-mentioned height type sub-unit U701 and dynamic stretch sub-unit U702 can be run in a computer terminal as part of the device, and the functions implemented by the above modules can be executed by a processor in the computer terminal, and the computer terminal is also It can be a smart phone (such as Android phone, iOS phone, etc.), tablet computer, applause computer, and mobile Internet devices (MID), PAD and other terminal devices.

FIG. 10 is a schematic structural diagram of a dynamic stretching subunit in the adaptive screen layout type subunit shown in FIG. 9. In a possible implementation manner, the dynamic stretching subunit, as shown in FIG. 10, includes:

The third determining sub-unit U801 is configured to determine whether there is a blank area on the right side of the line after the row of n floating elements is typed;

a sixth execution sub-unit U802, connected to the third determining sub-unit U801, configured to set a width value of the floating element to a minimum width value of the floating element when a blank area exists on a right side of the row;

The fourth determining sub-unit U803 is connected to the sixth executing sub-unit U802, and is configured to set a width value of the floating element to a minimum width value of the floating element when a blank area exists on a right side of the line, Determining whether a blank area on the right side of the line is greater than a width of one or more of the floating elements;

The seventh execution subunit U804 is connected to the fourth judging subunit U803 for blanking on the right side of the row when the blank area on the right side of the row is larger than the width of one or more of the floating elements One or more of the floating elements are added to the area.

It should be noted that the third determining subunit U801, the sixth executing subunit U802, the fourth judging subunit U803, and the seventh executing subunit U804 may be run in a computer terminal as part of the device, and may be through a computer terminal. The processor in the above module performs the functions implemented by the above modules, and the computer terminal can also be a smart phone (such as an Android phone, an iOS phone, etc.), a tablet computer, a palm computer, and a mobile Internet device (MID), a PAD, and the like. .

The webpage adapting screen typesetting apparatus provided by the embodiment of the present application, by calculating the width of each node in the webpage layout tree, retaining the original style of the node whose width of the node is less than or equal to the screen of the smart terminal, and formatting according to a standard process; If the width of the node is larger than the node of the smart terminal screen, the style of the node is modified, the width of the node is limited, and the layout is adapted according to the rules of the screen, so that the display of the node can adapt to the screen, and has an aesthetic effect and a visual experience. . Therefore, the original layout, style and style of the page are more reserved on the basis of ensuring that the webpage is adapted to the screen, and since only a part of the nodes are changed, the structure is simplified, the typesetting resources are saved, and the standard process conflict is not easy, and is applicable to Typesetting of various page writing methods.

The various functional units provided by the embodiments of the present application may be operated in a mobile terminal, a computer terminal, or the like, or may be stored as part of a storage medium.

Thus, embodiments of the present invention may provide a computer terminal, which may be any computer terminal device in a group of computer terminals. Optionally, in this embodiment, the foregoing computer terminal may also be replaced with a terminal device such as a mobile terminal.

Optionally, in this embodiment, the computer terminal may be located in at least one network device of the plurality of network devices of the computer network.

In this embodiment, the computer terminal may execute the program code of the following steps in the method for acquiring a stereo heat map: acquiring data of a plane heat map of a webpage page, and the data of the plane heat map includes click data of the webpage page; A three-dimensional coordinate system is established to obtain an axonometric map; the data of the planar thermodynamic map is displayed on the isometric view to obtain a stereoscopic thermogram.

Optionally, the computer terminal can include: one or more processors, memory, and transmission means.

The memory can be used to store the software program and the module, such as the method and device corresponding to the method for acquiring the stereo heat map in the embodiment of the present invention, and the processor executes the software program and the module stored in the memory, thereby executing each A functional application and data processing, that is, the above method of acquiring a stereo heat map. The memory may include a high speed random access memory, and may also include non-volatile memory such as one or more magnetic storage devices, flash memory, or other non-volatile solid state memory. In some examples, the memory can further include These remote memories can be connected to the terminal over a network with respect to the memory remotely set by the processor. Examples of such networks include, but are not limited to, the Internet, intranets, local area networks, mobile communication networks, and combinations thereof.

The above transmission device is for receiving or transmitting data via a network. Specific examples of the above network may include a wired network and a wireless network. In one example, the transmission device includes a Network Interface Controller (NIC) that can be connected to other network devices and routers via a network cable to communicate with the Internet or a local area network. In one example, the transmission device is a Radio Frequency (RF) module for communicating with the Internet wirelessly.

Specifically, the memory is used to store preset action conditions and information of the preset rights user, and an application.

The processor can call the memory stored information and the application by the transmitting device to execute the program code of the method steps of each of the alternative or preferred embodiments of the above method embodiments.

A person skilled in the art can understand that the computer terminal can also be a smart phone (such as an Android phone, an iOS phone, etc.), a tablet computer, an applause computer, and a mobile Internet device (MID), a PAD, and the like.

A person of ordinary skill in the art may understand that all or part of the steps of the foregoing embodiments may be completed by a program to instruct terminal device related hardware, and the program may be stored in a computer readable storage medium, and the storage medium may be Including: flash disk, read-only memory (ROM), random access memory (RAM), disk or optical disk.

Embodiments of the present invention also provide a storage medium. Optionally, in this embodiment, the foregoing storage medium may be used to save the program code executed by the method for obtaining a stereo heat map provided by the foregoing method embodiment and the device embodiment.

Optionally, in this embodiment, the foregoing storage medium may be located in any one of the computer terminal groups in the computer network, or in any one of the mobile terminal groups.

Optionally, in this embodiment, the storage medium is configured to store program code for performing the following steps: acquiring data of a plane heat map of the webpage page, the data of the plane heat map including click data of the webpage page; The layer establishes a three-dimensional coordinate system to obtain an axonometric map; the data of the planar thermodynamic map is displayed on the isometric view to obtain a stereoscopic thermogram.

Alternatively, in the present embodiment, the storage medium may also be configured to store program code of various preferred or optional method steps provided by the method of acquiring a stereo heat map.

A method and apparatus for acquiring a stereo heat map according to the present invention is described above by way of example with reference to the accompanying drawings. However, it should be understood by those skilled in the art that various improvements can be made to the method and apparatus for obtaining a three-dimensional heat map proposed by the present invention without departing from the scope of the present invention. Therefore, the scope of the invention should be determined by the content of the appended claims.

For the convenience of description, the above devices are described separately by function into various units. Of course, the functions of each unit may be implemented in the same software or software and/or hardware when implementing the present application.

The various embodiments in the specification are described in a progressive manner, and the same or similar parts between the various embodiments may be referred to each other, and each embodiment focuses on the differences from the other embodiments. In particular, for the device embodiment, since it is basically similar to the method embodiment, the description is relatively simple, and the relevant parts can be referred to the description of the method embodiment. The device embodiments described above are merely illustrative, wherein the units described as separate components may or may not be physically separate, and the components displayed as units may or may not be physical units, ie may be located A place, or it can be distributed to multiple network units. Some or all of the modules may be selected according to actual needs to achieve the purpose of the solution of the embodiment. Those of ordinary skill in the art can understand and implement without any creative effort.

The application can be described in the general context of computer-executable instructions executed by a computer, such as a program module. Generally, program modules include routines, programs, objects, components, data structures, and the like that perform particular tasks or implement particular abstract data types. The present application can also be practiced in distributed computing environments where tasks are performed by remote processing devices that are connected through a communication network. In a distributed computing environment, program modules can be located in both local and remote computer storage media including storage devices.

It should be noted that, in this context, relational terms such as "first" and "second" are used merely to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply these There is any such actual relationship or order between entities or operations. Rather, the term "comprises" or "comprises" or "comprises" or "comprising" or "comprising" or "comprises" Other elements listed, or elements that are inherent to such a process, method, device, unit, or device. An element that is defined by the phrase "comprising a singular" or "an" or "an"

The above description is only a specific embodiment of the present application, so that those skilled in the art can understand or implement the present application. Various modifications to these embodiments are obvious to those skilled in the art, and the general principles defined herein may be implemented in other embodiments without departing from the spirit or scope of the application. Therefore, The application is not limited to the embodiments shown herein, but rather the broadest scope consistent with the principles and novel features disclosed herein.

Claims

A webpage adapting screen typesetting method, comprising:

Calculating the width of each node in the web page layout tree;

Determine whether the width of each node is less than or equal to the screen width;

If the width of the node is less than or equal to the screen width, the original style of the node is retained, and the node is typeset according to a standard flow; otherwise, the style of the node is modified, and the node is typeset according to the adaptive screen rules.
The webpage adaptation screen layout method according to claim 1, wherein the calculating the width of each node in the webpage layout tree comprises:

Traversing the nodes of the web page layout tree;

Determine whether the width value is set in the cascading style sheet of each node;

If the width value is set in the cascading style sheet of the node, the width of the cascading style sheet of the node is the width of the node;

If the width value is not set in the cascading style sheet of the node, all child nodes of the node are searched, and the width of the child node having the largest width is the width of the node, and the width of the child node is a cascading of the child nodes. The width of the style sheet;

If the width value is not set in the cascading style sheet of the node, and the width value is not set in the cascading style sheet in all the child nodes of the node, the width of the node is set to be less than or equal to the width of the screen.
The method for modifying a web page according to claim 1, wherein the modifying the style of the node comprises:

Modifying the width value and the maximum width value of the cascading style sheet of the node such that the width value and the maximum width value of the cascading style sheet are smaller than the screen width;

Modifying the resolution of the padding attribute and the margin attribute of the cascading style sheet element box model in the node such that the resolution of the padding attribute and the margin attribute are respectively less than or equal to their preset values.
The web page adaptation screen layout method according to claim 1, wherein the adapting to the screen rule layout comprises:

After modifying the style of the node, the height of the element content of the node is the layout height of the node, and the typesetting is performed according to the layout height of the node;

The floating element is dynamically stretched, wherein the floating element is display content of the node arranged on the webpage.
The webpage adaptation screen layout method according to claim 4, wherein the dynamically stretching the floating element comprises:

Determining whether a row has a blank area on the right side of the line after the n-th floating element is being typed, wherein the n is the number of the floating elements in the line when the typesetting is performed according to a standard process;

When the blank area exists on the right side of the line, the width value of the floating element is set to the minimum width value of the floating element.
The web page adaptation screen layout method according to claim 5, wherein after the determining whether a row has n types of the floating elements, whether there is a blank area on the right side of the line, the method further comprises:

Determining whether the blank area on the right side of the row is greater than the width of one or more of the floating elements;

When the blank area to the right of the row is larger than the width of one or more of the floating elements, one or more of the floating elements are added to the blank area to the right of the row.
A webpage adaptation screen layout apparatus, comprising:

a calculation unit, configured to calculate a width of each node in the webpage layout tree;

a first determining unit, configured to determine whether a width of each node is less than or equal to a screen width;

a first execution unit, configured to reserve an original style of the node when the width of the node is less than or equal to a screen width, and typeset the node according to a standard process;

a second execution unit, configured to modify a style of the node when the width of the node is greater than a width of the screen, and format the node according to an adaptive screen rule.
The webpage adaptation screen layout apparatus according to claim 7, wherein the calculation unit comprises:

a first execution subunit, configured to traverse a node of a webpage layout tree;

a first determining subunit, configured to determine whether a width value is set in a cascading style sheet of each node;

a second execution subunit, configured to use a width of the cascading style sheet of the node as a width of a node when a width value is set in a cascading style sheet of the node;

a third execution subunit, configured to find all child nodes of the node when a width value is not set in the cascading style sheet of the node;

a second determining subunit, configured to determine whether a width value is not set in a cascading style sheet of all child nodes of the node;

a fourth execution subunit, configured to set a width of the node to be less than or equal to a width of the screen when a width value is not set in a cascading style sheet of all child nodes of the node;

And a fifth execution subunit, configured to: when a width value is set in the cascading style sheet of the child node having the node, the width of the child node having the largest width is the width of the node.
The webpage adaptation screen layout apparatus according to claim 7, wherein the second execution unit comprises:

A style modification subunit for modifying the style of a node;

Adapt to the screen rule layout sub-unit, used to format the nodes according to the rules of the screen.
The webpage adaptation screen layout apparatus according to claim 9, wherein the modification style subunit comprises:

a width modification sub-unit, configured to modify a width value and a maximum width value of the cascading style sheet of the node, so that the width value and the maximum width value of the cascading style sheet are smaller than the screen width;

The margin modification subunit modifies the resolution of the padding attribute and the margin attribute of the cascading style sheet element box model in the node, so that the resolution of the padding attribute and the margin attribute are respectively less than or equal to their preset values.
The screen adaptation screen layout device according to claim 10, wherein the adaptation screen rule layout subunit comprises:

a high typesetting subunit, configured to modify a node's style, the height of the element content of the node is a layout height of the node, and typeset according to a layout height of the node;

Dynamically stretching the subunits for dynamically stretching the floating elements, wherein the floating elements are display contents of the nodes arranged on the webpage.
The webpage adaptation screen layout apparatus according to claim 11, wherein the dynamic stretching subunit comprises:

a third determining subunit, configured to determine whether there is a blank area on the right side of the line after the row is n types of the floating elements, wherein the n is a typesetting in a standard process, and the line is typeset The number of said floating elements;

And a sixth execution subunit, configured to set a width value of the floating element to a minimum width value of the floating element when the blank area exists on a right side of the row.
The webpage adaptation screen layout apparatus according to claim 12, wherein the dynamic stretching subunit further comprises:

a fourth determining subunit, configured to: when the blank area exists on the right side of the row, set a width value of the floating element to a minimum width value of the floating element, and determine a right side of the row Whether the blank area is greater than a width of one or more of the floating elements;

a seventh execution subunit, configured to add one or more of the blank area to the right of the row when the blank area to the right of the row is greater than the width of one or more of the floating elements The floating elements.
A webpage adaptation screen layout apparatus, comprising: a processor, wherein the processor is configured to execute the following program unit:

a calculation unit, configured to calculate a width of each node in the webpage layout tree;

a first determining unit, configured to determine whether a width of each node is less than or equal to a screen width;

a first execution unit, configured to reserve an original style of the node when the width of the node is less than or equal to a screen width, and typeset the node according to a standard process;

a second execution unit, configured to modify a style of the node when the width of the node is greater than a width of the screen, and format the node according to an adaptive screen rule.
A computer readable medium having processor-executable program code, wherein, when executed, the program code causes a processor to perform the steps of:

Calculating the width of each node in the web page layout tree;

Determine whether the width of each node is less than or equal to the screen width;

If the width of the node is less than or equal to the screen width, the original style of the node is retained, and the node is typeset according to a standard flow; otherwise, the style of the node is modified, and the node is typeset according to the adaptive screen rules.