WO2015196822A1 - Procédé et dispositif permettant d'adapter une page web à la disposition d'un écran - Google Patents

Procédé et dispositif permettant d'adapter une page web à la disposition d'un écran Download PDF

Info

Publication number
WO2015196822A1
WO2015196822A1 PCT/CN2015/072948 CN2015072948W WO2015196822A1 WO 2015196822 A1 WO2015196822 A1 WO 2015196822A1 CN 2015072948 W CN2015072948 W CN 2015072948W WO 2015196822 A1 WO2015196822 A1 WO 2015196822A1
Authority
WO
WIPO (PCT)
Prior art keywords
node
width
screen
layout
subunit
Prior art date
Application number
PCT/CN2015/072948
Other languages
English (en)
Chinese (zh)
Inventor
许国庆
Original Assignee
广州市动景计算机科技有限公司
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 广州市动景计算机科技有限公司 filed Critical 广州市动景计算机科技有限公司
Publication of WO2015196822A1 publication Critical patent/WO2015196822A1/fr

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor

Definitions

  • 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.
  • the browser 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.
  • 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.
  • a webpage adaptation screen layout method including:
  • 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 calculating the width of each node in the webpage layout tree includes:
  • the width of the cascading style sheet of the node is the width of the node
  • 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 node is set to be less than or equal to the width of the screen.
  • the modifying the style of the node includes:
  • the adapting to the screen rule layout includes:
  • 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.
  • a webpage adaptation screen layout apparatus 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.
  • 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;
  • 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 second execution unit includes:
  • Adapt to the screen rule layout sub-unit used to format the nodes according to the rules of the screen.
  • 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.
  • 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;
  • 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
  • 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:
  • 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 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 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.
  • FIG. 1 is a diagram showing the structure of a computer having a browser kernel according to an embodiment of the present application
  • FIG. 2 is a schematic diagram of a block model of a CSS provided according to an embodiment of the present application.
  • FIG. 3 is a schematic flowchart of a method for adapting a webpage to a screen according to an embodiment of the present application
  • FIG. 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;
  • FIG. 8 is a schematic structural diagram of a style modification subunit in the second execution unit shown in FIG. 7;
  • FIG. 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.
  • FIG. 1 is a diagram of a structure of a computer having a browser kernel provided in accordance with an embodiment of the present application.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • the primary role of the browser is to display web pages.
  • a web page is a document written in HTML.
  • CSS style language and JavaScript language to control the display characteristics of web pages.
  • CSS is used to describe the display information of the webpage
  • JS code is used to control the internal logic of the webpage.
  • CSS ascading Style Sheet
  • HTML 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.
  • 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.
  • 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.
  • the browser needs to parse the CSS content, it calls the parser to parse the CSS style, and finally stores the created result.
  • 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.
  • 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.
  • 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.
  • step S101 calculating a width of each node in the webpage layout tree
  • step S102 it is determined whether the width of each node is less than or equal to the screen width
  • 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;
  • 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.
  • step S101 the width of each node in the webpage layout tree is calculated.
  • the following steps may be included:
  • the width of the cascading style sheet of the node is the width of the node
  • 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 node is set to be less than or equal to the width of the screen.
  • calculating a width of each node in the layout tree may include:
  • step S201 traversing a node of a webpage layout tree
  • step S202 it is determined whether a width value is set in the cascading style sheet of each node.
  • 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;
  • 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;
  • 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
  • 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;
  • 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.
  • 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.
  • 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.
  • the width of the set node is max
  • 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.
  • 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.
  • 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.
  • 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.
  • Modifying the style of the node in step S104 may include, but is not limited to, the following rules:
  • 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.
  • 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.
  • 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.
  • 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.
  • the preset value of the fill property and the preset value of the margin property may be the same or different.
  • 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.
  • the display of the element content can be adapted to the width of the screen to avoid overflow.
  • the content is incomplete and deformed.
  • the modifying the style of the node may further include:
  • 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.
  • the preset value may be 240*300px, and the preset value may also be set according to the screen size of the smart terminal.
  • 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.
  • 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.
  • the adaptation screen rule layout may include but is not limited to the following rules:
  • 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 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.
  • 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.
  • one or more of the floating elements are added to the blank area on the right side of the line.
  • the layout of the floating element is not processed.
  • the dynamic stretching floating element may include the following process steps:
  • the width value of the floating element is set to the minimum width value of the floating element
  • 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;
  • step (3) 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.
  • 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;
  • 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;
  • step (3) 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.
  • the adapting to the screen rule layout may further include:
  • 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.
  • 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.
  • 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.
  • the original size of the image is 400*600px
  • the original aspect ratio is 3:2
  • 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
  • the size of the image is adjusted to 200*300px.
  • the method for adapting a screen of a webpage 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.
  • 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.
  • FIG. 5 is a schematic structural diagram of a webpage adaptation screen layout apparatus according to an embodiment of the present disclosure.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • smart phone such as an Android mobile phone, an iOS mobile phone, etc.
  • MID mobile Internet devices
  • FIG. 7 is a schematic structural view of a second execution unit in the apparatus shown in FIG. 5.
  • 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.
  • 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.
  • 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. .
  • 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.
  • the adapting screen rule typesetting subunit 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.
  • 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.
  • a smart phone such as Android phone, iOS phone, etc.
  • tablet computer such as Samsung Galaxy Tabs, etc.
  • applause computer such as Samsung Galaxy Tabs, etc.
  • PAD mobile Internet devices
  • FIG. 10 is a schematic structural diagram of a dynamic stretching subunit in the adaptive screen layout type subunit shown in FIG. 9.
  • 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.
  • 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.
  • 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.
  • embodiments of the present invention may provide a computer terminal, which may be any computer terminal device in a group of computer terminals.
  • a computer terminal may also be replaced with a terminal device such as a mobile terminal.
  • the computer terminal may be located in at least one network device of the plurality of network devices of the computer network.
  • 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.
  • 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.
  • 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.
  • 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.
  • the transmission device is a Radio Frequency (RF) module for communicating with the Internet wirelessly.
  • NIC Network Interface Controller
  • RF Radio Frequency
  • 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.
  • 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 smart phone such as an Android phone, an iOS phone, etc.
  • a tablet computer such as an iPad, Samsung Galaxy Tab, Samsung Galaxy Tab, etc.
  • MID mobile Internet device
  • PAD PAD
  • Embodiments of the present invention also provide a storage medium.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • program modules can be located in both local and remote computer storage media including storage devices.

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Data Mining & Analysis (AREA)
  • Databases & Information Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Document Processing Apparatus (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

L'invention concerne un procédé et un dispositif permettant d'adapter une page Web à la disposition d'un écran. Le procédé comprend : le calcul de la largeur de chaque nœud d'un arbre de disposition (S101) ; pour les nœuds dont la largeur est supérieure à celle de l'écran d'un terminal intelligent, la limitation de la largeur de ces nœuds, la modification du style de ces nœuds, et la réalisation de la disposition en fonction d'une règle d'adaptation à l'écran (S104) ; et, pour les nœuds dont la largeur est inférieure ou égale à celle de l'écran du terminal intelligent, la non-réalisation du traitement de style, la réalisation de la disposition conformément à un flux standard, et la conservation du style d'origine de ces nœuds (S103). Par conséquent, sur la base de l'adaptation d'une page Web à l'écran, le style d'origine de la page est conservé dans une plus large mesure, de sorte que l'affichage de la page a de meilleurs effets et offre une meilleure expérience visuelle. De plus, au moyen de ce procédé et de ce dispositif, la disposition est uniquement réalisée, à l'aide d'une règle d'adaptation à l'écran, sur les nœuds dont la largeur est supérieure à celle de l'écran, de sorte qu'un conflit avec le flux standard n'est généralement pas fréquent, et cela résout le problème causé par la difficulté à rendre compatibles les différents styles d'écriture de pages.
PCT/CN2015/072948 2014-06-25 2015-02-12 Procédé et dispositif permettant d'adapter une page web à la disposition d'un écran WO2015196822A1 (fr)

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN201410290310.1 2014-06-25
CN201410290310.1A CN105224564B (zh) 2014-06-25 2014-06-25 一种网页适应屏幕排版方法及装置

Publications (1)

Publication Number Publication Date
WO2015196822A1 true WO2015196822A1 (fr) 2015-12-30

Family

ID=54936710

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2015/072948 WO2015196822A1 (fr) 2014-06-25 2015-02-12 Procédé et dispositif permettant d'adapter une page web à la disposition d'un écran

Country Status (2)

Country Link
CN (1) CN105224564B (fr)
WO (1) WO2015196822A1 (fr)

Cited By (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107632970A (zh) * 2017-09-29 2018-01-26 彩讯科技股份有限公司 一种邮件内容转码方法及装置
CN108415703A (zh) * 2018-02-08 2018-08-17 武汉斗鱼网络科技有限公司 一种界面布局方法、装置、电子设备及存储介质
CN108804102A (zh) * 2018-05-24 2018-11-13 武汉斗鱼网络科技有限公司 直播间界面样式的扩展方法及系统、服务器及存储介质
CN108874371A (zh) * 2018-05-24 2018-11-23 武汉斗鱼网络科技有限公司 直播间样式的扩展方法及系统、服务器及存储介质
CN111581570A (zh) * 2020-04-01 2020-08-25 车智互联（北京）科技有限公司 一种页面布局方法及计算设备
CN113553122A (zh) * 2021-07-08 2021-10-26 北京奇艺世纪科技有限公司 浮层控制方法、装置、设备及计算机可读介质

Families Citing this family (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105718594A (zh) * 2016-01-29 2016-06-29 四川长虹电器股份有限公司 智能终端界面自适应显示方法
CN106168978B (zh) * 2016-07-25 2020-12-15 腾讯科技（深圳）有限公司 一种网页中弹窗的处理方法和装置
CN107562455B (zh) * 2017-08-15 2019-11-05 武汉斗鱼网络科技有限公司 一种html列表自适应布局方法及装置
CN109782983B (zh) * 2017-11-13 2021-05-25 腾讯科技（深圳）有限公司 应用程序界面的视图布局调整方法和装置
CN111274772A (zh) * 2018-12-03 2020-06-12 阿里巴巴集团控股有限公司 删除空行的方法、装置、终端设备及计算机存储介质
CN113778436A (zh) * 2021-07-19 2021-12-10 福建野小兽健康科技有限公司 一种基于h5的页面宽度适配的方法及装置

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2004031994A1 (fr) * 2002-09-30 2004-04-15 Embedded Internet Solutions, Inc. Procedes pour optimiser l'affichage et la navigation de contenus web sur des dispositifs sans fil
US20070157081A1 (en) * 2004-07-06 2007-07-05 Fujitsu Limited Browser with screen-reading function and browsing processing method
CN102663126A (zh) * 2012-04-23 2012-09-12 奇智软件（北京）有限公司 一种在移动终端中显示网页的方法及装置
CN103412928A (zh) * 2013-08-16 2013-11-27 北京乐动卓越科技有限公司 一种在移动终端实现浏览器页面智能响应式布局的方法与装置
CN103605783A (zh) * 2013-11-29 2014-02-26 优视科技有限公司 网页显示方法及装置

Family Cites Families (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101833586A (zh) * 2010-05-26 2010-09-15 卓望数码技术（深圳）有限公司 一种html小屏幕自适应排版方法及排版服务器
CN102184249B (zh) * 2011-05-23 2016-01-06 广州市动景计算机科技有限公司 基于移动终端的网页排版方法和装置
CN102779167B (zh) * 2012-06-21 2016-01-06 北京奇虎科技有限公司 在移动终端中显示网页的方法及系统

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2004031994A1 (fr) * 2002-09-30 2004-04-15 Embedded Internet Solutions, Inc. Procedes pour optimiser l'affichage et la navigation de contenus web sur des dispositifs sans fil
US20070157081A1 (en) * 2004-07-06 2007-07-05 Fujitsu Limited Browser with screen-reading function and browsing processing method
CN102663126A (zh) * 2012-04-23 2012-09-12 奇智软件（北京）有限公司 一种在移动终端中显示网页的方法及装置
CN103412928A (zh) * 2013-08-16 2013-11-27 北京乐动卓越科技有限公司 一种在移动终端实现浏览器页面智能响应式布局的方法与装置
CN103605783A (zh) * 2013-11-29 2014-02-26 优视科技有限公司 网页显示方法及装置

Cited By (10)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107632970A (zh) * 2017-09-29 2018-01-26 彩讯科技股份有限公司 一种邮件内容转码方法及装置
CN108415703A (zh) * 2018-02-08 2018-08-17 武汉斗鱼网络科技有限公司 一种界面布局方法、装置、电子设备及存储介质
CN108415703B (zh) * 2018-02-08 2022-01-04 武汉斗鱼网络科技有限公司 一种界面布局方法、装置、电子设备及存储介质
CN108804102A (zh) * 2018-05-24 2018-11-13 武汉斗鱼网络科技有限公司 直播间界面样式的扩展方法及系统、服务器及存储介质
CN108874371A (zh) * 2018-05-24 2018-11-23 武汉斗鱼网络科技有限公司 直播间样式的扩展方法及系统、服务器及存储介质
CN108874371B (zh) * 2018-05-24 2022-02-22 武汉斗鱼网络科技有限公司 直播间样式的扩展方法及系统、服务器及存储介质
CN108804102B (zh) * 2018-05-24 2022-02-22 武汉斗鱼网络科技有限公司 直播间界面样式的扩展方法及系统、服务器及存储介质
CN111581570A (zh) * 2020-04-01 2020-08-25 车智互联（北京）科技有限公司 一种页面布局方法及计算设备
CN111581570B (zh) * 2020-04-01 2023-05-30 车智互联（北京）科技有限公司 一种页面布局方法及计算设备
CN113553122A (zh) * 2021-07-08 2021-10-26 北京奇艺世纪科技有限公司 浮层控制方法、装置、设备及计算机可读介质

Also Published As

Publication number Publication date
CN105224564B (zh) 2019-02-15
CN105224564A (zh) 2016-01-06

Similar Documents

Publication Publication Date Title
WO2015196822A1 (fr) Procédé et dispositif permettant d'adapter une page web à la disposition d'un écran
US10210144B2 (en) Creation and display of a webpage with alternative layouts for different webpage widths
CN105975576B (zh) 终端内容适配显示方法、装置和终端
US10339209B2 (en) Webpage display method and device
US9311422B2 (en) Dynamic simulation of a responsive web page
US9460062B2 (en) Local rendering of an object as an image
Jiang et al. Responsive web design mode and application
CN109683978B (zh) 一种流式布局界面渲染的方法、装置以及电子设备
US9152619B2 (en) System and method for constructing markup language templates and input data structure specifications
CN104915186B (zh) 一种制作页面的方法和装置
CN105094930A (zh) 一种定位图片系统及方法
JP2014524623A (ja) テンプレートファイルの処理方法及び装置
US20140164911A1 (en) Preserving layout of region of content during modification
JP2014524623A5 (fr)
US20160232151A1 (en) Responsive course design system and method
KR102574306B1 (ko) 동적 조판
CN113655999A (zh) 一种页面控件的渲染方法、装置、设备及存储介质
CN111694493B (zh) 一种网页截图方法、计算机设备及可读存储介质
CN110262749B (zh) 一种网页操作方法、装置、容器、设备及介质
CN106488298B (zh) 一种在ui中图像绘制的方法及装置和电视
CN115659087B (zh) 页面渲染方法、设备及存储介质
CN111143749A (zh) 一种网页展示方法、装置、设备及存储介质
US11604849B2 (en) Rendering method, electronic device and storage medium
US20210073458A1 (en) Comic data display system, method, and program
CN114625996A (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: 15812638

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: 15812638

Country of ref document: EP

Kind code of ref document: A1