WO2015078159A1 - 网页显示方法及装置 - Google Patents

网页显示方法及装置 Download PDF

Info

Publication number
WO2015078159A1
WO2015078159A1 PCT/CN2014/078715 CN2014078715W WO2015078159A1 WO 2015078159 A1 WO2015078159 A1 WO 2015078159A1 CN 2014078715 W CN2014078715 W CN 2014078715W WO 2015078159 A1 WO2015078159 A1 WO 2015078159A1
Authority
WO
WIPO (PCT)
Prior art keywords
container
node
current node
secondary container
width
Prior art date
Application number
PCT/CN2014/078715
Other languages
English (en)
French (fr)
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 WO2015078159A1 publication Critical patent/WO2015078159A1/zh
Priority to US15/167,819 priority Critical patent/US10339209B2/en

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G06F16/986—Document structures and storage, e.g. HTML extensions
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/957—Browsing optimisation, e.g. caching or content distillation
    • G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/103—Formatting, i.e. changing of presentation of documents
    • G06F40/106—Display of layout of documents; Previewing
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/12—Use of codes for handling textual entities
    • G06F40/14—Tree-structured documents
    • G06F40/143—Markup, e.g. Standard Generalized Markup Language [SGML] or Document Type Definition [DTD]
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/20—Natural language analysis
    • G06F40/205—Parsing
    • G06F40/221—Parsing markup language streams

Definitions

  • the present invention relates to the field of mobile communication technologies, and in particular, to a web page display method and apparatus.
  • a portable terminal such as a mobile phone, a PAD, or the like
  • the webpage is designed according to the screen size of the desktop computer, and the screen size of the portable terminal is small
  • the content of the webpage needs to be adjusted while browsing. If the webpage is completely reduced to be consistent with the screen size of the portable terminal, the webpage content is too small. Users cannot clearly browse the content of the webpage, which seriously affects the user experience.
  • the web page display method widely used in portable terminals is: improving the readability of the web page on the portable terminal by enlarging the font of the partial content.
  • the specific implementation method is as follows: When the content of the webpage is printed, the overall layout of the webpage is kept unchanged, and the text of the key content of the webpage is enlarged, so that the text of the key content achieves a readable effect.
  • the content of the text is amplified again by interactive means.
  • the method optimizes the text and ensures the integrity of the overall layout of the web page, the enlargement of the text causes the deformation of some areas and the overflow of the text, which causes damage to the local details.
  • Embodiments of the present invention provide a webpage display method and apparatus, which can improve the readability of a webpage on a portable terminal, and can retain the detail layout of the webpage, thereby improving the user experience.
  • the embodiment of the present application discloses a webpage display method, the method includes: acquiring source code of a webpage to be displayed; parsing the source code to form a tree node; and performing the tree node according to a style specification of the source code Layout; locating the main container according to the typed tree node; locating at least one sub-container in the main container, wherein each of the sub-containers includes a part of the element of the web page to be displayed; adjusting the area of the sub-container The adjusted secondary container is drawn, and the elements of the webpage to be displayed included in the adjusted secondary container are displayed on the screen.
  • the embodiment of the present application further discloses a webpage display device, the device comprising: an obtaining unit, configured to obtain a source code of a webpage to be displayed; and an analyzing unit configured to parse the source code acquired by the acquiring unit to form a tree node a typesetting unit, configured to format the tree node formed by parsing the parsing unit according to the style specification of the source code; the first positioning unit is configured to locate the main container according to the tree node after the typesetting unit is typeset; a second positioning unit, configured to locate at least one secondary container in the primary container, wherein each of the secondary containers includes a part of the element of the web page to be displayed; and the first adjusting unit is configured to adjust the second positioning The unit is positioned to obtain the area of the secondary container; the drawing unit is configured to draw the adjusted secondary container of the first adjusting unit, and display the element of the web page to be displayed included in the adjusted secondary container on the screen.
  • the embodiment of the present application discloses a webpage display method, the method comprising: performing a typesetting on a tree node according to a style specification of a source code of a webpage to be displayed, wherein the tree node is formed by parsing the source code Locating the main container and the at least one sub-container in the main container according to the typeset tree node, wherein each sub-container includes a part of the elements in the web page to be displayed; and the at least one sub-container The area is adjusted to change the elements displayed on the screen.
  • the embodiment of the present application further discloses a webpage display device, the apparatus comprising: a processor; the processor is configured to: format a tree node according to a style specification of a source code of a webpage to be displayed, wherein the tree node is Forming the source code after parsing; positioning the main container according to the typed tree node and at least one sub-container in the main container, wherein each sub-container includes some elements in the webpage to be displayed; by using at least one sub-container The area is adjusted to change the elements displayed on the screen.
  • the webpage display method and apparatus analyzes the source code of the webpage to be formed into a tree node, and locates the main container and the secondary container of the tree node, wherein each The secondary container contains a portion of the elements of the web page to be displayed. The area of each of the secondary containers is then adjusted, and the adjusted secondary container is drawn, and the elements of the web page to be displayed contained in the secondary container are displayed on the screen.
  • the webpage to be displayed is modularized, when a part of the element of the webpage is adjusted, the substantially adjusted object is a secondary container including the partial element, and therefore, the part The enlargement of the element does not destroy the detail layout of the container.
  • each sub-container is a separate module, when the area of a certain container is adjusted, the layout of other sub-containers is not affected.
  • the webpage display method and apparatus provided by the embodiments of the present application can not only ensure the readability of the webpage, but also preserve the detail layout of the webpage and improve the user experience.
  • FIG. 1 is a flowchart of a webpage display method according to an embodiment of the present application
  • FIG. 2 is a flowchart of a second embodiment of a webpage display method according to an embodiment of the present application
  • FIG. 4 is a schematic diagram of a webpage display apparatus according to a preferred embodiment of the present application
  • FIG. 5 is a schematic structural diagram of a webpage display apparatus according to an embodiment of the present application
  • FIG. 7 is a schematic structural diagram of a third embodiment of a webpage display device according to an embodiment of the present application.
  • Step 101 Acquire a source code of a webpage to be displayed.
  • the webpage to be displayed refers to a webpage to be displayed after the user triggers on the portable terminal, and may be any webpage, for example, Netease, Sohu or Baidu.
  • the source code is a computer description language, which organizes the pictures, videos, music, texts and the like of the webpage to be displayed by means of assembly, and displays them in the form of a webpage after being translated by a browser.
  • the source code can be written in Hypertext Markup Language (HTML).
  • Step 102 Parse the source code to form a tree node.
  • the existing webpage is generally written in the HTML language, and the content of the existing webpage is followed by the HTML specification or the WAP specification.
  • the webpage to be displayed can be more easily followed by the webpage.
  • the element is modular, and the source code of the web page to be displayed needs to be parsed to identify the tree node therein.
  • the tree node may be any known or upcoming tree node.
  • the web page is described in accordance with the Document Object Model (DOM) specification.
  • the source code of the web page to be displayed is parsed, and the DOM node is identified.
  • DOM Document Object Model
  • Step 103 Type the tree node according to the style specification of the source code.
  • the tree node maps the page of the web page to be displayed into a file composed of hierarchical nodes, wherein the nodes are divided into several levels, and the nodes of each level contain certain webpage elements, but in order to accurately display the to-be-displayed a layout structure of the webpage, in order to modularize the content of the webpage to be displayed, and to format the tree node according to the style specification of the source code.
  • the typesetting of the tree node according to the style specification of the source code may be: formatting the tree node according to a Cascading Style Sheets (CSS) or HTML style, of course , it can also be typeset according to other standards, and this application does not limit this.
  • the operation of the typesetting of the tree nodes is a technique well known to those skilled in the art, and the present application will not be repeated herein.
  • Step 104 Position the main container according to the typed tree node.
  • a main container is a module that contains multiple small modules in a web page. For example, the entire page of a web page can be regarded as a main container.
  • a node containing multiple secondary nodes can be positioned as a primary container.
  • the webpage display method provided by the embodiment of the present application locates whether the node is a main container by using a width after the node is typeset, and the node width refers to a horizontally occupied portion of the tree node when the pixel node is displayed in the original scale.
  • the number of pixels is determined in the present application by the amount of web page elements included in the node.
  • Step 105 Positioning at least one secondary container in the primary container. It should be noted that each primary container contains one or more secondary containers, wherein the number of secondary containers included in the primary container is determined according to the structure of the web page to be displayed.
  • Baidu search's home page structure is relatively simple, so it can be positioned as a secondary container; 360 browser home page, you can think of the page of the 360 browser home page as the main
  • the container when positioning, locates the root node as the main container, the right part of the page as a module, and the left part as a module, when the node is positioned, the main container contains two sub-containers.
  • the primary container contains multiple secondary containers
  • the secondary containers are independent of each other, and when any number of secondary containers are adjusted, the layout of the elements in the other secondary containers is not affected.
  • the constituent elements of a web page can be divided into two categories, a main element and an auxiliary element for positioning.
  • the main elements are text, images, blocks with backgrounds or borders, forms, input boxes, and other visual elements.
  • Auxiliary elements for positioning such as invisible blocks (such as the HTML tag ⁇ div> in the default style).
  • an auxiliary element containing a large amount of content can be positioned as a primary container, and other auxiliary elements can be positioned as a secondary container within the primary container, and the primary element is filled in each secondary container.
  • Step 106 Adjust the area of the secondary container.
  • the degree of magnification is subject to a clear display on the portable terminal.
  • the clear display means that after the display of the webpage to be displayed is displayed by the portable terminal, the user can clearly browse the content of the enlarged secondary container without performing any operation.
  • the importance of the secondary container may be determined according to the frequency at which the webpage element is browsed. If the webpage element is a part of the webpage that the user browses frequently, the importance of the webpage element is high.
  • Step 107 Draw the adjusted secondary container, and display the elements of the webpage to be displayed included in the adjusted secondary container on the screen.
  • the webpage display method provided by the embodiment is configured to parse the source code of the webpage to be displayed into a tree node, and locate the main container and the secondary container of the tree node, wherein each of the secondary containers includes a part of the webpage to be displayed. Elements. The area of each of the secondary containers is then adjusted, and the adjusted secondary container is drawn, and the elements of the web page to be displayed contained in the secondary container are displayed on the screen.
  • the webpage to be displayed is modularized, when a part of the element of the webpage is adjusted, the substantially adjusted object is a secondary container including the partial element, and therefore, the part The enlargement of the element does not destroy the detail layout of the container.
  • FIG. 2 is a flowchart of a second implementation manner of a webpage display method according to an embodiment of the present application.
  • the method includes: Step 201: Acquire a source code of a webpage to be displayed.
  • Step 205 Determine whether the width of the current node is greater than or equal to a first percentage of a width of the root node (eg, 50%), and whether it is greater than or equal to a second percentage of a width of the superior node (eg, 90%), if yes, go to step 206, if no, do nothing.
  • a first percentage of a width of the root node eg, 50%
  • a second percentage of a width of the superior node eg, 90%
  • Determining whether the current node height is a fixed value may include: determining whether the source code corresponding to the current node sets the height value of the current node to a fixed value, and if the current node height value is set to a fixed value, the current node height is a fixed value, otherwise, the height of the current node may not be a fixed value; it is also necessary to determine whether the background image corresponding to the current node supports a variable height, if the background image of the current node is not variable, such as a repeat-x or no-repeat image , the height of the current node is a fixed value, otherwise, the height of the current node may not be a fixed value.
  • the present invention further includes determining by other factors, which is not limited in this application. Since the width of the secondary container is adjusted to match the screen width of the portable terminal, in order to ensure a reasonable layout of the webpage elements in the secondary container, the height of the secondary container is surely changed, and therefore, the primary container supporting the secondary container is required. Variable height.
  • Step 207 Position the current node as a primary container.
  • Step 208 Determine whether the upper node of the current node is a primary container.
  • Step 209 Determine whether the width of the current node is a third percentage of the width of its superior node (for example: 20%) to a fourth percentage (for example: 80%). If yes, go to step 210; if no, do nothing.
  • each primary container contains at least one secondary container
  • the width of the secondary container is 80% of the width of the primary container; when the primary container contains multiple secondary containers
  • the width of each of the secondary containers is less than 80% of the width of the main container; if the width of the secondary container is less than 20% of the width of the primary container, the secondary container area is too small, based on the solution to be solved by the present application. Technical issues, no meaning. Therefore, the width of the secondary container is 20% to 80% of the width of the primary container.
  • Step 210 Position the current node as a secondary container.
  • Step 211 Calculate the area of each of the secondary containers, and obtain an average of all the secondary container areas.
  • the area of the secondary container indicates the importance of the element of the web page contained in the secondary container, and the larger the area of the secondary container indicates the higher importance of the element contained in the secondary container.
  • the calculation method may be: calculating the product of the width and height of the sub-container, and the product Resulting as an area value of the secondary container; or calculating an area value of each type of element in the secondary container, and adding all the area values to obtain an area of the secondary container, wherein the element category includes text and a picture , animated videos and controls, etc., according to the importance of each type of element, each type of element is preset with a weighting parameter, The area of the element is calculated by multiplying the physical area occupied by the element by the weighting parameter of the element; when the primary container contains only one secondary container, there is no need
  • Step 212 Compare the area of each of the secondary containers with the size of the average.
  • Step 213 If the area of the secondary container is larger than the average value, the secondary container is enlarged according to a preset proportional coefficient k, wherein the k is greater than 1; meanwhile, the other secondary containers are correspondingly reduced to maintain The total width of the secondary container does not change.
  • the preset scale factor k can be calculated according to different webpage layouts and the number and size of the secondary containers; or the scale factor of each secondary container is calculated. In order to ensure that the total width of the secondary container does not change, the secondary container with higher importance is enlarged by k times according to its own preset proportional coefficient, and the other secondary containers are correspondingly reduced.
  • the method of calculating the preset scale factor of each sub-container includes: assuming that the visible width of the page on the screen of the portable terminal is u, the width of each sub-container is w, and the value of u divided by the value of w is the pre-preparation of the sub-container Set the scaling factor k.
  • the algorithm can also be used as an algorithm for adjusting the scaling factor of each sub-container when any container is adapted to the screen display.
  • Step 214 Draw the adjusted secondary container, and display the elements of the webpage to be displayed included in the adjusted secondary container on the screen.
  • the drawing described in the present application refers to displaying the content contained in the secondary container on the screen by means of combining, moving, cascading, scaling, cropping, and the like.
  • the webpage display method provided by the embodiment represents the importance of the content of the webpage included in the secondary container, is convenient and concise in determining the secondary container to be displayed, and avoids a large number of computing processes, thereby also Speed up the display of web pages on the screen and improve the user experience.
  • the content of the displayed webpage needs to be switched, based on the above implementation.
  • FIG. 3 is a flowchart of a third implementation manner of a webpage display method according to an embodiment of the present application.
  • the method includes: Step 301: Acquire a source code of a webpage to be displayed.
  • Step 305 Positioning at least one secondary container in the primary container.
  • Step 306 Adjust the area of the secondary container.
  • Step 307 Draw the adjusted secondary container, and display the elements of the webpage to be displayed included in the secondary container on the screen.
  • Step 308 Receive a handover command. It can be seen from the above embodiment that when the webpage is displayed on the screen, the content of the most important secondary container is enlarged by default, and when the user needs to browse the content of the other secondary container, the function control and the portable control provided by the gesture or the portable terminal can be portable. The terminal generates an interactive operation to enlarge the content of the target secondary container. When the portable terminal receives trigger information such as a gesture or a function control of the user, the trigger signal is used as a switching command, and the target secondary container is enlarged according to the switching command. For example: Double-click on the content of the target secondary container.
  • Step 309 Generate a scaling factor of the target secondary container.
  • the method for generating the scaling factor of the target sub-container may be: comparing the width of the screen of the portable terminal with the width of the main container, taking the minimum of the two; multiplying the minimum value and the preset proportional coefficient k , the result of the multiplication calculation is divided by the width of the target sub-container to obtain a first scaling factor ul ; Dividing the height value of the main container by the height value of the target sub-container to obtain a second scaling factor u2 ; Determining a minimum value of the ul and the u2 as the scaling factor u, and if u is less than 1, taking a value of 1; or calculating a preset proportional coefficient of each secondary container according to the method described in the above embodiment.
  • Step 310 Adjust the area of the target secondary container by u times, and adjust the area of the other secondary containers correspondingly to keep the total width of the secondary container unchanged.
  • the target secondary container becomes a secondary container of higher importance. Therefore, the area of the target secondary container needs to be enlarged before being displayed, and in order to ensure that the total width of the secondary container is unchanged, and the area of the target secondary container is enlarged, the other secondary containers need to be correspondingly reduced.
  • Step 311 Draw the adjusted secondary container, and display the elements of the adjusted secondary container on the screen.
  • the target secondary container increases the area of the secondary container with higher importance, the area of the other secondary container decreases, and the overall layout of the web page changes.
  • the enlarged target position is clearly displayed on the screen.
  • the contents of the container The method of drawing the adjusted secondary container is similar to the method of drawing the currently displayed secondary container, and the application will not be repeated herein.
  • the target secondary container in the process of enlarging the target secondary container and reducing other secondary containers, it may be a traditional screen, such as zooming in on the target secondary container, reducing other secondary containers, or setting the switching process by timing.
  • the steps are completed, and the process can be set to animate to improve the user's interactive experience.
  • the content of the currently displayed secondary container is switched to the content of the target secondary container by the interaction operation between the user and the portable terminal.
  • the target secondary container is enlarged, and the current location is reduced.
  • the displayed secondary container not only improves the readability of the target secondary container, but also preserves the detailed layout of the current secondary container.
  • the webpage display method provided by the present application, by parsing the source code of the webpage to be displayed into a tree node, and locating the main container and the secondary container of the tree node, wherein each of the secondary containers includes a part of the webpage to be displayed. element.
  • the area of each of the secondary containers is then adjusted, and the adjusted secondary container is drawn, and the elements of the web page to be displayed contained in the secondary container are displayed on the screen.
  • the substantially adjusted object is a secondary container including the partial element, and therefore, the part
  • the enlargement of the element does not destroy the detail layout of the container.
  • FIG. 4 is a schematic diagram of a web page display method according to a preferred embodiment of the present application. As shown in Fig. 4, A is the main container, and B1 and B2 are the two sub-containers.
  • the change process of the above webpage display is not limited to the above-mentioned importance of determining the secondary container according to the number of times the secondary container is browsed, and of course, other determinants can be adopted.
  • the user can interact with the portable terminal through a gesture or a function control additionally provided by the portable terminal, and wants to enlarge the content of the B1 from the container, the two B1 and B2 that have been previously defined will be detached.
  • FIG. 5 is a schematic structural diagram of a webpage display device according to an embodiment of the present application.
  • the device includes: an obtaining unit 11, a parsing unit 12, a typesetting unit 13, a first positioning unit 14, a second positioning unit 15, a first adjusting unit 16, and a drawing unit 17, wherein the obtaining unit 11 is configured to acquire The source code of the web page to be displayed; the parsing unit 12 is configured to parse the source code acquired by the obtaining unit 11 to form a tree node; the typesetting unit 13 is configured to parse the parsing unit 12 into a tree shape The node is configured according to the style specification of the source code; the first positioning unit 14 is configured to locate the main container according to the width of the typesetting unit 13; the second positioning unit 15 is configured to locate the main At least one secondary container in the container, wherein each of the secondary containers includes a part of the element of the web page to be displayed; the first adjusting unit 16 is configured to adjust the area of the second positioning unit 15 to obtain the secondary container The drawing unit 17 is configured to draw the adjusted secondary container of the first adjusting unit 16, and the adjusted Container element included in a display page
  • the first positioning unit includes: a first determining unit and a second determining unit; the second positioning unit includes: a third determining unit; the first adjusting unit includes: a first calculating unit, a first comparing unit And scaling unit.
  • the webpage display device provided by the present application is configured to form a tree node by parsing the source code of the webpage to be displayed, and locate the main container and the secondary container of the tree node, wherein each of the secondary containers includes a part of the webpage to be displayed. element.
  • each of the secondary containers is then adjusted, and the adjusted secondary container is drawn, and the elements of the web page to be displayed contained in the secondary container are displayed on the screen.
  • the substantially adjusted object is a secondary container including the partial element, and therefore, the part
  • the enlargement of the element does not destroy the detail layout of the container.
  • Each sub-container is a separate module. Therefore, when the area of a certain container is adjusted, the layout of other sub-containers will not be affected.
  • FIG. 6 is a schematic structural diagram of a second embodiment of a webpage display device according to an embodiment of the present application.
  • the apparatus in this embodiment includes: an obtaining unit 20, an analyzing unit 21, a typesetting unit 22, a first determining unit 23, a second determining unit 24, a third determining unit 25, and a first calculating unit.
  • the first comparison unit 27, the scaling unit 28, and the rendering unit 29, wherein the functions and connection manners of the obtaining unit 20, the parsing unit 21, the typesetting unit 22, and the drawing unit 29 are the same as the above embodiment. Similarly, the application will not be repeated here.
  • the first determining unit 23 is configured to determine whether the upper node of the current node is empty or whether the upper node is the primary container;
  • the second determining unit 24 is configured to be when the upper node of the current node is empty or The main container determines whether the height of the current node is a fixed value;
  • the third determining unit 26 is configured to determine whether the upper node of the current node is a main container;
  • the first calculating unit 26 is configured to calculate each The area of the secondary container, and an average of all the secondary container areas;
  • the first comparing unit 27, configured to compare the area of each of the secondary containers calculated by the first calculating unit 26 with the The size of the average value;
  • the scaling unit 28 is configured to enlarge the secondary container by a
  • the first positioning unit is configured to: when the current node height is not a fixed value, if the upper node is empty, locate the current node as a primary container;
  • the upper node of the current node is a main container.
  • the width of the current node is greater than or equal to 50% of the width of the root node and greater than or equal to 90% of the width of the upper node, the current node is positioned as a primary container.
  • the second positioning unit is configured to: when the third determining unit determines that the upper node of the current node is the main container, if the width of the current node is 20% to 80% of the width of the upper node , positioning the current node as a secondary container.
  • FIG. 7 is a schematic structural diagram of a third embodiment of a webpage display device according to an embodiment of the present application.
  • the device includes: an obtaining unit 30, a parsing unit 31, a typesetting unit 32, a first positioning unit 33, a second positioning unit 34, a first adjusting unit 35, a drawing unit 36, a receiving unit 37, a generating unit 38, and a second adjustment The unit 39, wherein the obtaining unit 30, the parsing unit 31, the typesetting unit 32, the first positioning unit 33, the second positioning unit 34, the first adjusting unit 35, and the drawing
  • the function and connection relationship of the unit 36 are similar to the above-mentioned embodiments, and the details are not described herein again.
  • the receiving unit 37 is configured to receive a switching command to enlarge the content of the target secondary container; the generating unit 38 is configured to generate a scaling factor u of the target secondary container; the second adjusting unit 39, After the scaling factor u is generated by the generating unit, the area of the target secondary container is adjusted by u times, and the area of the other secondary containers is adjusted correspondingly to keep the total width of the secondary container unchanged.
  • the drawing unit is further configured to draw the adjusted secondary container of the second adjusting unit, and display the elements of the secondary container on the screen.
  • the generating unit includes: a second comparing unit, a second calculating unit, and a determining unit, wherein the second comparing unit is configured to compare a width of the screen with a width of the main container, and The second calculating unit is configured to multiply the minimum value and the preset proportional coefficient k, and divide the result of the multiplication calculation by the width of the target sub-container to obtain a first scaling factor ul ; Dividing the height value of the main container by the height value of the target sub-container to obtain a second scaling factor u2 ; The determining unit is configured to determine a minimum value of ul and u2 calculated by the second calculating unit as the scaling factor.
  • the webpage display device provided by the embodiment switches the content of the currently displayed secondary container to the content of the target secondary container by the interaction operation between the user and the portable terminal, and during the switching process, the target secondary container is enlarged, and the current location is reduced.
  • the displayed secondary container not only improves the readability of the target secondary container, but also preserves the detailed layout of the current secondary container.
  • the webpage display method and apparatus analyzes a source code of a webpage to be displayed into a tree node, and locates a main container and a secondary container of the tree node, wherein each of the times The container contains a portion of the elements of the web page to be displayed. Then adjusting the area of each of the secondary containers and drawing the adjusted secondary container, The elements of the web page to be displayed included in the secondary container are displayed on the screen.
  • the webpage to be displayed is modularized, when a part of the element of the webpage is adjusted, the substantially adjusted object is a secondary container including the partial element, and therefore, the part The enlargement of the element does not destroy the detail layout of the container.
  • each sub-container is a separate module, when the area of a certain container is adjusted, the layout of other sub-containers is not affected.
  • the webpage display method and apparatus provided by the embodiments of the present application can not only ensure the readability of the webpage, but also preserve the detail layout of the webpage and improve the user experience.
  • the invention may 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 invention may 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.
  • 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 entities or operations. There is any such actual relationship or order between them.
  • the terms "including”, “comprising” or “comprising” or “comprising” are intended to encompass a non-exclusive inclusion, such that a process, method, article, or device that includes a plurality of elements includes not only those elements but also Other elements, or elements that are inherent to such a process, method, item, or device.

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Databases & Information Systems (AREA)
  • Audiology, Speech & Language Pathology (AREA)
  • Computational Linguistics (AREA)
  • General Health & Medical Sciences (AREA)
  • Health & Medical Sciences (AREA)
  • Artificial Intelligence (AREA)
  • Data Mining & Analysis (AREA)
  • Multimedia (AREA)
  • Information Transfer Between Computers (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

公开了一种网页显示方法及装置。所述方法包括：获取待显示网页的源代码；解析所述源代码形成树状节点；将所述树状节点进行排版；根据排版后的树状节点定位主容器；定位所述主容器内的至少一个次容器；调整所述次容器的面积；绘制调整后的次容器。还公开了一种网页显示装置。提供的网页显示方法及装置，将待显示网页模块化，当对网页的部分元素进行调整时，不会破坏网页的细节排版，而且各个次容器相互独立，每个次容器的细节排版不受其他次容器的影响。由此可见，提供的网页显示方法及装置，不但能保证网页的可读性，也能够保留网页的细节排版，改善了用户体验。

Description

网页显示方法及装置 技术领域 本发明涉及移动通信技术领域， 特别是涉及一种网页显示方法及装置。 背景技术 用户在使用便携终端， 如手机、 PAD等， 浏览网页时， 由于网页依照台式电脑的 屏幕尺寸设计， 而便携终端的屏幕尺寸偏小， 如果将原始网页显示在便携移动终端屏 幕上， 则网页的高度和宽度会超出便携终端屏幕， 当用户进行浏览时， 需要边浏览边 调整网页的内容； 如果将网页直接完整的缩小至与便携终端屏幕尺寸一致进行显示， 则网页内容显示过小， 用户无法清楚的浏览网页内容， 严重影响用户体验。 针对上述问题， 目前在便携终端中广泛采用的网页显示方法为： 通过放大部分内 容的字体， 提高网页在便携终端上的可读性。 具体实现方法如下： 对网页内容进行排 版时， 保证网页整体布局不变， 对网页重点内容的文本进行放大， 使重点内容的文字 达到可阅读的效果。 当用户需要对部分内容详细阅读时， 再通过交互的方式对该部分 文本内容再次进行放大。 虽然该方法对文本进行了优化， 而且能保证网页整体布局的 完整， 但是文本的放大导致某些区域排版的变形和文字的溢出隐藏， 对局部细节的排 版产生了破坏。 因此， 如何提供一种既能保证可读性， 又能保留网页细节排版的网页显示方法， 成为本领域亟待解决的问题。 发明内容 本申请实施例提供了一种网页显示方法及装置， 既能提高网页在便携终端上可读 性， 又能够保留网页的细节排版， 改善了用户体验。 本申请实施例公开了一种网页显示方法， 所述方法包括： 获取待显示网页的源代 码； 解析所述源代码形成树状节点； 将所述树状节点按照所述源代码的样式规范进行 排版； 根据排版后的树状节点定位主容器； 定位所述主容器内的至少一个次容器， 其 中， 每个所述次容器包含一部分所述待显示网页的元素； 调整所述次容器的面积； 绘 制调整后的次容器，将所述调整后的次容器所包含的待显示网页的元素在屏幕上显示。 本申请实施例还公开了一种网页显示装置， 所述装置包括： 获取单元， 设置为获 取待显示网页的源代码； 解析单元， 设置为解析所述获取单元获取到的源代码形成树 状节点； 排版单元， 设置为将所述解析单元解析形成的树状节点按照所述源代码的样 式规范进行排版； 第一定位单元， 设置为根据所述排版单元排版后的树状节点定位主 容器； 第二定位单元， 设置为定位所述主容器内的至少一个次容器， 其中， 每个所述 次容器包含一部分所述待显示网页的元素； 第一调整单元， 设置为调整所述第二定位 单元定位得到次容器的面积； 绘制单元， 设置为绘制所述第一调整单元调整后的次容 器， 将所述调整后的次容器所包含的待显示网页的元素在屏幕上显示。 本申请实施例公开了一种网页显示方法， 该方法包括： 按照待显示网页的源代码 的样式规范对树状节点进行排版， 其中， 所述树状节点是对所述源代码进行解析后形 成的； 根据排版后的树状节点定位主容器以及所述主容器内的至少一个次容器，其中， 每个次容器包含所述待显示网页中的部分元素； 通过对所述至少一个次容器的面积进 行调整， 改变在屏幕上显示的元素。 本申请实施例还公开了一种网页显示装置， 该装置包括： 处理器； 该处理器设置 为： 按照待显示网页的源代码的样式规范对树状节点进行排版， 其中， 树状节点是对 源代码进行解析后形成的； 根据排版后的树状节点定位主容器以及主容器内的至少一 个次容器， 其中， 每个次容器包含待显示网页中的部分元素； 通过对至少一个次容器 的面积进行调整， 改变在屏幕上显示的元素。 由上述技术方案可知， 本申请实施例所提供的网页显示方法及装置， 通过将待显 示网页源代码解析形成树状节点， 并定位所述树状节点的主容器及次容器， 其中， 每 个所述次容器包含一部分待显示网页的元素。 然后调整每个所述次容器的面积， 并绘 制调整后的次容器， 所述次容器包含的待显示网页的元素在屏幕上显示。 与现有技术 相比，本申请实施例通过将所述待显示网页模块化， 当对网页的部分元素进行调整时， 实质上所调整的对象是包含该部分元素的次容器， 因此， 该部分元素的放大不会破坏 该次容器的细节排版。 同时， 由于各个次容器是相互独立的模块， 因此， 对某一次容 器的面积进行调整时， 其他次容器的排版不会受到任何影响。 由此可见， 本申请实施 例所提供的网页显示方法及装置， 不但能保证网页的可读性， 在此基础上也能够保留 网页的细节排版， 改善了用户体验。 附图说明 为了更清楚地说明本申请实施例或现有技术中的技术方案， 下面将对实施例或现 有技术描述中所需要使用的附图作简单地介绍， 显而易见地， 对于本领域普通技术人 员而言， 在不付出创造性劳动性的前提下， 还可以根据这些附图获得其它的附图。 图 1为本申请实施例所提供的网页显示方法流程图； 图 2为本申请实施例所提供的网页显示方法的第二种实施方式流程图； 图 3为本申请实施例所提供的网页显示方法的第三种实施方式流程图； 图 4是本申请优选实施例的网页显示方法的示意图； 图 5为本申请实施例所提供的网页显示装置结构示意图； 图 6为本申请实施例所提供的网页显示装置的第二种实施方式结构示意图； 图 7为本申请实施例所提供的网页显示装置的第三种实施方式结构示意图。 具体实施方式 为了使本领域技术人员更好地理解本申请实施例中的技术方案， 并使本申请实施 例的上述目的、 特征和优点能够更加明显易懂， 下面结合附图对本申请实施例中技术 方案作进一步详细的说明。 参见图 1， 图 1为本申请实施例所提供的网页显示方法流程图。 所述方法包括： 步骤 101 : 获取待显示网页的源代码。 所述待显示网页是指用户在便携终端上触发后即将显示的网页， 可以为任意网页 页面， 例如， 网易、 搜狐或者百度等。 所述源代码是一种计算机描述语言， 通过汇编 的方式将待显示网页的图片， 视频， 音乐， 文字等元素进行组织排版， 通过浏览器翻 译后以网页的形式展现出来。 源代码可以通过超文本标记语言 （Hypertext Markup Language, 简称为 HTML) 进行编写。 步骤 102: 解析所述源代码形成树状节点。 现有网页一般通过 HTML语言编写， 现有网页的内容所遵循的为 HTML规范或 WAP规范， 为了使所述待显示网页源代码的结构更清晰， 从而可以更容易将所述待显 示网页按照网页元素模块化， 需要解析所述待显示网页的源代码， 识别出其中的树状 节点。 其中， 所述树状节点可以为任意已知或者即将出现的树状节点， 例如， 在本申请 的一个优选实例中，将网页按照文件对象模型（Document Object Model,简称为 DOM) 规范， 将描述所述待显示网页的源代码进行解析， 并识别出 DOM节点。 当然， 上述 仅为本申请所提供的一个示例， 本申请不限于此。 步骤 103: 将所述树状节点按照所述源代码的样式规范进行排版。 树状节点是将所述待显示网页的页面映射为一个由层次节点组成的文件， 其中节 点分几个等级， 每个等级的节点包含一定的网页元素， 但是为了准确的展现出所述待 显示网页的排版结构， 以便于将所述待显示网页的内容模块化， 将所述树状节点按照 所述源代码的样式规范进行排版。 需要指出的， 所述将所述树状节点按照所述源代码的样式规范进行排版可以是， 将树状节点按照级联样式表 （Cascading Style Sheets, 简称为 CSS) 或者 HTML样式 进行排版， 当然， 也可以按照其他的标准进行排版， 本申请对此不做限制。 此外， 将所述树状节点进行排版的操作为本领域技术人员所熟知的技术， 本申请 在此不再赘述。 步骤 104: 根据排版后的树状节点定位主容器。 主容器是指网页中包含有多个小模块的模块， 例如， 一个网页的整个页面可以视 为一个主容器。 在树状节点中， 可以将包含多个次级节点的节点定位为主容器。 其中， 本申请实施例所提供的网页显示方法， 通过节点排版后的宽度定位该节点 是否为主容器， 所述节点宽度指该树状节点按原比例显示在像素设备时， 其横向所占 的像素数， 本申请中以节点中所包含的网页元素的量进行确定。 步骤 105: 定位所述主容器内的至少一个次容器。 需要指出的， 每个主容器内包含一个或多个次容器， 其中， 主容器内所包含的次 容器的数量根据待显示网页的结构确定。 例如， 百度搜索的主页页面结构相对简单， 因此可以定位为一个次容器； 360浏览器首页， 可以将 360浏览器首页的页面视为主 容器， 定位时将根节点定位为主容器， 将页面右侧部分视为一个模块， 左侧部分视为 一个模块， 则在对节点定位时， 该主容器包含两个次容器。 此外， 当主容器内包含多 个次容器时， 次容器之间相互独立， 调整任意次容器时， 不影响其他次容器内元素的 布局。 一般的， 可以将网页的组成元素分为两大类， 主体元素和用于定位的辅助元素。 其中主体元素如文字、 图片、 有背景或有边框的区块、 表单、 输入框和其他可视元素 等。 用于定位的辅助元素， 如不可见的区块 （如 HTML标签 <div>在默认样式下的表 现）。 在对树状节点进行定位时， 一个包含有大段内容的辅助元素可以定位为主容器， 其他的辅助元素可以定位为该主容器内的次容器， 主元素填充在每个次容器内。 步骤 106: 调整所述次容器的面积。 将次容器按照重要性计算缩放比例系数， 并按照计算得到的缩放比例系数分别调 整每个次容器的面积，放大重要性高的次容器的面积，缩小重要性低的次容器的面积， 其中， 放大的程度以在便携终端上清楚的显示为准。 所述清楚的显示指， 待显示网页 在便携终端显示后，用户无需进行任何操作便可以清楚的浏览该放大的次容器的内容。 此外， 所述次容器的重要性， 可以根据网页元素被浏览的频率来判定， 如果该网页元 素为用户浏览该网页是经常浏览的部分， 则该网页元素的重要性高。 因此， 在定位次 容器时， 可以将包含被浏览频率较高的网页元素的部分定位为面积较大的次容器， 通 过次容器的面积来判定次容器的重要性。 需要指出的， 调整次容器的面积是指， 将次容器的宽和高进行等比缩放。 将次容 器进行缩放时， 次容器内所包含的网页元素也会相应的放大或缩小。 其中， 对次容器 的面积进行调整时， 调整后与调整前相比， 次容器的总宽度保持不变。 步骤 107: 绘制调整后的次容器， 将所述调整后的次容器所包含的待显示网页的 元素在屏幕上显示。 本实施例所提供的网页显示方法， 通过将待显示网页源代码解析形成树状节点， 并定位所述树状节点的主容器及次容器， 其中， 每个所述次容器包含一部分待显示网 页的元素。 然后调整每个所述次容器的面积， 并绘制调整后的次容器， 所述次容器包 含的待显示网页的元素在屏幕上显示。 与现有技术相比， 本申请实施例通过将所述待 显示网页模块化， 当对网页的部分元素进行调整时， 实质上所调整的对象是包含该部 分元素的次容器， 因此， 该部分元素的放大不会破坏该次容器的细节排版。 同时， 由 于各个次容器是相互独立的模块， 因此， 对某一次容器的面积进行调整时， 其他次容 器的排版不会受到任何影响。 由此可见，本申请实施例所提供的网页显示方法及装置， 不但能保证网页的可读性，在此基础上也能够保留网页的细节排版， 改善了用户体验。 为了使本领域技术人员更加清楚的理解本申请的技术方案， 在上述实施例的基础 上， 本申请还提供了网页显示方法的第二种实施方式流程图。 参见图 2， 图 2为本申请实施例所提供的网页显示方法的第二种实施方式流程图。 所述方法包括： 步骤 201 : 获取待显示网页的源代码。 步骤 202: 解析所述源代码形成树状节点。 步骤 203 : 将所述树状节点按照所述源代码的样式规范进行排版。 步骤 204: 判断当前节点的上级节点是否为空或者为主容器， 如果所述当前节点 的上级节点为空， 执行步骤 206; 如果所述当前节点的上级节点为主容器， 执行步骤 205。 所述当前节点的上级节点为空， 即， 所述当前节点为根节点。 步骤 205 : 判断所述当前节点的宽度是否大于或等于根节点的宽度的第一百分比 (例如： 50%)， 且是否大于或等于其上级节点的宽度的第二百分比 （例如： 90%)， 如果是， 执行步骤 206， 如果否， 不执行任何操作。 当所述当前节点的宽度大于或等于其上级节点宽度的 90%， 说明所述当前节点的 上级节点仅仅是定位的辅助元素， 其内部所包含的网页元素全部包含于当前节点所定 位的容器中。 步骤 206: 判断当前节点的高度是否为固定值。 如果当前节点的高度为固定值， 对当前节点不执行任何操作； 如果当前节点的不是固定值， 执行步骤 207。 判断当前节点高度是否为固定值， 可以包括： 判断当前节点对应的源代码是否将 所述当前节点的高度值设置为固定值， 如果将当前节点的高度值设置为固定值， 则当 前节点高度是固定值， 否则， 当前节点的高度可能不是固定值； 还需要判断当前节点 对应的背景图像是否支持可变高度， 如果当前节点的背景图高度不可变， 例如是 repeat-x或者 no-repeat的图像， 则当前节点的高度是固定值， 否则， 当前节点的高度 可能不是固定值。 需要指出的， 上述判断仅仅是本申请提供的示例， 本申请在判断当前节点是否可 变时， 还包括通过其他因素进行判断， 本申请对此不做限制。 由于将次容器的宽度调整至与便携终端的屏幕宽度相一致时， 为了保证次容器中 网页元素的合理排版， 次容器的高度肯定会产生变化， 因此， 需要包含所述次容器的 主容器支持可变高度。 步骤 207: 将所述当前节点定位为主容器。 步骤 208: 判断所述当前节点的上级节点是否为主容器。 如果所述当前节点的上 级节点非主容器， 不执行任何操作； 如果所述当前节点的上级节点为主容器， 执行步 骤 209。 次容器嵌套在主容器内， 多个次容器相互独立， 因此， 按照树状节点的层级式结 构特点， 次容器节点的上级节点一定为主容器。 步骤 209: 判断所述当前节点的宽度是否为其上级节点的宽度的第三百分比 （例 如： 20%) 到第四百分比 （例如： 80%)。 如果是， 执行步骤 210; 如果否， 不执行任 何操作。 由于每个主容器所包含的次容器至少为一个， 当主容器内包含一个次容器时， 所 述次容器的宽度为所述主容器宽度的 80%; 当所述主容器包含多个次容器时， 每个所 述次容器宽度占所述主容器宽度的比例小于 80%; 如果次容器的宽度占其所在主容器 宽度的 20%以下， 则该次容器区域过小， 基于本申请所要解决的技术问题， 没有任何 意义。 所以， 次容器的宽度占主容器宽度的 20%到 80%。 步骤 210: 将所述当前节点定位为次容器。 步骤 211 : 计算每个所述次容器的面积， 并得到所有次容器面积的平均值。 由上述实施例可知， 次容器的面积表示该次容器所包含的网页元素的重要性， 次 容器面积越大表示该次容器所包含的元素重要性越高。 需要指出的， 当主容器内包含至少两个次容器时， 需要根据次容器的重要性计算 每个次容器的面积， 计算方法可以为： 计算该次容器的宽度与高度的乘积， 将所述乘 积结果作为该次容器的面积值； 或者， 计算所述次容器中每一种类别元素的面积值， 并将所有面积值相加得到该次容器的面积， 其中， 所述元素类别包括文字、 图片、 动 画视频和控件等， 根据各类元素的重要程度， 每类元素都被预设一个加权参数， 所述 元素的面积是根据所述元素所占的物理面积乘以所述元素的加权参数计算得到； 当主 容器内仅包含一个次容器时， 无需比较次容器之间的重要性， 将所述待显示网页直接 显示即可。 步骤 212: 比较每个所述次容器的面积与所述平均值的大小。 步骤 213 :若所述次容器的面积大于所述平均值，将所述次容器按预设比例系数 k 进行放大， 其中， 所述 k大于 1 ; 同时， 将其他次容器进行相应缩小， 以保持次容器 的总宽度不变。 其中，预设比例系数 k可以根据不同的网页排版及次容器的数量和大小计算得到； 或者计算得到每个次容器的比例系数。 为了保证次容器的总宽度不变， 将重要性较高 的次容器按照其自身的预设比例系数作 k倍放大时， 将其他次容器进行相应的缩小。 计算每个次容器的预设比例系数的方法包括： 假定页面在便携终端屏幕上的可视 宽度为 u， 每个次容器的宽度为 w， u除以 w的值即为该次容器的预设比例系数 k。 当 然， 该算法也可以作为调整任意次容器适应屏幕显示时， 每个次容器的缩放比例系数 的算法。 步骤 214: 绘制调整后的次容器， 将所述调整后的次容器所包含的待显示网页的 元素在屏幕上显示。 本申请所述的绘制指利用组合、 移动、 层叠、 缩放、 裁剪等技术手段将所述次容 器中包含的内容显示在屏幕上。 本实施例所提供的网页显示方法， 通过使用次容器的面积表示次容器中所包含的 网页内容的重要性， 在确定将要显示的次容器时方便简洁， 避免了大量的运算过程， 从而也能加快网页在屏幕上的显示速度， 提高了用户的体验。 当然， 用户在对网页进行浏览时， 不可能仅仅浏览网页的一部分内容， 当用户需 要对当前所显示的部分之外的部分浏览时， 需要切换所显示的网页的内容， 基于此， 在上述实施例的基础上， 本申请还提供了第三种网页显示方法的实施方式。 参见图 3， 图 3为本申请实施例所提供的网页显示方法的第三种实施方式流程图。 所述方法包括： 步骤 301 : 获取待显示网页的源代码。 步骤 302: 解析所述源代码形成树状节点。 步骤 303 : 将所述树状节点按照所述源代码的样式规范进行排版。 步骤 304: 根据排版后的树状节点定位主容器。 步骤 305 : 定位所述主容器内的至少一个次容器。 步骤 306: 调整所述次容器的面积。 步骤 307: 绘制调整后的次容器， 将所述次容器所包含的待显示网页的元素在屏 幕上显 。 需要指出的， 步骤 301至步骤 307与上述两实施例中所述类似， 本申请在此不在 赘述。 步骤 308: 接收切换命令。 由上述实施例可知， 网页在屏幕上显示时， 默认放大显示重要性最高的次容器的 内容， 而当用户需要浏览其他次容器的内容时， 可以通过手势或者便携终端额外提供 的功能控件与便携终端产生交互操作， 放大显示目标次容器的内容。 当便携终端接收 到用户的手势或者功能控件等触发信息时， 将所述触发信号作为切换命令， 并根据所 述切换命令将目标次容器放大。 例如： 在目标次容器的内容上双击。 步骤 309: 生成所述目标次容器的缩放比例系数^ 对次容器进行切换时， 无须考虑目标次容器内的网页元素重要性， 仅仅针对所述 目标次容器与便携终端的屏幕进行调整。 因此， 生成目标次容器的缩放比例系数方法 可以为， 比较便携终端屏幕的宽度与主容器的宽度， 取二者之中最小值； 将所述最小 值与所述预设比例系数 k作乘法计算， 乘法计算的结果除以所述目标次容器的宽度， 得到第一缩放系数 ul ; 将所述主容器的高度值除以所述目标次容器的高度值， 得到第 二缩放系数 u2; 将所述 ul和所述 u2中的最小值确定为所述缩放比例系数 u， 如果 u 小于 1则取值为 1 ; 或者按照上述实施例所述的方法计算得到每个次容器预设比例系 数。 当然， 生成缩放比例系数 u的方法不限于此， 还可以为其他任意适用的方法， 例 如根据次容器的像素值生成， 本申请对此不做限制。 步骤 310: 将所述目标次容器的面积进行 u倍调整， 并对应的调整其他次容器的 面积， 以保持次容器的总宽度不变。 当有切换命令触发时， 次容器的重要性发生变化， 目标次容器成为重要性较高的 次容器。 因此， 所述目标次容器的面积在显示前需要进行放大， 而为了保证调整后次 容器的总宽度不变， 将所述目标次容器的面积进行放大时， 需要将其他的次容器进行 相应缩小； 或者根据上述实施例所述的每个次容器的预设比例系数， 将目标次容器按 照其自身的预设比例系数放大， 将当前所显示的次容器相应缩小。 步骤 311 : 绘制调整后的次容器， 将所述调整后的次容器的元素在屏幕上进行显 示。 调整后的次容器， 目标次容器作为重要性较高的次容器面积增大， 其他次容器的 面积缩小， 网页总体布局发生变化， 当再次绘制后， 屏幕上清楚显示的是放大后的目 标次容器的内容。 绘制调整后的次容器的方法与绘制所述当前所显示的次容器的方法 类似， 本申请在此不再赘述。 需要指出的， 将所述目标次容器放大并将其他次容器缩小的过程中， 可以为传统 的画面， 如放大目标次容器， 缩小其他的次容器， 也可以通过定时设置， 使切换过程 分几个步骤完成， 该过程可以设置为动画效果， 提高用户的交互体验。 本实施例所提供的网页显示方法， 通过用户与便携终端的交互操作， 将当前所显 示的次容器的内容切换为目标次容器的内容， 切换过程中， 放大所述目标次容器， 缩 小当前所显示的次容器， 不仅能提高目标次容器的可读性， 而且能够保留当前次容器 的细节排版。 本申请所提供的网页显示方法， 通过将待显示网页源代码解析形成树状节点， 并 定位所述树状节点的主容器及次容器， 其中， 每个所述次容器包含一部分待显示网页 的元素。 然后调整每个所述次容器的面积， 并绘制调整后的次容器， 所述次容器包含 的待显示网页的元素在屏幕上显示。 与现有技术相比， 本申请实施例通过将所述待显 示网页模块化， 当对网页的部分元素进行调整时， 实质上所调整的对象是包含该部分 元素的次容器， 因此， 该部分元素的放大不会破坏该次容器的细节排版。 同时， 由于 各个次容器是相互独立的模块， 因此， 对某一次容器的面积进行调整时， 其他次容器 的排版不会受到任何影响。 由此可见， 本申请实施例所提供的网页显示方法及装置， 不但能保证网页的可读性，在此基础上也能够保留网页的细节排版， 改善了用户体验。 下面将结合图 4所示的优选实施方式对上述优选实施过程做进一步的描述。 图 4是本申请优选实施例的网页显示方法的示意图。 如图 4所示， A为主容器， B1和 B2是两个次容器， 根据 B1和 B2被浏览的次数进行判断发现 B1的重要性要大 于 B2的重要性， 因此， B1被整体放大， B2被整体缩小， 而 A顺应 B1进行了高度的 调整。 当然上述网页显示的变化过程不仅局限于上述根据次容器被浏览的次数决定次 容器的重要性， 当然还可以采用其他决定因素。 另外， 如果用户在移动终端可以通过 手势或者便携终端额外提供的功能控件与便携终端产生交互操作， 希望放大显示 B1 从容器中的内容时， 此时将摆脱之前已经限定的 B1和 B2这两个次容器的重要性， 而 直接将 B1这个次容器设置为当前重要性最高的次容器。 与上述实现方法相对应， 本申请实施例还提供了一种网页显示装置。 参见图 5， 图 5为本申请实施例所提供的网页显示装置结构示意图。 所述装置包括： 获取单元 11、 解析单元 12、 排版单元 13、 第一定位单元 14、 第 二定位单元 15、 第一调整单元 16和绘制单元 17， 其中， 所述获取单元 11， 设置为获 取待显示网页的源代码； 所述解析单元 12， 设置为解析所述获取单元 11获取到的源 代码形成树状节点； 所述排版单元 13， 设置为将所述解析单元 12解析形成的树状节 点按照所述源代码的样式规范进行排版； 所述第一定位单元 14， 设置为根据所述排版 单元 13排版后的宽度定位主容器； 所述第二定位单元 15， 设置为定位所述主容器内 的至少一个次容器， 其中， 每个所述次容器包含一部分所述待显示网页的元素； 所述 第一调整单元 16， 设置为调整所述第二定位单元 15定位得到次容器的面积； 所述绘 制单元 17， 设置为绘制所述第一调整单元 16调整后的次容器， 将所述调整后的次容 器所包含的待显示网页的元素在屏幕上显示。 其中， 所述第一定位单元包括： 第一判断单元和第二判断单元； 所述第二定位单 元包括： 第三判断单元； 所述第一调整单元包括： 第一计算单元、 第一比较单元和缩 放单元。 所述装置中各个单元的功能和作用的实现过程详见上述方法中对应的实现过程， 在此不再赘述。 本申请所提供的网页显示装置， 通过将待显示网页源代码解析形成树状节点， 并 定位所述树状节点的主容器及次容器， 其中， 每个所述次容器包含一部分待显示网页 的元素。 然后调整每个所述次容器的面积， 并绘制调整后的次容器， 所述次容器包含 的待显示网页的元素在屏幕上显示。 与现有技术相比， 本申请实施例通过将所述待显 示网页模块化， 当对网页的部分元素进行调整时， 实质上所调整的对象是包含该部分 元素的次容器， 因此， 该部分元素的放大不会破坏该次容器的细节排版。 同时， 由于 各个次容器是相互独立的模块， 因此， 对某一次容器的面积进行调整时， 其他次容器 的排版不会受到任何影响。 由此可见， 本申请实施例所提供的网页显示方法及装置， 不但能保证网页的可读性，在此基础上也能够保留网页的细节排版， 改善了用户体验。 参见图 6， 图 6为本申请实施例所提供的网页显示装置的第二种实施方式结构示 意图。 在上述实施例的基础上， 本实施例所述装置包括： 获取单元 20、 解析单元 21、 排 版单元 22、第一判断单元 23、第二判断单元 24、第三判断单元 25、第一计算单元 26、 第一比较单元 27、 缩放单元 28和绘制单元 29， 其中， 所述获取单元 20、 所述解析单 元 21、 所述排版单元 22和所述绘制单元 29的功能及连接方式与上述实施例类似， 本 申请在此不再赘述。 所述第一判断单元 23， 设置为判断当前节点的上级节点是否为空 或者其上级节点是否为主容器； 所述第二判断单元 24， 设置为当所述当前节点的上级 节点为空或者为主容器时，判断当前节点的高度是否为固定值；所述第三判断单元 26， 设置为判断所述当前节点的上级节点是否为主容器； 所述第一计算单元 26， 设置为将 计算每个所述次容器的面积，并得到所有次容器面积的平均值；所述第一比较单元 27， 设置为比较所述第一计算单元 26 计算得到的每个所述次容器的面积与所述平均值的 大小； 所述缩放单元 28， 设置为当所述次容器的面积大于所述平均值， 将所述次容器 按预设比例系数 k进行放大， 其中， 所述 k大于 1 ; 同时， 将其他次容器进行相应缩 小， 以保持次容器的总宽度不变。 在上述实施例的基础上， 在本实施例中， 所述第一定位单元， 设置为当所述当前 节点高度不是固定值时， 如果上级节点为空， 将当前节点定位为主容器； 如果所述当 前节点的上级节点为主容器，当所述当前节点的宽度大于或等于根节点的宽度的 50%， 且大于或等于其上级节点的宽度的 90%， 将所述当前节点定位为主容器； 所述第二定 位单元， 设置为当所述第三判断单元判断得到所述当前节点的上级节点为主容器时， 如果所述当前节点的宽度为其上级节点的宽度的 20%到 80%， 将所述当前节点定位为 次容器。 所述装置中各个单元的功能和作用的实现过程详见上述方法中对应的实现过程， 在此不再赘述。 本实施例所提供的网页显示装置， 通过使用次容器的面积表示次容器中所包含的 网页内容的重要性， 在确定将要显示的次容器时方便简洁， 避免了大量的运算过程， 从而也能加快网页在屏幕上的显示速度， 提高了用户的体验。 为了方便用户对所显示内容的切换， 在上述实施例的基础上， 本申请实施例还提 供的第三种网页显示装置。 参见图 7， 图 7为本申请实施例所提供的网页显示装置的第三种实施方式结构示 意图。 所述装置包括： 获取单元 30、 解析单元 31、 排版单元 32、 第一定位单元 33、 第 二定位单元 34、 第一调整单元 35、 绘制单元 36、 接收单元 37、 生成单元 38和第二调 整单元 39， 其中， 所述获取单元 30、 所述解析单元 31、 所述排版单元 32、 所述第一 定位单元 33、所述第二定位单元 34、所述第一调整单元 35和所述绘制单元 36的功能 作用及连接关系与上述实施方式类似， 本申请在此不再赘述。 所述接收单元 37， 设置 为接收切换命令， 以放大显示目标次容器的内容； 所述生成单元 38， 设置为生成所述 目标次容器的缩放比例系数 u; 所述第二调整单元 39， 设置为当所述生成单元生成缩 放比例系数 u后， 将所述目标次容器的面积进行 u倍调整， 并对应调整其他次容器的 面积， 以保持次容器的总宽度不变。 在上述实施例的基础上， 在本实施例中， 所述绘制单元， 还设置为绘制所述第二 调整单元调整后的次容器， 将所述次容器的元素在屏幕上进行显示。 其中， 所述生成单元包括： 第二比较单元、 第二计算单元和确定单元， 所述第二 比较单元， 设置为比较所述屏幕的宽度与所述主容器的宽度， 取二者之中的最小值； 所述第二计算单元， 设置为将所述最小值与所述预设比例系数 k作乘法计算， 乘法计 算的结果除以所述目标次容器的宽度， 得到第一缩放系数 ul ; 将所述主容器的高度值 除以所述目标次容器的高度值， 得到第二缩放系数 u2; 所述确定单元， 设置为将所述 第二计算单元计算得到的 ul和 u2中的最小值确定为所述缩放比例系数^ 所述装置中各个单元的功能和作用的实现过程详见上述方法中对应的实现过程， 在此不再赘述。 本实施例所提供的网页显示装置， 通过用户与便携终端的交互操作， 将当前所显 示的次容器的内容切换为目标次容器的内容， 切换过程中， 放大所述目标次容器， 缩 小当前所显示的次容器， 不仅能提高目标次容器的可读性， 而且能够保留当前次容器 的细节排版。 综上所述， 本申请所提供的网页显示方法及装置， 通过将待显示网页源代码解析 形成树状节点， 并定位所述树状节点的主容器及次容器， 其中， 每个所述次容器包含 一部分待显示网页的元素。然后调整每个所述次容器的面积，并绘制调整后的次容器， 所述次容器包含的待显示网页的元素在屏幕上显示。 与现有技术相比， 本申请实施例 通过将所述待显示网页模块化， 当对网页的部分元素进行调整时， 实质上所调整的对 象是包含该部分元素的次容器， 因此， 该部分元素的放大不会破坏该次容器的细节排 版。 同时， 由于各个次容器是相互独立的模块， 因此， 对某一次容器的面积进行调整 时， 其他次容器的排版不会受到任何影响。 由此可见， 本申请实施例所提供的网页显 示方法及装置， 不但能保证网页的可读性， 在此基础上也能够保留网页的细节排版， 改善了用户体验。 本发明可以在由计算机执行的计算机可执行指令的一般上下文中描述， 例如程序 模块。 一般地， 程序模块包括执行特定任务或实现特定抽象数据类型的例程、 程序、 对象、 组件、 数据结构等等。 也可以在分布式计算环境中实践本发明， 在这些分布式 计算环境中， 由通过通信网络而被连接的远程处理设备来执行任务。 在分布式计算环 境中， 程序模块可以位于包括存储设备在内的本地和远程计算机存储介质中。 需要说明的是， 在本文中， 诸如第一和第二等之类的关系术语仅仅用来将一个实 体或者操作与另一个实体或操作区分开来， 而不一定要求或者暗示这些实体或操作之 间存在任何这种实际的关系或者顺序。 而且， 术语"包括"、 "包含 "或者其任何其他变 体意在涵盖非排他性的包含， 从而使得包括一系列要素的过程、 方法、 物品或者设备 不仅包括那些要素， 而且还包括没有明确列出的其他要素，或者是还包括为这种过程、 方法、物品或者设备所固有的要素。在没有更多限制的情况下， 由语句 "包括一个 ...... " 限定的要素， 并不排除在包括所述要素的过程、 方法、 物品或者设备中还存在另外的 相同要素。 以上所述仅是本发明的具体实施方式， 应当指出， 对于本技术领域的普通技术人 员来说， 在不脱离本发明原理的前提下， 还可以做出若干改进和润饰， 这些改进和润 饰也应视为本发明的保护范围。

Claims

权 利 要 求 书 、 一种网页显示方法， 所述方法包括：
获取待显示网页的源代码； 解析所述源代码形成树状节点；
将所述树状节点按照所述源代码的样式规范进行排版；
根据排版后的树状节点定位主容器；
定位所述主容器内的至少一个次容器， 其中， 每个所述次容器包含一部分 所述待显示网页的元素； 调整所述次容器的面积；
绘制调整后的次容器， 将所述调整后的次容器所包含的待显示网页的元素 在屏幕上显示。 、 根据权利要求 1所述的方法， 其中， 所述根据排版后的树状节点定位主容器包 括： 判断当前节点的上级节点是否为空或者为所述主容器；
当所述当前节点的上级节点为空或者为所述主容器时， 判断所述当前节点 的高度是否为固定值；
当所述当前节点的高度不是所述固定值时， 如果所述当前节点的上级节点 为空， 则将所述当前节点定位为所述主容器； 如果所述当前节点的上级节点为所述主容器， 当所述当前节点的宽度大于 或等于根节点的宽度的 50%， 且大于或等于该当前节点的上级节点的宽度的 90%， 将所述当前节点定位为所述主容器。 、 根据权利要求 2所述的方法， 其中， 定位所述主容器内包含的至少一个次容器 包括： 判断所述当前节点的上级节点是否为所述主容器；
当所述上级节点为所述主容器， 如果所述当前节点的宽度为该当前节点的 上级节点的宽度的 20%到 80%， 将所述当前节点定位为所述次容器。 、 根据权利要求 1所述的方法， 其中， 所述调整所述次容器的面积包括： 计算每个所述次容器的面积， 并得到所有次容器的面积的平均值； 比较每个所述次容器的面积与所述平均值的大小；
若所述次容器的面积大于所述平均值， 则将所述次容器按预设比例系数 k 进行放大， 其中， 所述 k大于 1 ; 同时， 将其他次容器进行相应缩小， 以保持 次容器的总宽度不变。 、 根据权利要求 1至 4中任一权项所述的方法， 其中， 所述方法还包括： 接收切换命令， 以放大显示目标次容器的内容；
生成所述目标次容器的缩放比例系数 u;
将所述目标次容器的面积进行 u倍调整， 并对应调整其他次容器的面积， 以保持次容器的总宽度不变；
绘制调整后的次容器， 将所述调整后的次容器的元素在屏幕上进行显示。 、 根据权利要求 5所述的方法，其中，所述生成所述目标次容器的缩放比例系数， 包括： 比较所述屏幕的宽度与所述主容器的宽度， 取二者之中的最小值； 将所述最小值与预设比例系数 k作乘法计算， 再将乘法计算得到的结果除 以所述目标次容器的宽度， 得到第一缩放系数 ul ; 将所述主容器的高度值除以 所述目标次容器的高度值， 得到第二缩放系数 u2; 将所述 ul和所述 u2中的最小值确定为所述缩放比例系数 u。 、 一种网页显示装置， 所述装置包括： 获取单元， 设置为获取待显示网页的源代码；
解析单元， 设置为解析所述获取单元获取到的源代码形成树状节点； 排版单元， 设置为将所述解析单元解析形成的树状节点按照所述源代码的 样式规范进行排版； 第一定位单元， 设置为根据所述排版单元排版后的树状节点定位主容器； 第二定位单元， 设置为定位所述主容器内的至少一个次容器， 其中， 每个 所述次容器包含一部分所述待显示网页的元素；
第一调整单元， 设置为调整所述第二定位单元定位得到次容器的面积；
16
+ 绘制单元， 设置为绘制所述第一调整单元调整后的次容器， 将所述调整后 的次容器所包含的待显示网页的元素在屏幕上显示。 、 根据权利要求 7所述的装置， 其中， 所述第一定位单元包括： 第一判断单元和 第二判断单元， 其中，
所述第一判断单元， 设置为判断当前节点的上级节点是否为空或者其上级 节点是否为主容器；
所述第二判断单元， 设置为当所述当前节点的上级节点为空或者为所述主 容器时， 判断所述当前节点的高度是否为固定值；
所述第一定位单元， 设置为当所述当前节点高度不是所述固定值时， 如果 所述当前节点的上级节点为空， 将所述当前节点定位为所述主容器； 如果所述 当前节点的上级节点为所述主容器， 当所述当前节点的宽度大于或等于根节点 的宽度的 50%， 且大于或等于该当前节点的上级节点的宽度的 90%， 则将所述 当前节点定位为所述主容器。 、 根据权利要求 8所述的装置， 其中， 所述第二定位单元包括： 第三判断单元， 其中，
所述第三判断单元， 设置为判断所述当前节点的上级节点是否为所述主容 器；
所述第二定位单元， 设置为当所述当前节点的上级节点为所述主容器时， 如果所述当前节点的宽度为该当前节点的上级节点的宽度的 20%到 80%， 则将 所述当前节点定位为所述次容器。 0、 根据权利要求 7所述的装置， 其中， 所述第一调整单元包括： 第一计算单元、 第一比较单元和缩放单元， 其中， 所述第一计算单元， 设置为计算每个所述次容器的面积， 并得到所有次容 器面积的平均值；
所述第一比较单元， 设置为比较所述第一计算单元计算得到的每个所述次 容器的面积与所述平均值的大小；
所述缩放单元， 设置为若所述次容器的面积大于所述平均值， 将所述次容 器按预设比例系数 k进行放大， 其中， 所述 k大于 1 ; 同时， 将其他次容器进 行相应缩小， 以保持次容器的总宽度不变。 、 根据权利要求 7至 10中任一权项所述装置，其中，所述装置还包括：接收单元、 生成单元和第二调整单元， 其中， 所述接收单元， 设置为接收切换命令；
所述生成单元， 设置为生成所述目标次容器的缩放比例系数 u; 所述第二调整单元， 设置为当所述生成单元生成所述缩放比例系数 u后， 将所述目标次容器的面积进行 u倍调整， 并对应调整其他次容器的面积， 以保 持次容器的总宽度不变；
所述绘制单元， 还设置为绘制所述第二调整单元调整后的次容器， 将所述 调整后的次容器的元素在屏幕上进行显示。 、 根据权利要求 11所述的装置， 其中， 所述生成单元包括： 第二比较单元、 第二 计算单元和确定单元， 其中，
所述第二比较单元， 设置为比较所述屏幕的宽度与所述主容器的宽度， 取 二者之中的最小值；
所述第二计算单元， 设置为将所述最小值与所述预设比例系数 k作乘法计 算， 并将乘法计算得到的结果除以所述目标次容器的宽度， 得到第一缩放系数 ul ; 将所述主容器的高度值除以所述目标次容器的高度值， 得到第二缩放系数 u2; 所述确定单元， 设置为将所述第二计算单元计算得到的 ul和 u2中的最小 值确定为所述缩放比例系数 u。 、 一种具有处理器可执行的程序代码的计算机可读介质， 在被执行时， 所述程序 代码使得处理器执行下述步骤：
获取待显示网页的源代码； 解析所述源代码形成树状节点；
将所述树状节点按照所述源代码的样式规范进行排版；
根据排版后的树状节点定位主容器；
定位所述主容器内的至少一个次容器， 其中， 每个所述次容器包含一部分 所述待显示网页的元素； 调整所述次容器的面积； 绘制调整后的次容器， 将所述调整后的次容器所包含的待显示网页的元素 在屏幕上显示。 、 一种网页显示系统， 包括： 处理器， 所述处理器， 设置为获取待显示网页的源 代码； 解析所述源代码形成树状节点； 将所述树状节点按照所述源代码的样式 规范进行排版； 根据排版后的树状节点定位主容器； 定位所述主容器内的至少 一个次容器， 其中， 每个所述次容器包含一部分所述待显示网页的元素； 调整 所述次容器的面积； 以及， 绘制调整后的次容器， 将所述调整后的次容器所包 含的待显示网页的元素在屏幕上显示。 、 一种网页显示方法， 所述方法包括： 按照待显示网页的源代码的样式规范对树状节点进行排版， 其中， 所述树 状节点是对所述源代码进行解析后形成的； 根据排版后的树状节点定位主容器以及所述主容器内的至少一个次容器， 其中， 每个次容器包含所述待显示网页中的部分元素；
通过对所述至少一个次容器的面积进行调整， 改变在屏幕上显示的元素。 、 根据权利要求 15所述的方法， 其中， 根据排版后的树状节点定位主容器包括： 在确定当前节点的上级节点是否为空的情况下， 判断所述当前节点的高度 是否为固定值；
如果否， 则将所述当前节点定位为所述主容器。 、 根据权利要求 15所述的方法， 其中， 根据排版后的树状节点定位主容器包括： 判断当前节点的上级节点是否为空或者为所述主容器；
在确定所述当前节点的上级节点为所述主容器的情况下， 判断所述当前节 点的宽度是否大于或等于根节点的宽度的第一百分比， 且大于或等于该当前节 点的上级节点的宽度的第二百分比；
如果是， 则继续判断所述当前节点的高度是否为固定值； 当所述当前节点的高度并非为所述固定值时， 则将所述当前节点定位为所 述主容器。 、 根据权利要求 16或 17所述的方法， 其中， 定位所述主容器内包含的至少一个 次容器包括： 判断所述当前节点的上级节点是否为所述主容器；
如果所述当前节点的上级节点为所述主容器， 则继续判断所述当前节点的 宽度是否归属于预设取值范围， 其中， 所述预设取值范围的两个端点值分别为 所述当前节点的上级节点的宽度与第三百分比的乘积， 以及所述当前节点的上 级节点的宽度与第四百分比的乘积， 所述第三百分比小于所述第四百分比； 如果所述宽度归属于所述预设取值范围， 将所述当前节点定位为所述次容 器。 、 根据权利要求 15所述的方法， 其中， 对所述次容器的面积进行调整包括： 分别计算每个次容器的面积， 并求取全部次容器的面积的平均值； 分别比较每个次容器的面积与所述平均值的大小；
若出现次容器的面积大于所述平均值， 则将该次容器按预设比例系数 k进 行放大，其中， k大于 1 ; 同时，在保持所述全部次容器的总宽度不变的情况下， 将其他次容器进行缩小 、 根据权利要求 19所述的方法， 其中， k是由各个次容器被浏览的频率决定的。 、 根据权利要求 19所述的方法，其中，计算每个次容器的面积包括以下方式之一： 计算该次容器的宽度与该次容器的高度的乘积， 获取该次容器的面积； 或者， 分别计算该次容器中每一种类型的网页元素的面积， 并将各种类型的网页 元素的面积相加求取该次容器的面积。 、 根据权利要求 15至 18中任一项所述的方法， 其中， 所述方法还包括： 接收切换命令， 以放大所述待显示的次容器中的内容； 生成与所述待显示的次容器对应的缩放比例系数 u;
采用 u对所述待显示的次容器的面积进行调整， 同时调整其余次容器的面 积， 以保持全部次容器的总宽度不变；
绘制调整后的次容器， 将所述调整后的次容器的元素在屏幕上进行显示。 、 根据权利要求 22所述的方法，其中， 生成与所述待显示的次容器对应的缩放比 例系数 u包括： 在所述屏幕的宽度与所述主容器的宽度中选取较小值； 将所述较小值与预设比例系数 k作乘法计算， 再将乘法计算得到的结果除 以所述待显示的次容器的宽度， 得到第一缩放系数 ul ; 将所述主容器的高度值 除以所述待显示的次容器的高度值， 得到第二缩放系数 u2;
将 ul和 u2中的较小值确定为所述缩放比例系数 u。 、 一种网页显示装置， 所述装置包括： 处理器； 所述处理器设置为： 按照待显示网页的源代码的样式规范对树状节点进行排版， 其中， 所述树 状节点是对所述源代码进行解析后形成的；
根据排版后的树状节点定位主容器以及所述主容器内的至少一个次容器， 其中， 每个次容器包含所述待显示网页中的部分元素；
通过对所述至少一个次容器的面积进行调整， 改变在屏幕上显示的元素。 、 根据权利要求 24所述的装置， 其中， 所述处理器设置为： 在确定当前节点的上级节点是否为空的情况下， 判断所述当前节点的高度 是否为固定值；
如果否， 则将所述当前节点定位为所述主容器。 、 根据权利要求 24所述的装置， 其中， 所述处理器设置为： 判断当前节点的上级节点是否为空或者为所述主容器；
在确定所述当前节点的上级节点为所述主容器的情况下， 判断所述当前节 点的宽度是否大于或等于根节点的宽度的第一百分比， 且大于或等于该当前节 点的上级节点的宽度的第二百分比；
如果是， 则继续判断所述当前节点的高度是否为固定值； 当所述当前节点的高度并非为所述固定值时， 则将所述当前节点定位为所 述主容器。 、 根据权利要求 25或 26所述的装置， 其中， 所述处理器设置为： 判断所述当前节点的上级节点是否为所述主容器；
如果所述当前节点的上级节点为所述主容器， 则继续判断所述当前节点的 宽度是否归属于预设取值范围， 其中， 所述预设取值范围的两个端点值分别为 所述当前节点的上级节点的宽度与第三百分比的乘积， 以及所述当前节点的上 级节点的宽度与第四百分比的乘积， 所述第三百分比小于所述第四百分比； 如果所述宽度归属于所述预设取值范围， 将所述当前节点定位为所述次容 器。 、 根据权利要求 24所述的装置， 其中， 所述处理器设置为：
分别计算每个次容器的面积， 并求取全部次容器的面积的平均值； 分别比较每个次容器的面积与所述平均值的大小；
若出现次容器的面积大于所述平均值， 则将该次容器按预设比例系数 k进 行放大，其中， k大于 1 ; 同时，在保持所述全部次容器的总宽度不变的情况下， 将其他次容器进行缩小。 、 根据权利要求 28所述的装置，其中，所述处理器设置为按照以下方式之一计算 每个次容器的面积：
计算该次容器的宽度与该次容器的高度的乘积， 获取该次容器的面积； 或者，
分别计算该次容器中每一种类型的网页元素的面积， 并将各种类型的网页 元素的面积相加求取该次容器的面积。 、 根据权利要求 25至 28中任一项所述的装置， 其中， 所述处理器设置为： 接收切换命令， 以放大所述待显示的次容器中的内容； 生成与所述待显示的次容器对应的缩放比例系数 u;
采用 u对所述待显示的次容器的面积进行调整， 同时调整其余次容器的面 积， 以保持全部次容器的总宽度不变；
绘制调整后的次容器， 将所述调整后的次容器的元素在屏幕上进行显示。 、 根据权利要求 30所述的装置， 其中， 所述处理器设置为： 在所述屏幕的宽度与所述主容器的宽度中选取较小值；
将所述较小值与预设比例系数 k作乘法计算， 再将乘法计算得到的结果除 以所述待显示的次容器的宽度， 得到第一缩放系数 ul ; 将所述主容器的高度值 除以所述待显示的次容器的高度值， 得到第二缩放系数 u2;
将 ul和 u2中的较小值确定为所述缩放比例系数 u。
PCT/CN2014/078715 2013-11-29 2014-05-28 网页显示方法及装置 WO2015078159A1 (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
US15/167,819 US10339209B2 (en) 2013-11-29 2016-05-27 Webpage display method and device

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN201310629615.6A CN103605783B (zh) 2013-11-29 2013-11-29 网页显示方法及装置
CN201310629615.6 2013-11-29

Related Child Applications (1)

Application Number Title Priority Date Filing Date
US15/167,819 Continuation US10339209B2 (en) 2013-11-29 2016-05-27 Webpage display method and device

Publications (1)

Publication Number Publication Date
WO2015078159A1 true WO2015078159A1 (zh) 2015-06-04

Family

ID=50124005

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2014/078715 WO2015078159A1 (zh) 2013-11-29 2014-05-28 网页显示方法及装置

Country Status (3)

Country Link
US (1) US10339209B2 (zh)
CN (1) CN103605783B (zh)
WO (1) WO2015078159A1 (zh)

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105549984A (zh) * 2016-02-11 2016-05-04 贾占利 演示网页的方法及装置
CN118445344A (zh) * 2024-05-27 2024-08-06 和创（北京）科技股份有限公司 一种数据处理方法、装置及电子设备

Families Citing this family (12)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103605783B (zh) 2013-11-29 2017-09-29 优视科技有限公司 网页显示方法及装置
CN105022757A (zh) * 2014-04-29 2015-11-04 腾讯科技（深圳）有限公司 网页修改方法及网页修改装置
CN104965833B (zh) * 2014-06-13 2018-10-02 腾讯科技（深圳）有限公司 一种浏览器窗口中的页面显示方法及装置
CN105224564B (zh) * 2014-06-25 2019-02-15 广州市动景计算机科技有限公司 一种网页适应屏幕排版方法及装置
CN105068816A (zh) * 2015-08-26 2015-11-18 成都秋雷科技有限责任公司 一种生成html网页预览的方法
CN106802890A (zh) * 2015-11-25 2017-06-06 富士通株式会社 信息处理装置和方法以及信息定位装置
CN105975576B (zh) * 2016-05-04 2019-12-31 北京京东尚科信息技术有限公司 终端内容适配显示方法、装置和终端
CN108182190A (zh) * 2016-12-08 2018-06-19 北京京东尚科信息技术有限公司 用于呈现网页、生成自适应网页的方法、装置及电子设备
CN110781440A (zh) * 2019-10-31 2020-02-11 北京东软望海科技有限公司 容器高度的调整方法、装置、计算机设备及存储介质
US11468224B2 (en) * 2020-08-17 2022-10-11 IT Cadre, LLC Method for resizing elements of a document
CN114139078B (zh) * 2021-11-29 2024-05-24 中国平安财产保险股份有限公司 网页中元素提取方法、装置、计算机设备及可读存储介质
CN116501435B (zh) * 2023-06-28 2023-09-12 北京尽微致广信息技术有限公司 一种布局处理方法、装置及计算机存储介质

Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101499099A (zh) * 2009-03-23 2009-08-05 深圳市金蝶中间件有限公司 一种web页面布局的方法及系统
CN101853293A (zh) * 2010-05-26 2010-10-06 卓望数码技术（深圳）有限公司 一种自适应分页的方法及装置
CN101951405A (zh) * 2010-09-17 2011-01-19 中山大学 一种基于webkit的机顶盒中间件的实现方法
CN102779167A (zh) * 2012-06-21 2012-11-14 北京奇虎科技有限公司 在移动终端中显示网页的方法及系统
CN103064920A (zh) * 2012-12-20 2013-04-24 优视科技有限公司 移动终端中的页面字体大小缩放方法及装置
CN103605783A (zh) * 2013-11-29 2014-02-26 优视科技有限公司 网页显示方法及装置

Family Cites Families (16)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CA2424713C (en) * 2000-08-21 2007-12-04 Thoughtslinger Corporation Simultaneous multi-user document editing system
US7437670B2 (en) * 2001-03-29 2008-10-14 International Business Machines Corporation Magnifying the text of a link while still retaining browser function in the magnified display
JP4208858B2 (ja) * 2005-05-11 2009-01-14 キヤノン株式会社 レイアウト処理方法およびレイアウト処理装置およびレイアウト処理プログラム
US7818330B2 (en) * 2007-05-09 2010-10-19 Microsoft Corporation Block tracking mechanism for web personalization
US8806325B2 (en) * 2009-11-18 2014-08-12 Apple Inc. Mode identification for selective document content presentation
US20110289436A1 (en) * 2010-05-19 2011-11-24 Samsung Electronics Co., Ltd. Display apparatus and control method thereof
US20120110437A1 (en) * 2010-10-28 2012-05-03 Microsoft Corporation Style and layout caching of web content
US9679404B2 (en) * 2010-12-23 2017-06-13 Microsoft Technology Licensing, Llc Techniques for dynamic layout of presentation tiles on a grid
US20130080910A1 (en) * 2011-09-28 2013-03-28 International Business Machines Corporation Dynamic visualization of page element access rates in a web application
US20130212487A1 (en) * 2012-01-09 2013-08-15 Visa International Service Association Dynamic Page Content and Layouts Apparatuses, Methods and Systems
US20150234798A1 (en) * 2012-06-01 2015-08-20 Google Inc. System and method for changing a web ui application appearance based on state through css selector cascading
US9177009B2 (en) * 2012-06-28 2015-11-03 Microsoft Technology Licensing, Llc Generation based update system
US9632988B2 (en) * 2012-07-12 2017-04-25 International Business Machines Corporation Autonomous gadget management system
GB2520892A (en) * 2012-09-05 2015-06-03 Al Squared Executing secondary actions with respect to onscreen objects
US20140365873A1 (en) * 2013-06-10 2014-12-11 Hewlett-Packard Development Company, L.P. Computing devices for generating content layout
US10067634B2 (en) * 2013-09-17 2018-09-04 Amazon Technologies, Inc. Approaches for three-dimensional object display

Patent Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101499099A (zh) * 2009-03-23 2009-08-05 深圳市金蝶中间件有限公司 一种web页面布局的方法及系统
CN101853293A (zh) * 2010-05-26 2010-10-06 卓望数码技术（深圳）有限公司 一种自适应分页的方法及装置
CN101951405A (zh) * 2010-09-17 2011-01-19 中山大学 一种基于webkit的机顶盒中间件的实现方法
CN102779167A (zh) * 2012-06-21 2012-11-14 北京奇虎科技有限公司 在移动终端中显示网页的方法及系统
CN103064920A (zh) * 2012-12-20 2013-04-24 优视科技有限公司 移动终端中的页面字体大小缩放方法及装置
CN103605783A (zh) * 2013-11-29 2014-02-26 优视科技有限公司 网页显示方法及装置

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105549984A (zh) * 2016-02-11 2016-05-04 贾占利 演示网页的方法及装置
CN118445344A (zh) * 2024-05-27 2024-08-06 和创（北京）科技股份有限公司 一种数据处理方法、装置及电子设备

Also Published As

Publication number Publication date
US20160275054A1 (en) 2016-09-22
CN103605783A (zh) 2014-02-26
US10339209B2 (en) 2019-07-02
CN103605783B (zh) 2017-09-29

Similar Documents

Publication Publication Date Title
WO2015078159A1 (zh) 网页显示方法及装置
US9785623B2 (en) Identifying a set of related visible content elements in a markup language document
US10740540B2 (en) Techniques for programmatic magnification of visible content elements of markup language documents
US20120254733A1 (en) Method for Users to Create and Edit Web Page Layouts
US9542363B2 (en) Processing of page-image based document to generate a re-targeted document for different display devices which support different types of user input methods
US11112927B2 (en) Digital content automated layout system
WO2015196822A1 (zh) 一种网页适应屏幕排版方法及装置
US8751924B2 (en) Rule-based grid independent of content
WO2013097638A1 (zh) 网页重排方法、网页重排装置以及移动终端
US20090106653A1 (en) Adaptive document displaying apparatus and method
JP2013080321A (ja) 情報処理装置および方法、並びにプログラム
US20160232151A1 (en) Responsive course design system and method
CN114625996A (zh) 网页内容的分页方法、装置、电子设备及可读存储介质
CN112434487B (zh) 一种图文排版方法、装置及电子设备
JP2011086050A (ja) 情報処理端末及びコンピュータプログラム
JP2016095501A (ja) 電子表示装置の文書配置
CN113934339A (zh) 一种基于rem的页面自适应布局的方法及装置
CN118466807B (zh) 基于jQuery全屏轮播图控制方法及装置
JP2014164736A (ja) ウェブページ閲覧装置及びプログラム
JP2013080322A (ja) 情報処理装置および方法、プログラム、並びに記録媒体
US20130083077A1 (en) Method of displaying a digital content on a screen
JP6206141B2 (ja) 情報処理装置、情報処理方法、及び、情報処理プログラム
KR20100034578A (ko) 정보 단말기의 영상 크기 조절 장치 및 방법
CN118395029A (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: 14865252

Country of ref document: EP

Kind code of ref document: A1

NENP Non-entry into the national phase

Ref country code: DE

32PN Ep: public notification in the ep bulletin as address of the adressee cannot be established

Free format text: NOTING OF LOSS OF RIGHTS PURSUANT TO RULE 112(1) EPC (EPO FORM 1205N DATED 05/08/2016)

122 Ep: pct application non-entry in european phase

Ref document number: 14865252

Country of ref document: EP

Kind code of ref document: A1