WO2015139469A1 - 网页调整方法、装置及电子设备 - Google Patents

网页调整方法、装置及电子设备 Download PDF

Info

Publication number
WO2015139469A1
WO2015139469A1 PCT/CN2014/091198 CN2014091198W WO2015139469A1 WO 2015139469 A1 WO2015139469 A1 WO 2015139469A1 CN 2014091198 W CN2014091198 W CN 2014091198W WO 2015139469 A1 WO2015139469 A1 WO 2015139469A1
Authority
WO
WIPO (PCT)
Prior art keywords
webpage
node
content node
display area
touch point
Prior art date
Application number
PCT/CN2014/091198
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 小米科技有限责任公司
Priority to BR112015002042A priority Critical patent/BR112015002042A2/pt
Priority to JP2016508008A priority patent/JP6093088B2/ja
Priority to MX2015001411A priority patent/MX353129B/es
Priority to KR1020157002642A priority patent/KR20150119834A/ko
Priority to US14/658,422 priority patent/US20150269272A1/en
Publication of WO2015139469A1 publication Critical patent/WO2015139469A1/zh

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
    • G06F3/0488—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures
    • G06F3/04883—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures for inputting data by handwriting, e.g. gesture or text
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
    • G06F3/0488—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/04845—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range for image manipulation, e.g. dragging, rotation, expansion or change of colour
    • 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
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F2203/00—Indexing scheme relating to G06F3/00 - G06F3/048
    • G06F2203/048—Indexing scheme relating to G06F3/048
    • G06F2203/04806—Zoom, i.e. interaction techniques or interactors for controlling the zooming operation

Definitions

  • the present disclosure relates to the field of computers, and in particular, to a webpage adjustment method, apparatus, and electronic device.
  • the size of the screen is usually not too large.
  • Most of the existing webpages on the network are developed based on a PC (Personal Computer).
  • PC Personal Computer
  • the portable electronic device When a portable electronic device displays a webpage, it is necessary to adjust the webpage in order to facilitate the user's browsing.
  • the portable electronic device generally provides a webpage adjustment function, and when the user browses the webpage, the user can enlarge the webpage to a size suitable for browsing by gesture operation, and move the webpage by dragging and dropping, so that the entire content of the webpage can be browsed.
  • the present disclosure provides a webpage adjustment method, the method comprising:
  • the webpage adjustment instruction is an instruction generated when a touch operation on the currently displayed webpage is detected, and the webpage adjustment instruction includes at least one touchpoint coordinate;
  • the center of the display area corresponding to the target content node is adjusted to the center of the screen.
  • the method further includes:
  • the web page is scaled according to the scaling.
  • the determining, according to the at least one touch point and the DOM tree of the webpage, the target content node from each content node of the webpage including:
  • a content node whose display width is smaller than the screen width and whose display area is the largest is determined as the target content node.
  • the determining, according to the at least one touch point and the DOM tree of the webpage, the target content node from each content node of the webpage including:
  • a second candidate node set where the at least one touch point coordinate is a region surrounding the closed curve a content node whose intersection area occupies a ratio of an area enclosed by the closed curve greater than a predetermined ratio threshold;
  • a content node having the smallest display area in the second candidate node set is determined as the target content node.
  • the determining, according to the at least one touch point and the DOM tree of the webpage, the target content node from each content node of the webpage including:
  • a third candidate node set Determining, according to a DOM tree of the webpage, a third candidate node set, where the third candidate node set includes an area surrounding the closed curve, when the coordinates of the at least one touch point are coordinates of a closed curve a content node having the largest ratio of intersecting areas to the display area;
  • the method further includes:
  • the step of receiving the webpage adjustment instruction is performed.
  • the present disclosure provides a webpage adjustment apparatus, the apparatus comprising:
  • the instruction receiving module is configured to receive a webpage adjustment instruction, where the webpage adjustment instruction is an instruction generated when a touch operation on the currently displayed webpage is detected, and the webpage adjustment instruction includes at least one touchpoint coordinate;
  • a target node determining module configured to: according to the at least one touch point coordinate and a file object model of the webpage The DOM tree determines a target content node from each content node of the webpage;
  • an adjustment module configured to adjust a center of the display area corresponding to the target content node to a center of the screen.
  • the device further includes:
  • a calculation module configured to calculate a scaling ratio according to a current size of the display area corresponding to the target content node and a size of the screen
  • a scaling module configured to scale the webpage according to the scaling.
  • the target node determining module includes:
  • a first determining unit configured to determine, according to a DOM tree of the webpage, a first candidate node set, where the at least one touch point coordinate includes a touch point coordinate, where the first candidate node set includes Each content node where the coordinates of the touch point are located;
  • a second determining unit configured to determine, in the first candidate node set, a content node whose display width is smaller than a screen width and has a largest display area as the target content node.
  • the target node determining module includes:
  • a third determining unit configured to: when the at least one touch point coordinate is a coordinate of a closed curve, determine a second candidate node set according to the DOM tree of the webpage, where the second candidate node set includes a a content node in which a ratio of an area of the closed curve to the area enclosed by the closed curve is greater than a predetermined ratio threshold;
  • a fourth determining unit configured to determine, as the target content node, a content node that has a smallest display area in the second candidate node set.
  • the target node determining module includes:
  • a fifth determining unit configured to: when the at least one touch point coordinate is a coordinate of a closed curve, determine a third candidate node set according to the DOM tree of the webpage, where the third candidate node set includes a a content node in which the area of intersection of the closed curve occupies the largest proportion of the display area;
  • a sixth determining unit configured to determine, as the target content node, a content node that has the largest display area in the third candidate node set.
  • the device further includes:
  • a detecting module configured to detect, before receiving the webpage adjustment instruction, whether an average display area of characters in the plain text node in the webpage is less than a preset area threshold
  • the instruction receiving module is configured to: if the detection result of the detection module is that an average display area of a character in a plain text node in the webpage is less than a preset area threshold, perform the receiving the webpage adjustment instruction step.
  • the present disclosure provides an electronic device, the electronic device comprising:
  • a memory for storing the processor executable instructions
  • processor is configured to:
  • the webpage adjustment instruction is an instruction generated when a touch operation on the currently displayed webpage is detected, and the webpage adjustment instruction includes at least one touchpoint coordinate;
  • the center of the display area corresponding to the target content node is adjusted to the center of the screen.
  • the center of the display area corresponding to the node is adjusted to the center of the screen, and only the user can move the display area of the corresponding content node to the center of the screen suitable for the user to browse in one operation, and solve the related art in order to Adjusting a piece of content to a position suitable for browsing usually requires the user to perform multiple adjustment operations to simplify user operations and save user time.
  • FIG. 1 is an exemplary flowchart of a webpage adjustment method according to an exemplary embodiment
  • FIG. 2 is an exemplary flowchart of a webpage adjustment method according to another exemplary embodiment
  • FIG. 3 is a schematic diagram of a user operation according to another exemplary embodiment
  • FIG. 4 is a schematic diagram of another user operation according to another exemplary embodiment
  • FIG. 5 is a schematic diagram of still another user operation according to another exemplary embodiment
  • FIG. 6 is a schematic diagram of an adjusted webpage according to another exemplary embodiment
  • FIG. 7 is an exemplary flowchart of a webpage adjustment method according to still another exemplary embodiment
  • FIG. 8 is a schematic diagram of a web page adjusting apparatus according to an exemplary embodiment
  • FIG. 9 is a schematic diagram of a webpage adjustment apparatus according to another exemplary embodiment.
  • FIG. 10 is an exemplary block diagram of an electronic device according to an exemplary embodiment
  • FIG. 11 is an exemplary block diagram of an electronic device, according to an exemplary embodiment.
  • FIG. 1 is a flowchart of a webpage adjustment method according to an exemplary embodiment.
  • the webpage adjustment method may be used to adjust a currently displayed webpage in an electronic device.
  • the electronic device can be a smart phone, a tablet or an e-book reader.
  • the webpage adjustment method may include the following steps:
  • a webpage adjustment instruction is received, where the webpage adjustment instruction is an instruction generated when a touch operation on the currently displayed webpage is detected, and the webpage adjustment instruction includes at least one touchpoint coordinate;
  • step 104 determining a target content node from each content node of the webpage according to the at least one touch point coordinate and a DOM (Document Object Model) tree of the webpage;
  • step 106 the center of the display area corresponding to the target content node is adjusted to the center of the screen.
  • the webpage adjustment method is configured to receive a webpage adjustment instruction including at least one touchpoint coordinate, according to the at least one touchpoint coordinate and the file object model DOM tree of the webpage.
  • the target content node is determined in each content node of the webpage, and the center of the display area corresponding to the target content node is adjusted to the center of the screen, and only the user needs to operate the display area of the corresponding content node to be suitable for the user to browse.
  • the central position of the screen solves the problem that in the related art, if a certain piece of content in the webpage is adjusted to be suitable for browsing, the user usually needs to perform multiple adjustment operations to simplify the user operation and save the user time.
  • FIG. 2 is a flowchart of a webpage adjustment method according to another exemplary embodiment.
  • the webpage adjustment method may be used to adjust a currently displayed webpage in an electronic device.
  • the electronic device can be a smart phone, a tablet or an e-book reader.
  • the webpage adjustment method may include the following steps:
  • step 202 a webpage adjustment instruction is received, where the webpage adjustment instruction includes at least one touch point coordinate;
  • the webpage adjustment instruction is an instruction generated when a touch operation on a webpage currently displayed by the user is detected.
  • the touch operation of the currently displayed webpage by the user may be a click operation or a sliding operation.
  • the webpage adjustment instruction includes the coordinates of the touch point of the user's click position; if the user operates as a sliding operation, and the sliding track is a closed curve, the webpage adjustment instruction includes the closed The coordinates of each touch point through which the curve passes.
  • step 204 when the coordinate of the at least one touch point includes a touch point coordinate, the first candidate node set is determined according to the DOM tree of the webpage, where the first candidate node set includes the coordinates of the touch point.
  • each visual content node in the DOM tree of the web page can correspond to a rectangular display area in the screen.
  • some large nodes may contain one or more small nodes, and correspondingly a rectangular display area displayed on the screen as a large rectangular display area contains one or more small rectangular display areas.
  • FIG. 3 Taking an electronic device as a smart phone as an example, please refer to a user operation diagram shown in FIG. 3, in which four first-level visualized content nodes are displayed in the current webpage, corresponding to the four rectangular regions A and B in FIG. 3 respectively. , C and D; the first-level visualized content node corresponding to the B area further includes a second-level visualized content node corresponding to the rectangular area B 1 in FIG. 3; the second-level visualized content node corresponding to the B 1 area further includes three The three-level visualization content node corresponds to the rectangular areas B 11 , B 12 and B 13 in FIG.
  • the generated webpage adjustment instruction includes the touch point coordinates of the click location of the user, and the smart phone determines that the touchpoint coordinates are in the B13 area according to the touchpoint coordinates and the DOM tree of the webpage.
  • the area including the touch point coordinates has B, B 1 and B 13 ; the smartphone determines that the first candidate node set is a set of content nodes corresponding to the areas B, B 1 and B 13 .
  • step 206 the content node whose display width is smaller than the screen width and the display area is the largest in the first candidate node set is determined as the target content node;
  • the width of the area B is the same as the width of the screen, and the display width of the content nodes corresponding to the areas B 1 and B 13 in the first candidate node set is smaller than the screen width, and the area of the area B 1 is larger than the area B 13 . Therefore, the content node corresponding to the smartphone selection area B 1 is the target content node.
  • step 208 when the coordinates of the at least one touch point are the coordinates of a closed curve, the second candidate node set is determined according to the DOM tree of the webpage, and the second candidate node set includes the area surrounding the closed curve. a content node whose intersection area occupies a ratio of an area enclosed by the closed curve greater than a predetermined ratio threshold;
  • the predetermined ratio threshold may be a proportional threshold set by the developer in advance, such as 50%, 70%, or 80%, etc., and the exemplary embodiment does not limit the value of the predetermined ratio threshold.
  • the preset ratio threshold is 50% as an example.
  • the smart phone displays all the visual content of the entire webpage on the screen. Nodes, the display areas corresponding to each node are shown in Figure 4.
  • the sliding track is a closed curve, and the generated webpage adjustment instruction includes coordinates of each touch point on the sliding track of the user, and the smart phone coordinates according to the touch points on the sliding track.
  • the DOM tree of the webpage determines that the display area covered by the closed curve surrounded by the coordinates of the respective touch points has all the areas except the area A, wherein the intersecting area with the area enclosed by the closed curve occupies the closed curve the proportion of the display area is greater than 50% of the area enclosed by a region of the B and B 1, B smartphone set region. 1 B and the content corresponding nodes is determined as a second candidate set of nodes.
  • step 210 the content node with the smallest display area in the second candidate node set is determined as the target content node
  • the smartphone determines the content node corresponding to the area B 1 as the target content node.
  • step 212 when the coordinates of the at least one touch point are the coordinates of a closed curve, the third candidate node set is determined according to the DOM tree of the webpage, and the third candidate node set includes the area surrounding the closed curve. a content node whose intersection area accounts for the largest proportion of the display area;
  • FIG. 5 shows.
  • the generated webpage adjustment instruction includes coordinates of each touch point on the sliding track of the user, and the smart phone coordinates according to the touch points on the sliding track.
  • the DOM tree of the webpage determines that the display area covered by the closed curve surrounded by the coordinates of the respective touch points has all the areas except the area A, wherein the area of the intersection with the area enclosed by the closed curve occupies the display area
  • step 214 the content node having the largest display area in the third candidate node set is determined as the target content node
  • the area of the area B 13 is larger than the area of the areas B 11 and B 12 , and therefore, the smartphone determines the content node corresponding to the area B 13 as the target content node.
  • step 216 the zoom ratio is calculated according to the current size of the display area corresponding to the target content node and the size of the screen, and the web page is scaled according to the zoom ratio.
  • the electronic device may preset the optimal ratio of the zoomed display area of the target content node to the entire screen, for example, setting the optimal ratio of the width of the zoomed display area to the screen width or setting the target content.
  • the height of the display area after the node is scaled to the optimal ratio of the height of the screen.
  • the optimal ratio may be 80%, 100%, 120% or other values. For this reason, the exemplary embodiment is not limited.
  • the width of the display area scaled by the target content node is 100% of the screen width
  • the current width of the display area corresponding to the target content node is 5, and the screen width is 10, and the zoom ratio is set.
  • the zoom ratio is -50% (ie, 50% reduction).
  • the smartphone determines the area B 1 by the method shown in any of steps 204 to 206 or steps 208 to 210 or steps 212 to 214.
  • the corresponding visual content node is the target content node, and the center of the area B 1 is adjusted to the center of the screen, and the width of the area B 1 is adjusted to the width of the screen according to the calculated scaling ratio. Show.
  • the webpage adjustment method shown in this exemplary embodiment receives a webpage adjustment instruction including at least one touchpoint coordinate, according to the at least one touchpoint and the file object model DOM tree of the webpage from the webpage.
  • the target content node is determined in each content node, and the center of the display area corresponding to the target content node is adjusted to the center of the screen, and only the user needs to operate the display area of the corresponding content node to the screen suitable for the user to browse.
  • the central location solves the problem that in the related art, if a certain content in the webpage is adjusted to be suitable for browsing, the user usually needs to perform multiple adjustment operations to simplify the user operation and save the user time.
  • the webpage adjustment method provided by the exemplary embodiment calculates a zoom ratio according to a current size of a display area corresponding to the target content node and a size of the screen, and scales the webpage according to the zoom ratio, and the target content node is The corresponding display area is adjusted to a better browsing size, thereby further improving the user experience and simplifying user operations.
  • FIG. 7 is a flowchart of a webpage adjustment method according to another exemplary embodiment.
  • the webpage adjustment method may be used to adjust a currently displayed webpage in an electronic device.
  • the electronic device can be a smart phone, a tablet or an e-book reader.
  • the webpage adjustment method may include the following steps:
  • step 302 it is detected whether an average display area of characters in the plain text node in the currently displayed webpage is less than a preset area threshold
  • the processing resources and power can be used to respond to web page adjustment commands only for web pages that need to be adjusted. That is, it is detected whether the average display area of the characters in the plain text node in the currently displayed webpage is smaller than a preset area threshold. If the value is less than, the display area of the webpage in the default state is smaller and needs to be adjusted. Otherwise, No adjustments are made.
  • the area threshold may be a fixed value or may be determined according to the resolution and size of the screen of the electronic device.
  • the developer can determine the set of webpages in the network that need not be adjusted by manual annotation, and calculate the average display area s 1 of the characters in the plain text node in each webpage in the collection, when displaying the webpage, the electronic The device first obtains the average display area s 2 of the characters in the plain text node of the current webpage, and determines whether s 2 ⁇ k*s 1 is established, wherein k is a proportional parameter preset by the developer, or may be based on the electronic
  • the resolution of the screen of the device and the scale parameter determined by the size are not limited in this exemplary embodiment.
  • step 304 if the average display area of the characters in the plain text node in the currently displayed webpage is less than the preset area threshold, the webpage adjustment instruction is received, and the webpage adjustment instruction includes at least one touchpoint coordinate;
  • the webpage adjustment instruction is an instruction generated when a touch operation on a webpage currently displayed by the user is detected.
  • the touch operation of the currently displayed webpage by the user may be a click operation or a sliding operation.
  • the webpage adjustment instruction includes the coordinates of the touch point of the user's click position; if the user operates as a sliding operation, and the sliding track is a closed curve, the webpage adjustment instruction includes the closed The coordinates of each touch point through which the curve passes.
  • step 306 when the at least one touch point coordinate includes a touch point coordinate, the first candidate node set is determined according to the DOM tree of the webpage, where the first candidate node set includes the touch point coordinate Individual content nodes;
  • each visual content node in the DOM tree of the web page can correspond to a rectangular display area in the screen.
  • some large nodes may contain one or more small nodes, and correspondingly a rectangular display area displayed on the screen as a large rectangular display area contains one or more small rectangular display areas.
  • FIG. 3 Taking an electronic device as a smart phone as an example, please refer to a user operation diagram shown in FIG. 3, in which four first-level visualized content nodes are displayed in the current webpage, corresponding to the four rectangular regions A and B in FIG. 3 respectively. , C and D; the first-level visualized content node corresponding to the B area further includes a second-level visualized content node corresponding to the rectangular area B 1 in FIG. 3; the second-level visualized content node corresponding to the B 1 area further includes three The three-level visualization content node corresponds to the rectangular areas B 11 , B 12 and B 13 in FIG.
  • the generated webpage adjustment instruction includes the touch point coordinates of the click location of the user, and the smart phone determines that the touchpoint coordinates are in the B13 area according to the touchpoint coordinates and the DOM tree of the webpage.
  • the area including the touch point coordinates has B, B 1 and B 13 ; the smartphone determines that the first candidate node set is a set of content nodes corresponding to the areas B, B 1 and B 13 .
  • step 308 the content node whose display width is smaller than the screen width and whose display area is the largest is determined as the target content node in the first candidate node set;
  • the width of the area B is the same as the width of the screen, and the display width of the content nodes corresponding to the areas B 1 and B 13 in the first candidate node set is smaller than the screen width, and the area of the area B 1 is larger than the area B 13 . Therefore, the content node corresponding to the smartphone selection area B 1 is the target content node.
  • step 310 when the coordinates of the at least one touch point are the coordinates of a closed curve, the second candidate node set is determined according to the DOM tree of the webpage, and the second candidate node set includes the area surrounding the closed curve. a content node whose intersection area occupies a ratio of an area enclosed by the closed curve greater than a predetermined ratio threshold;
  • the predetermined ratio threshold may be a proportional threshold set by the developer in advance, such as 50%, 70%, or 80%, etc., and the exemplary embodiment does not limit the value of the predetermined ratio threshold.
  • the preset ratio threshold is 50% as an example.
  • the smart phone displays all the visual content of the entire webpage on the screen. Nodes, the display areas corresponding to each node are shown in Figure 4.
  • the sliding track is a closed curve, and the generated webpage adjustment instruction includes coordinates of each touch point on the sliding track of the user, and the smart phone coordinates according to the touch points on the sliding track.
  • the DOM tree of the webpage determines that the display area covered by the closed curve surrounded by the coordinates of the respective touch points has all the areas except the area A, wherein the intersecting area with the area enclosed by the closed curve occupies the closed curve the proportion of the display area is greater than 50% of the area enclosed by a region of the B and B 1, B smartphone set region. 1 B and the content corresponding nodes is determined as a second candidate set of nodes.
  • step 312 the content node with the smallest display area in the second candidate node set is determined as the target content node
  • the smartphone determines the content node corresponding to the area B 1 as the target content node.
  • step 314 when the coordinates of the at least one touch point are the coordinates of a closed curve, the third candidate node set is determined according to the DOM tree of the webpage, and the third candidate node set includes the area surrounding the closed curve. a content node whose intersection area accounts for the largest proportion of the display area;
  • the smart phone displays all the visual content nodes of the entire webpage on the screen, and the display area corresponding to each node is as shown in FIG. 5. Shown.
  • the sliding track is a closed curve
  • the generated webpage adjustment instruction includes coordinates of each touch point on the sliding track of the user, and the smart phone coordinates according to the touch points on the sliding track.
  • the DOM tree of the webpage determines that the display area covered by the closed curve surrounded by the coordinates of the respective touch points has all the areas except the area A, wherein the area of the intersection with the area enclosed by the closed curve occupies the display area
  • step 316 the content node having the largest display area in the third candidate node set is determined as the target content node
  • the area of the area B 13 is larger than the area of the areas B 11 and B 12 , and therefore, the smartphone determines the content node corresponding to the area B 13 as the target content node.
  • step 318 the zoom ratio is calculated according to the current size of the display area corresponding to the target content node and the size of the screen, and the webpage is scaled according to the zoom ratio.
  • the electronic device may preset the optimal ratio of the zoomed display area of the target content node to the entire screen, for example, setting the optimal ratio of the width of the zoomed display area to the screen width or setting the target content.
  • the height of the display area after the node is scaled to the optimal ratio of the screen height, the optimal ratio may be 80%, 100%, 120% or other values, for which the present exemplary embodiment is not limited.
  • the width of the display area scaled by the target content node is 100% of the screen width
  • the current width of the display area corresponding to the target content node is 5, and the screen width is 10, and the zoom ratio is set.
  • the zoom ratio is -50% (ie, 50% reduction).
  • the smart phone determines the area B 1 by the method shown in any of steps 306-308 or steps 310-312 or steps 314-316.
  • the corresponding visual content node is the target content node, then the center of the area B 1 is adjusted to the center of the screen, and the width of the area B 1 is adjusted to the width of the screen according to the calculated scaling ratio.
  • the adjusted web page is as shown in FIG. 6 . .
  • the webpage adjustment method shown in this exemplary embodiment receives a webpage adjustment instruction including at least one touchpoint coordinate, according to the at least one touchpoint and the file object model DOM tree of the webpage from the webpage.
  • the target content node is determined in each content node, and the center of the display area corresponding to the target content node is adjusted to the center of the screen, and only the user needs to operate the display area of the corresponding content node to the screen suitable for the user to browse.
  • the central location solves the problem that in the related art, if a certain content in the webpage is adjusted to be suitable for browsing, the user usually needs to perform multiple adjustment operations to simplify the user operation and save the user time.
  • the webpage adjustment method provided by the exemplary embodiment calculates a zoom ratio according to a current size of a display area corresponding to the target content node and a size of the screen, and scales the webpage according to the zoom ratio, and the target content node is The corresponding display area is adjusted to a better browsing size, thereby further improving the user experience and simplifying user operations.
  • the webpage adjustment method shown in this exemplary embodiment detects whether the average display area of the characters in the plain text node in the webpage is less than a preset area threshold before receiving the webpage adjustment instruction; if the detection result is If the average display area of the characters in the plain text node in the webpage is less than the preset area threshold, the step of receiving the webpage adjustment instruction is performed to avoid adjusting the webpage that does not need to be adjusted, thereby saving processing resources and power of the electronic device. Effect.
  • FIG. 8 is a schematic diagram of a webpage adjusting apparatus according to an exemplary embodiment.
  • the webpage adjusting apparatus may be used to execute any of the above-mentioned FIG. 1, FIG. 2 or FIG. 7 in an electronic device.
  • the electronic device can be a smart phone, a tablet or an e-book reader.
  • the webpage adjustment apparatus may include: an instruction receiving module 401, a target node determining module 402, and an adjusting module 403;
  • the command receiving module 401 is configured to receive a webpage adjustment instruction, where the webpage adjustment instruction is an instruction generated when a touch operation on the currently displayed webpage is detected, and the webpage adjustment instruction includes at least one touchpoint coordinate ;
  • the target node determining module 402 is configured to use the at least one touch point coordinate and the file of the webpage according to the An object model DOM tree determines a target content node from each content node of the web page;
  • the adjustment module 403 is configured to adjust a center of the display area corresponding to the target content node to the center of the screen.
  • the webpage adjusting apparatus shown in this exemplary embodiment receives a webpage adjustment instruction including at least one touch point coordinate, according to the at least one touch point and the file object model DOM tree of the webpage from the webpage.
  • the target content node is determined in each content node, and the center of the display area corresponding to the target content node is adjusted to the center of the screen, and only the user needs to operate the display area of the corresponding content node to the screen suitable for the user to browse.
  • the central location solves the problem that in the related art, if a certain content in the webpage is adjusted to be suitable for browsing, the user usually needs to perform multiple adjustment operations to simplify the user operation and save the user time.
  • FIG. 9 is a schematic diagram of a webpage adjustment apparatus according to another exemplary embodiment.
  • the webpage adjustment apparatus can be used to execute any of the above-mentioned FIG. 1, FIG. 2 or FIG. 7 in an electronic device.
  • the electronic device can be a smart phone, a tablet or an e-book reader.
  • the webpage adjustment apparatus may include: an instruction receiving module 501, a target node determining module 502, and an adjusting module 503;
  • the command receiving module 501 is configured to receive a webpage adjustment instruction, where the webpage adjustment instruction is an instruction generated when a touch operation on the currently displayed webpage is detected, and the webpage adjustment instruction includes at least one touchpoint coordinate ;
  • the target node determining module 502 is configured to determine a target content node from each content node of the webpage according to the at least one touch point coordinate and a file object model DOM tree of the webpage;
  • the adjustment module 503 is configured to adjust a center of the display area corresponding to the target content node to the center of the screen.
  • the device further includes: a calculation module 504 and a scaling module 505;
  • the calculating module 504 is configured to calculate a scaling according to a current size of the display area corresponding to the target content node and a size of the screen;
  • a scaling module 505 is arranged to scale the web page according to the scaling.
  • the target node determining module 502 includes: a first determining unit 502a, a detecting unit 502b, and a second determining unit 502c;
  • the first determining unit 502a is configured to: when the at least one touch point coordinate includes one touch point coordinate, determine a first candidate node set according to the DOM tree of the webpage, where the first candidate node set is Include each content node where the coordinates of the touch point are located;
  • the second determining unit 502b is configured to determine, in the first candidate node set, a content node whose display width is smaller than the screen width and the display area is the largest as the target content node.
  • the target node determining module 502 includes: a third determining unit 502c and a fourth determining unit 502d;
  • the third determining unit 502c is configured to: when the at least one touch point coordinate is a coordinate of a closed curve, determine a second candidate node set according to the DOM tree of the webpage, where the second candidate node set includes a content node having a ratio of an intersection area of the area enclosed by the closed curve to an area enclosed by the closed curve greater than a predetermined ratio threshold;
  • the fourth determining unit 502d is configured to determine a content node having the smallest display area in the second candidate node set as the target content node.
  • the target node determining module 502 includes: a fifth determining unit 502e and a sixth determining unit 502f;
  • the fifth determining unit 502e is configured to: when the at least one touch point coordinate is a coordinate of a closed curve, determine a third candidate node set according to the DOM tree of the webpage, where the third candidate node set includes a content node having a largest ratio of the area of intersection of the area enclosed by the closed curve to the display area;
  • the sixth determining unit 502f is configured to determine a content node having the largest display area in the third candidate node set as the target content node.
  • the device further includes: a detection module 506;
  • the detecting module 506 is configured to detect, before receiving the webpage adjustment instruction, whether an average display area of characters in the plain text node in the webpage is less than a preset area threshold;
  • the instruction receiving module 501 is configured to perform the receiving if the detection result of the detecting module 506 is that the average display area of the characters in the plain text node in the webpage is less than a preset area threshold. The steps of the web page adjustment instruction.
  • the webpage adjusting apparatus shown in this exemplary embodiment receives a webpage adjustment instruction including at least one touch point coordinate, according to the at least one touch point and the file object model DOM tree of the webpage from the webpage.
  • the target content node is determined in each content node, and the center of the display area corresponding to the target content node is adjusted to the center of the screen, and only the user needs to operate the display area of the corresponding content node to the screen center suitable for the user to browse.
  • the location solves the problem that in the related art, if a certain content in the webpage is adjusted to be suitable for browsing, the user usually needs to perform multiple adjustment operations to simplify the user operation and save the user time.
  • the webpage adjusting apparatus calculates a scaling ratio according to a current size of a display area corresponding to the target content node and a size of the screen, and scales the webpage according to the scaling ratio, and the target content node is The corresponding display area is adjusted to a better browsing size, thereby further improving the user experience and simplifying user operations.
  • the webpage adjusting apparatus shown in the exemplary embodiment detects whether the average display area of the characters in the plain text node in the webpage is less than a preset area threshold before receiving the webpage adjustment instruction; if the detection result is If the average display area of the characters in the plain text node in the webpage is less than the preset area threshold, the receiving the network is performed.
  • the steps of the page adjustment instruction avoid the adjustment of the webpage that does not need to be adjusted, thereby achieving the effect of saving processing resources and power of the electronic device.
  • FIG. 10 is a block diagram of an electronic device, as shown in FIG. 10, which may be used to adjust a currently displayed web page, according to an exemplary embodiment.
  • the electronic device can be a smart phone, a tablet or an e-book reader.
  • the electronic device can include:
  • the electronic device shown in this exemplary embodiment receives a webpage adjustment instruction including at least one touch point coordinate, according to the at least one touch point and the file object model DOM tree of the webpage from the webpage.
  • the target content node is determined in each content node, and the center of the display area corresponding to the target content node is adjusted to the center of the screen, and only the user needs to operate the display area of the corresponding content node to the center of the screen suitable for the user to browse.
  • the user if a certain content in the webpage is adjusted to a position suitable for browsing, the user usually needs to perform multiple adjustment operations to simplify the user operation and save the user time.
  • the electronic device calculates a scaling ratio according to a current size of a display area corresponding to the target content node and a size of the screen, and scales the webpage according to the scaling ratio, corresponding to the target content node.
  • the display area is adjusted to a better browsing size to further enhance the user experience and simplify user operations.
  • the electronic device shown in this exemplary embodiment detects whether the average display area of the characters in the plain text node in the webpage is less than a preset area threshold before receiving the webpage adjustment instruction; if the detection result is the webpage If the average display area of the characters in the plain text node is less than the preset area threshold, the step of receiving the webpage adjustment instruction is performed to avoid adjusting the webpage that does not need to be adjusted, thereby saving processing resources and power of the electronic device. effect.
  • FIG. 11 is a block diagram of an electronic device 600, according to an exemplary embodiment.
  • electronic device 600 can be a mobile phone, a computer, a digital broadcast terminal, a messaging device, a game console, a tablet device, a medical device, a fitness device, a personal digital assistant, and the like.
  • electronic device 600 can include one or more of the following components: processing component 602, memory 604, power component 606, multimedia component 608, audio component 610, input/output (I/O) interface 612, and sensor component 614. And communication component 616.
  • Processing component 602 typically controls the overall operation of electronic device 600, such as operations associated with display, telephone calls, data communications, camera operations, and recording operations.
  • Processing component 602 can include one or more processors 620 to execute instructions to perform all or part of the steps of the above described methods.
  • processing component 602 can include one or more modules to facilitate interaction between component 602 and other components.
  • processing component 602 can include a multimedia module to facilitate interaction between multimedia component 608 and processing component 602.
  • the memory 604 is configured to store various types of data to support operation at the electronic device 600. Examples of such data include instructions for any application or method operating on electronic device 600, contact data, phone book data, messages, pictures, videos, and the like.
  • the memory 604 can be implemented by any type of volatile or non-volatile storage device or a combination thereof, such as static random access memory (SRAM), electrically erasable programmable read only memory (EEPROM), erasable Programmable Read Only Memory (EPROM), Programmable Read Only Memory (PROM), Read Only Memory (ROM), Magnetic Memory, Flash Memory, Disk or Optical Disk.
  • SRAM static random access memory
  • EEPROM electrically erasable programmable read only memory
  • EPROM erasable Programmable Read Only Memory
  • PROM Programmable Read Only Memory
  • ROM Read Only Memory
  • Magnetic Memory Flash Memory
  • Disk Disk
  • Optical Disk Also stored in memory 604 is one or more modules configured to be executed by the one or more processors 620 to perform all of the
  • Power component 606 provides power to various components of electronic device 600.
  • Power component 606 can include a power management system, one or more power sources, and other components associated with generating, managing, and distributing power for electronic device 600.
  • the multimedia component 608 includes a screen between the electronic device 600 and a user that provides an output interface.
  • the screen can include a liquid crystal display (LCD) and a touch panel (TP). If the screen includes a touch panel, the screen can be implemented as a touch screen to receive input signals from the user.
  • the touch panel includes one or more touch sensors to sense touches, slides, and gestures on the touch panel. The touch sensor may sense not only the boundary of the touch or sliding action, but also the duration and pressure associated with the touch or slide operation.
  • the multimedia component 608 includes a front camera and/or a rear camera. When the electronic device 600 is in an operation mode, such as a shooting mode or a video mode, the front camera and/or the rear camera can receive external multimedia data. Each front and rear camera can be a fixed optical lens system or have focal length and optical zoom capabilities.
  • the audio component 610 is configured to output and/or input an audio signal.
  • the audio component 610 includes a microphone (MIC) that is configured to receive an external audio signal when the electronic device 600 is in an operational mode, such as a call mode, a recording mode, and a voice recognition mode.
  • the received audio signal may be further stored in memory 604 or transmitted via communication component 616.
  • audio component 610 also includes a speaker for outputting an audio signal.
  • the I/O interface 612 provides an interface between the processing component 602 and the peripheral interface module, which may be a keyboard, a click wheel, a button, or the like. These buttons may include, but are not limited to, a home button, a volume button, a start button, and a lock button.
  • Sensor assembly 614 includes one or more sensors for providing electronic device 600 with a status assessment of various aspects.
  • the sensor component 614 can detect an open/closed state of the electronic device 600, a relative positioning of the components, such as the display and keypad of the electronic device 600, and the sensor component 614 can also detect the electronic device 600 or the electronic device 600.
  • the position of one component changes, the presence or absence of contact of the user with the electronic device 600, the orientation or acceleration/deceleration of the electronic device 600, and the temperature change of the electronic device 600.
  • Sensor assembly 614 can include proximity sensing A device configured to detect the presence of nearby objects without any physical contact.
  • Sensor assembly 614 may also include a light sensor, such as a CMOS or CCD image sensor, for use in imaging applications.
  • the sensor component 614 can also include an acceleration sensor, a gyro sensor, a magnetic sensor, a pressure sensor, or a temperature sensor.
  • Communication component 616 is configured to facilitate wired or wireless communication between electronic device 600 and other devices.
  • the electronic device 600 can access a wireless network based on a communication standard such as WiFi, 2G or 3G, or a combination thereof.
  • communication component 616 receives broadcast signals or broadcast associated information from an external broadcast management system via a broadcast channel.
  • the communication component 616 also includes a near field communication (NFC) module to facilitate short range communication.
  • NFC near field communication
  • the NFC module can be implemented based on radio frequency identification (RFID) technology, infrared data association (IrDA) technology, ultra-wideband (UWB) technology, Bluetooth (BT) technology, and other technologies.
  • RFID radio frequency identification
  • IrDA infrared data association
  • UWB ultra-wideband
  • Bluetooth Bluetooth
  • electronic device 600 may be implemented by one or more application specific integrated circuits (ASICs), digital signal processors (DSPs), digital signal processing devices (DSPDs), programmable logic devices (PLDs), A gated array (FPGA), controller, microcontroller, microprocessor, or other electronic component implementation for performing the above methods.
  • ASICs application specific integrated circuits
  • DSPs digital signal processors
  • DSPDs digital signal processing devices
  • PLDs programmable logic devices
  • FPGA gated array
  • controller microcontroller, microprocessor, or other electronic component implementation for performing the above methods.
  • non-transitory computer readable storage medium comprising instructions, such as a memory 604 comprising instructions executable by processor 620 of electronic device 600 to perform the above method.
  • the non-transitory computer readable storage medium can be a ROM, a random access memory (RAM), a CD-ROM, a magnetic tape, a floppy disk, and an optical data storage device.

Landscapes

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

Abstract

一种网页调整方法、装置及电子设备，属于计算机领域。所述方法包括：接收网页调整指令，根据网页调整指令中包含的至少一个触控点坐标和网页的文件对象模型DOM树从网页的各个内容节点中确定目标内容节点；将目标内容节点对应的显示区域的中心调整至屏幕的中心。通过根据接收到的网页调整指令中包含的至少一个触控点坐标的和该网页的文件对象模型DOM树从该网页的各个内容节点中确定目标内容节点，并将该目标内容节点对应的显示区域的中心调整至屏幕的中心，解决了相关技术中若要将网页中的某一块内容调整至适合浏览的位置，通常需要用户经过多次调整操作的问题，达到简化用户操作，节约用户时间的效果。

Description

网页调整方法、装置及电子设备
交叉引用
本申请基于申请号为201410108833.X、申请日为2014年3月21日的中国专利申请提出，并要求该中国专利申请的优先权，该中国专利申请的全部内容在此引入本申请作为参考。
技术领域
本公开涉及计算机领域，尤其涉及一种网页调整方法、装置及电子设备。
背景技术
随着移动网络的发展以及便携式移动终端的普及，越来越多的用户通过智能手机、平板电脑或者电子书阅读器等电子设备进行网络活动，而网页浏览则是最重要的网络活动之一。
由于智能手机、平板电脑或者电子书阅读器等电子设备为了兼顾便携性，其屏幕的尺寸通常不会太大。而当前网络中已有的网页大多基于PC(Personal Computer，个人计算机)进行开发，便携式电子设备在显示网页时，为了便于用户浏览，需要对网页进行调整。在相关技术中，便携式电子设备通常提供网页调整功能，用户在浏览网页时，可以通过手势操作将网页放大至适合浏览的尺寸，并通过拖拽操作移动网页，从而可以浏览网页的全部内容。
发明内容
为了解决相关技术中网页的移动需要用户手动拖拽，若要将网页中的某一块内容调整至适合浏览的位置，通常需要用户经过多次调整操作的问题，本公开实施例提供了一种网页调整方法、装置及电子设备。所述技术方案如下：
第一方面，本公开提供了一种网页调整方法，所述方法包括：
接收网页调整指令，所述网页调整指令为检测到对当前显示的网页的触控操作时生成的指令，所述网页调整指令中包含有至少一个触控点坐标；
根据所述至少一个触控点坐标和所述网页的文件对象模型DOM树从所述网页的各个内容节点中确定目标内容节点；
将所述目标内容节点对应的显示区域的中心调整至屏幕的中心。
可选的，所述方法还包括：
根据所述目标内容节点对应的显示区域的当前尺寸和所述屏幕的尺寸计算缩放比例；
根据所述缩放比例对所述网页进行缩放。
可选的，所述根据所述至少一个触控点和所述网页的DOM树从所述网页的各个内容节点中确定目标内容节点，包括：
当所述至少一个触控点坐标中包含一个触控点坐标时，根据所述网页的DOM树确定第一候选节点集合，所述第一候选节点集合中包含有所述触控点坐标所在的各个内容节点；
将所述第一候选节点集合中，显示宽度小于屏幕宽度且显示面积最大的内容节点确定为所述目标内容节点。
可选的，所述根据所述至少一个触控点和所述网页的DOM树从所述网页的各个内容节点中确定目标内容节点，包括：
当所述至少一个触控点坐标为一段闭合曲线的坐标时，根据所述网页的DOM树确定第二候选节点集合，所述第二候选节点集合中包含有与所述闭合曲线所围区域的相交面积占所述闭合曲线所围面积的比例大于预定比例阈值的内容节点；
将所述第二候选节点集合中显示面积最小的内容节点确定为所述目标内容节点。
可选的，所述根据所述至少一个触控点和所述网页的DOM树从所述网页的各个内容节点中确定目标内容节点，包括：
当所述至少一个触控点坐标为一段闭合曲线的坐标时，根据所述网页的DOM树确定第三候选节点集合，所述第三候选节点集合中包含有与所述闭合曲线所围区域的相交面积占显示面积的比例最大的内容节点；
将所述第三候选节点集合中显示面积最大的内容节点确定为所述目标内容节点。
可选的，所述方法还包括：
在接收所述网页调整指令之前，检测所述网页中的纯文本节点内的字符的平均显示面积是否小于预设的面积阈值；
若检测结果为所述网页中的纯文本节点内的字符的平均显示面积小于预设的面积阈值，则执行所述接收所述网页调整指令的步骤。
第二方面，本公开提供了一种网页调整装置，所述装置包括：
指令接收模块，用于接收网页调整指令，所述网页调整指令为检测到对当前显示的网页的触控操作时生成的指令，所述网页调整指令中包含有至少一个触控点坐标；
目标节点确定模块，用于根据所述至少一个触控点坐标和所述网页的文件对象模型 DOM树从所述网页的各个内容节点中确定目标内容节点；
调整模块，用于将所述目标内容节点对应的显示区域的中心调整至屏幕的中心。
可选的，所述装置还包括：
计算模块，用于根据所述目标内容节点对应的显示区域的当前尺寸和所述屏幕的尺寸计算缩放比例；
缩放模块，用于根据所述缩放比例对所述网页进行缩放。
可选的，所述目标节点确定模块，包括：
第一确定单元，用于当所述至少一个触控点坐标中包含一个触控点坐标时，根据所述网页的DOM树确定第一候选节点集合，所述第一候选节点集合中包含有所述触控点坐标所在的各个内容节点；
第二确定单元，用于将所述第一候选节点集合中，显示宽度小于屏幕宽度且显示面积最大的内容节点确定为所述目标内容节点。
可选的，所述目标节点确定模块，包括：
第三确定单元，用于当所述至少一个触控点坐标为一段闭合曲线的坐标时，根据所述网页的DOM树确定第二候选节点集合，所述第二候选节点集合中包含有与所述闭合曲线所围区域的相交面积占所述闭合曲线所围面积的比例大于预定比例阈值的内容节点；
第四确定单元，用于将所述第二候选节点集合中显示面积最小的内容节点确定为所述目标内容节点。
可选的，所述目标节点确定模块，包括：
第五确定单元，用于当所述至少一个触控点坐标为一段闭合曲线的坐标时，根据所述网页的DOM树确定第三候选节点集合，所述第三候选节点集合中包含有与所述闭合曲线所围区域的相交面积占显示面积的比例最大的内容节点；
第六确定单元，用于将所述第三候选节点集合中显示面积最大的内容节点确定为所述目标内容节点。
可选的，所述装置还包括：
检测模块，用于在接收所述网页调整指令之前，检测所述网页中的纯文本节点内的字符的平均显示面积是否小于预设的面积阈值；
所述指令接收模块，用于若所述检测模块的检测结果为所述网页中的纯文本节点内的字符的平均显示面积小于预设的面积阈值，则执行所述接收所述网页调整指令的步骤。
第三方面，本公开提供了一种电子设备，所述电子设备包括：
处理器；
用于存储所述处理器可执行指令的存储器；
其中，所述处理器被配置为：
接收网页调整指令，所述网页调整指令为检测到对当前显示的网页的触控操作时生成的指令，所述网页调整指令中包含有至少一个触控点坐标；
根据所述至少一个触控点坐标和所述网页的文件对象模型DOM树从所述网页的各个内容节点中确定目标内容节点；
将所述目标内容节点对应的显示区域的中心调整至屏幕的中心。
本公开实施例提供的技术方案可以带来以下一些有益效果：
通过接收包含有至少一个触控点坐标的网页调整指令，根据该至少一个触控点坐标和该网页的文件对象模型DOM树从该网页的各个内容节点中确定目标内容节点，并将该目标内容节点对应的显示区域的中心调整至屏幕的中心，只需要用户一次操作就可以将对应的内容节点的显示区域移动至适合用户浏览的屏幕中心位置，解决了相关技术中若要将网页中的某一块内容调整至适合浏览的位置，通常需要用户经过多次调整操作的问题，达到简化用户操作，节约用户时间的效果。
应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本公开。
附图说明
此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并与说明书一起用于解释本公开的原理。
图1是根据一示例性实施例示出的一种网页调整方法的示例性流程图；
图2是根据另一示例性实施例示出的一种网页调整方法的示例性流程图；
图3是根据另一示例性实施例示出的一种用户操作示意图；
图4是根据另一示例性实施例示出的另一种用户操作示意图；
图5是根据另一示例性实施例示出的又一种用户操作示意图；
图6是根据另一示例性实施例示出的一种调整后的网页示意图；
图7是根据又一示例性实施例示出的一种网页调整方法的示例性流程图；
图8是根据一示例性实施例示出的一种网页调整装置的示意图；
图9是根据另一示例性实施例示出的一种网页调整装置的示意图；
图10是根据一示例性实施例示出的一种电子设备的示例性框图；
图11是根据一示例性实施例示出的一种电子设备的示例性框图。
通过上述附图，已示出本公开明确的实施例，后文中将有更详细的描述。这些附图和文字描述并不是为了通过任何方式限制本公开构思的范围，而是通过参考特定实施例为本领域技术人员说明本公开的概念。
具体实施方式
这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本公开相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本公开的一些方面相一致的设备和方法的例子。
图1是根据一示例性实施例示出的一种网页调整方法的流程图，如图1所示，该网页调整方法可以用于在电子设备中对当前显示的网页进行调整。该电子设备可以是智能手机、平板电脑或者电子书阅读器等。该网页调整方法可以包括以下步骤：
在步骤102中，接收网页调整指令，该网页调整指令为检测到对当前显示的网页的触控操作时生成的指令，该网页调整指令中包含有至少一个触控点坐标；
在步骤104中，根据该至少一个触控点坐标和该网页的DOM(Document Object Model，文件对象模型)树从该网页的各个内容节点中确定目标内容节点；
在步骤106中，将该目标内容节点对应的显示区域的中心调整至屏幕的中心。
综上所述，本示例性实施例示出的网页调整方法，通过接收包含有至少一个触控点坐标的网页调整指令，根据该至少一个触控点坐标和该网页的文件对象模型DOM树从该网页的各个内容节点中确定目标内容节点，并将该目标内容节点对应的显示区域的中心调整至屏幕的中心，只需要用户一次操作就可以将对应的内容节点的显示区域移动至适合用户浏览的屏幕中心位置，解决了相关技术中若要将网页中的某一块内容调整至适合浏览的位置，通常需要用户经过多次调整操作的问题，达到简化用户操作，节约用户时间的效果。
图2是根据另一示例性实施例示出的一种网页调整方法的流程图，如图2所示，该网页调整方法可以用于在电子设备中对当前显示的网页进行调整。该电子设备可以是智能手机、平板电脑或者电子书阅读器等。该网页调整方法可以包括以下步骤：
在步骤202中，接收网页调整指令，该网页调整指令中包含有至少一个触控点坐标；
网页调整指令为检测到对用户当前显示的网页的触控操作时生成的指令。其中，用户对当前显示的网页的触控操作可以是点击操作或者滑动操作。比如，若用户操作为点击操作，该网页调整指令中包含有用户点击位置的触控点坐标；若用户操作为滑动操作，且滑动轨迹为一个闭合曲线，则该网页调整指令中包含有该闭合曲线所经过的各个触控点坐标。
在步骤204中，当该至少一个触控点坐标中包含一个触控点坐标时，根据该网页的DOM树确定第一候选节点集合，该第一候选节点集合中包含有该触控点坐标所在的各个内容节点；
网页显示在屏幕中时，该网页的DOM树中的每个可视化内容节点都可以对应在屏幕中的某一块矩形显示区域。在这些可视化内容节点中，某些大节点可能包含一层或多层小节点，对应在屏幕中即显示为大的矩形显示区域包含一层或多层小的矩形显示区域。
以电子设备为智能手机为例，请参考图3所示的一种用户操作示意图，其中，当前网页中显示有4个一级可视化内容节点，分别对应图3中的四块矩形区域A、B、C和D；B区域对应的一级可视化内容节点中又包含有一个二级可视化内容节点，对应图3中的矩形区域B1；B1区域对应的二级可视化内容节点中又包含有三个三级可视化内容节点，对应图3中的矩形区域B11、B12和B13。
用户在对该网页进行点击操作时，生成的网页调整指令包含有该用户点击位置的触控点坐标，智能手机根据该触控点坐标和网页的DOM树确定该触控点坐标处于B13区域内，则包含触控点坐标的区域有B、B1和B13；智能手机确定第一候选节点集合为区域B、B1和B13对应的内容节点组成的集合。
在步骤206中，将该第一候选节点集合中，显示宽度小于屏幕宽度且显示面积最大的内容节点确定为目标内容节点；
以图3为例，区域B的宽度与屏幕宽度相同，则第一候选节点集合中区域B1和B13对应的内容节点的显示宽度小于屏幕宽度，而区域B1的面积大于区域B13，因此，智能手机选择区域B1对应的内容节点为目标内容节点。
在步骤208中，当该至少一个触控点坐标为一段闭合曲线的坐标时，根据该网页的DOM树确定第二候选节点集合，该第二候选节点集合中包含有与该闭合曲线所围区域的相交面积占该闭合曲线所围面积的比例大于预定比例阈值的内容节点；
其中，该预定比例阈值可以是开发人员预先设置的比例阈值，比如50％、70％或者80％等，本示例性实施例对该预定比例阈值的数值不做限定。
以电子设备为智能手机，该预设比例阈值为50％为例，请参考图4所示的另一种用户操作示意图，其中，在初始时刻，智能手机在屏幕中显示整个网页的所有可视化内容节点，各个节点对应的显示区域如图4所示。用户在对该网页进行滑动操作时，滑动轨迹为一个闭合曲线，则生成的网页调整指令包含有该用户滑动轨迹上的各个触控点坐标，智能手机根据该滑动轨迹上的各个触控点坐标和网页的DOM树确定该各个触控点坐标围成的闭合曲线所覆盖到的显示区域有除区域A之外的所有区域，其中，与该闭合曲线所围区域的相 交面积占该闭合曲线所围面积的比例大于50％的显示区域有区域B和B1，智能手机将区域B和B1对应的内容节点组成的集合确定为第二候选节点集合。
在步骤210中，将该第二候选节点集合中显示面积最小的内容节点确定为该目标内容节点；
以图4为例，由于区域B1的面积小于区域B的面积，因此，智能手机将区域B1对应的内容节点确定为目标内容节点。
在步骤212中，当该至少一个触控点坐标为一段闭合曲线的坐标时，根据该网页的DOM树确定第三候选节点集合，该第三候选节点集合中包含有与该闭合曲线所围区域的相交面积占显示面积的比例最大的内容节点；
以电子设备为智能手机为例，请参考图5所示的另一种用户操作示意图，其中，在初始时刻，智能手机在屏幕中显示整个网页的所有可视化内容节点，各个节点对应的显示区域如图5所示。用户在对该网页进行滑动操作时，滑动轨迹为一个闭合曲线，则生成的网页调整指令包含有该用户滑动轨迹上的各个触控点坐标，智能手机根据该滑动轨迹上的各个触控点坐标和网页的DOM树确定该各个触控点坐标围成的闭合曲线所覆盖到的显示区域有除区域A之外的所有区域，其中，与该闭合曲线所围区域的相交面积占显示面积的比例最大的内容节点有3个，分别区域B11、B12和B13对应的内容节点，其比例均为100％，则智能手机将区域B11、B12和B13对应的内容节点组成的集合确定为第三候选节点集合。
在步骤214中，将该第三候选节点集合中显示面积最大的内容节点确定为该目标内容节点；
以图5为例，其中区域B13的面积大于区域B11和B12的面积，因此，智能手机将区域B13对应的内容节点确定为目标内容节点。
在步骤216中，根据该目标内容节点对应的显示区域的当前尺寸和该屏幕的尺寸计算缩放比例，并根据该缩放比例对该网页进行缩放。
其中，电子设备可以预先设置该目标内容节点缩放后的显示区域占整个屏幕的最佳比例，比如，设置该目标内容节点缩放后的显示区域的宽度占屏幕宽度的最佳比例或者设置该目标内容节点缩放后的显示区域的高度占屏幕高度的最佳比例，该最佳比例可以是80％、100％、120％或者其它数值，对此，本示例性实施例不做限定。
以设置该目标内容节点缩放后的显示区域的宽度占屏幕宽度的最佳比例为100％为例，假设该目标内容节点对应的显示区域的当前宽度为5，而屏幕宽度为10，则缩放比例为+100％(即放大100％)，若显示区域的当前宽度为20，而屏幕宽度为10，则缩放比例为-50％(即缩小50％)。
以图3至图5任一所示的用户操作示意图中所示的网页为例，假设智能手机通过步骤204～206或者步骤208～210或者步骤212～214任一所示的方法确定区域B1对应的可视化内容节点为目标内容节点，则将区域B1的中心调整至屏幕中心，同时按照计算出的缩放比例将区域B1的宽度调整为屏幕的宽度，调整后的网页示意图如图6所示。
综上所述，本示例性实施例示出的网页调整方法，通过接收包含有至少一个触控点坐标的网页调整指令，根据该至少一个触控点和该网页的文件对象模型DOM树从该网页的各个内容节点中确定目标内容节点，并将该目标内容节点对应的显示区域的中心调整至屏幕的中心，只需要用户一次操作就可以将对应的内容节点的显示区域移动至适合用户浏览的屏幕中心位置，解决了相关技术中若要将网页中的某一块内容调整至适合浏览的位置，通常需要用户经过多次调整操作的问题，达到简化用户操作，节约用户时间的效果。
其次，本示例性实施例提供的网页调整方法，通过根据该目标内容节点对应的显示区域的当前尺寸和该屏幕的尺寸计算缩放比例，并根据该缩放比例对该网页进行缩放，将目标内容节点对应的显示区域调整至更佳的浏览尺寸，从而进一步提高用户体验，简化用户操作。
图7是根据又一示例性实施例示出的一种网页调整方法的流程图，如图7所示，该网页调整方法可以用于在电子设备中对当前显示的网页进行调整。该电子设备可以是智能手机、平板电脑或者电子书阅读器等。该网页调整方法可以包括以下步骤：
在步骤302中，检测当前显示的网页中的纯文本节点内的字符的平均显示面积是否小于预设的面积阈值；
对网页进行缩放和移动时，需要占用一定的处理资源，并消耗一定的电量，而在实际应用中，并不是所有的网页在便携式电子设备中显示时都需要进行缩放或者移动，为了节约电子设备的处理资源和电量，可以只对需要进行调整的网页进行网页调整指令的响应。即检测当前显示的网页中的纯文本节点内的字符的平均显示面积是否小于预设的面积阈值，若小于，则该网页的字符在默认状态下显示面积较小，需要进行调整，否则，可以不进行调整。
其中，该面积阈值可以是一个固定值，也可以根据电子设备的屏幕的分辨率和尺寸进行确定。比如，开发人员可以通过人工标注的方式确定网络中不需要进行调整的网页的集合，并计算集合中的各个网页中的纯文本节点内的字符的平均显示面积s1，在显示网页时，电子设备首先获取当前网页的纯文本节点内的字符的平均显示面积s2，并判断s2＜k*s1是否成立，其中，k为可以是开发人员预先设置的比例参数，也可以是根据电子设备的屏幕的分辨率和尺寸确定的比例参数，对此，本示例性实施例不做限定。
在步骤304中，若当前显示的网页中的纯文本节点内的字符的平均显示面积小于预设的面积阈值，则接收网页调整指令，该网页调整指令中包含有至少一个触控点坐标；
网页调整指令为检测到对用户当前显示的网页的触控操作时生成的指令。其中，用户对当前显示的网页的触控操作可以是点击操作或者滑动操作。比如，若用户操作为点击操作，该网页调整指令中包含有用户点击位置的触控点坐标；若用户操作为滑动操作，且滑动轨迹为一个闭合曲线，则该网页调整指令中包含有该闭合曲线所经过的各个触控点坐标。
在步骤306中，当该至少一个触控点坐标中包含一个触控点坐标时，根据该网页的DOM树确定第一候选节点集合，该第一候选节点集合中包含有该触控点坐标所在的各个内容节点；
网页显示在屏幕中时，该网页的DOM树中的每个可视化内容节点都可以对应在屏幕中的某一块矩形显示区域。在这些可视化内容节点中，某些大节点可能包含一层或多层小节点，对应在屏幕中即显示为大的矩形显示区域包含一层或多层小的矩形显示区域。
以电子设备为智能手机为例，请参考图3所示的一种用户操作示意图，其中，当前网页中显示有4个一级可视化内容节点，分别对应图3中的四块矩形区域A、B、C和D；B区域对应的一级可视化内容节点中又包含有一个二级可视化内容节点，对应图3中的矩形区域B1；B1区域对应的二级可视化内容节点中又包含有三个三级可视化内容节点，对应图3中的矩形区域B11、B12和B13。用户在对该网页进行点击操作时，生成的网页调整指令包含有该用户点击位置的触控点坐标，智能手机根据该触控点坐标和网页的DOM树确定该触控点坐标处于B13区域内，则包含触控点坐标的区域有B、B1和B13；智能手机确定第一候选节点集合为区域B、B1和B13对应的内容节点组成的集合。
在步骤308中，将该第一候选节点集合中，显示宽度小于屏幕宽度且显示面积最大的内容节点确定为目标内容节点；
以图3为例，区域B的宽度与屏幕宽度相同，则第一候选节点集合中区域B1和B13对应的内容节点的显示宽度小于屏幕宽度，而区域B1的面积大于区域B13，因此，智能手机选择区域B1对应的内容节点为目标内容节点。
在步骤310中，当该至少一个触控点坐标为一段闭合曲线的坐标时，根据该网页的DOM树确定第二候选节点集合，该第二候选节点集合中包含有与该闭合曲线所围区域的相交面积占该闭合曲线所围面积的比例大于预定比例阈值的内容节点；
其中，该预定比例阈值可以是开发人员预先设置的比例阈值，比如50％、70％或者80％等，本示例性实施例对该预定比例阈值的数值不做限定。
以电子设备为智能手机，该预设比例阈值为50％为例，请参考图4所示的另一种用户 操作示意图，其中，在初始时刻，智能手机在屏幕中显示整个网页的所有可视化内容节点，各个节点对应的显示区域如图4所示。用户在对该网页进行滑动操作时，滑动轨迹为一个闭合曲线，则生成的网页调整指令包含有该用户滑动轨迹上的各个触控点坐标，智能手机根据该滑动轨迹上的各个触控点坐标和网页的DOM树确定该各个触控点坐标围成的闭合曲线所覆盖到的显示区域有除区域A之外的所有区域，其中，与该闭合曲线所围区域的相交面积占该闭合曲线所围面积的比例大于50％的显示区域有区域B和B1，智能手机将区域B和B1对应的内容节点组成的集合确定为第二候选节点集合。
在步骤312中，将该第二候选节点集合中显示面积最小的内容节点确定为该目标内容节点；
以图4为例，由于区域B1的面积小于区域B的面积，因此，智能手机将区域B1对应的内容节点确定为目标内容节点。
在步骤314中，当该至少一个触控点坐标为一段闭合曲线的坐标时，根据该网页的DOM树确定第三候选节点集合，该第三候选节点集合中包含有与该闭合曲线所围区域的相交面积占显示面积的比例最大的内容节点；
以电子设备为智能手机，请参考图5所示的另一种用户操作示意图，其中，在初始时刻，智能手机在屏幕中显示整个网页的所有可视化内容节点，各个节点对应的显示区域如图5所示。用户在对该网页进行滑动操作时，滑动轨迹为一个闭合曲线，则生成的网页调整指令包含有该用户滑动轨迹上的各个触控点坐标，智能手机根据该滑动轨迹上的各个触控点坐标和网页的DOM树确定该各个触控点坐标围成的闭合曲线所覆盖到的显示区域有除区域A之外的所有区域，其中，与该闭合曲线所围区域的相交面积占显示面积的比例最大的内容节点有3个，分别区域B11、B12和B13对应的内容节点，其比例均为100％，则智能手机将区域B11、B12和B13对应的内容节点组成的集合确定为第三候选节点集合。
在步骤316中，将该第三候选节点集合中显示面积最大的内容节点确定为该目标内容节点；
以图5为例，其中区域B13的面积大于区域B11和B12的面积，因此，智能手机将区域B13对应的内容节点确定为目标内容节点。
在步骤318中，根据该目标内容节点对应的显示区域的当前尺寸和该屏幕的尺寸计算缩放比例，并根据该缩放比例对该网页进行缩放。
其中，电子设备可以预先设置该目标内容节点缩放后的显示区域占整个屏幕的最佳比例，比如，设置该目标内容节点缩放后的显示区域的宽度占屏幕宽度的最佳比例或者设置该目标内容节点缩放后的显示区域的高度占屏幕高度的最佳比例，该最佳比例可以是80％、 100％、120％或者其它数值，对此，本示例性实施例不做限定。
以设置该目标内容节点缩放后的显示区域的宽度占屏幕宽度的最佳比例为100％为例，假设该目标内容节点对应的显示区域的当前宽度为5，而屏幕宽度为10，则缩放比例为+100％(即放大100％)，若显示区域的当前宽度为20，而屏幕宽度为10，则缩放比例为-50％(即缩小50％)。
以图3至图5任一所示的用户操作示意图中所示的网页为例，假设智能手机通过步骤306～308或者步骤310～312或者步骤314～316任一所示的方法确定区域B1对应的可视化内容节点为目标内容节点，则将区域B1的中心调整至屏幕中心，同时按照计算出的缩放比例将区域B1的宽度调整为屏幕的宽度，调整后的网页如图6所示。
综上所述，本示例性实施例示出的网页调整方法，通过接收包含有至少一个触控点坐标的网页调整指令，根据该至少一个触控点和该网页的文件对象模型DOM树从该网页的各个内容节点中确定目标内容节点，并将该目标内容节点对应的显示区域的中心调整至屏幕的中心，只需要用户一次操作就可以将对应的内容节点的显示区域移动至适合用户浏览的屏幕中心位置，解决了相关技术中若要将网页中的某一块内容调整至适合浏览的位置，通常需要用户经过多次调整操作的问题，达到简化用户操作，节约用户时间的效果。
其次，本示例性实施例提供的网页调整方法，通过根据该目标内容节点对应的显示区域的当前尺寸和该屏幕的尺寸计算缩放比例，并根据该缩放比例对该网页进行缩放，将目标内容节点对应的显示区域调整至更佳的浏览尺寸，从而进一步提高用户体验，简化用户操作。
最后，本示例性实施例示出的网页调整方法，通过在接收该网页调整指令之前，检测该网页中的纯文本节点内的字符的平均显示面积是否小于预设的面积阈值；若检测结果为该网页中的纯文本节点内的字符的平均显示面积小于预设的面积阈值，则执行该接收该网页调整指令的步骤，避免对不需要调整的网页进行调整，达到节约电子设备的处理资源和电量的效果。
图8是根据一示例性实施例示出的一种网页调整装置的示意图，如图8所示，该网页调整装置可以用于在电子设备中执行上述图1、图2或者图7任一所示的方法。该电子设备可以是智能手机、平板电脑或者电子书阅读器等。该网页调整装置可以包括：指令接收模块401、目标节点确定模块402以及调整模块403；
指令接收模块401设配置为用于接收网页调整指令，所述网页调整指令为检测到对当前显示的网页的触控操作时生成的指令，所述网页调整指令中包含有至少一个触控点坐标；
目标节点确定模块402被设置为用于根据所述至少一个触控点坐标和所述网页的文件 对象模型DOM树从所述网页的各个内容节点中确定目标内容节点；
调整模块403被设置为用于将所述目标内容节点对应的显示区域的中心调整至屏幕的中心。
综上所述，本示例性实施例示出的网页调整装置，通过接收包含有至少一个触控点坐标的网页调整指令，根据该至少一个触控点和该网页的文件对象模型DOM树从该网页的各个内容节点中确定目标内容节点，并将该目标内容节点对应的显示区域的中心调整至屏幕的中心，只需要用户一次操作就可以将对应的内容节点的显示区域移动至适合用户浏览的屏幕中心位置，解决了相关技术中若要将网页中的某一块内容调整至适合浏览的位置，通常需要用户经过多次调整操作的问题，达到简化用户操作，节约用户时间的效果。
图9是根据另一示例性实施例示出的一种网页调整装置的示意图，如图9所示，该网页调整装置可以用于在电子设备中执行上述图1、图2或者图7任一所示的方法。该电子设备可以是智能手机、平板电脑或者电子书阅读器等。该网页调整装置可以包括：指令接收模块501、目标节点确定模块502以及调整模块503；
指令接收模块501设配置为用于接收网页调整指令，所述网页调整指令为检测到对当前显示的网页的触控操作时生成的指令，所述网页调整指令中包含有至少一个触控点坐标；
目标节点确定模块502被设置为用于根据所述至少一个触控点坐标和所述网页的文件对象模型DOM树从所述网页的各个内容节点中确定目标内容节点；
调整模块503被设置为用于将所述目标内容节点对应的显示区域的中心调整至屏幕的中心。
所述装置还包括：计算模块504和缩放模块505；
计算模块504被设置为用于根据所述目标内容节点对应的显示区域的当前尺寸和所述屏幕的尺寸计算缩放比例；
缩放模块505被设置为用于根据所述缩放比例对所述网页进行缩放。
所述目标节点确定模块502，包括：第一确定单元502a、检测单元502b以及第二确定单元502c；
第一确定单元502a被设置为用于当所述至少一个触控点坐标中包含一个触控点坐标时，根据所述网页的DOM树确定第一候选节点集合，所述第一候选节点集合中包含有所述触控点坐标所在的各个内容节点；
第二确定单元502b被设置为用于将所述第一候选节点集合中，显示宽度小于屏幕宽度且显示面积最大的内容节点确定为所述目标内容节点。
所述目标节点确定模块502包括：第三确定单元502c和第四确定单元502d；
第三确定单元502c被设置为用于当所述至少一个触控点坐标为一段闭合曲线的坐标时，根据所述网页的DOM树确定第二候选节点集合，所述第二候选节点集合中包含有与所述闭合曲线所围区域的相交面积占所述闭合曲线所围面积的比例大于预定比例阈值的内容节点；
第四确定单元502d被设置为用于将所述第二候选节点集合中显示面积最小的内容节点确定为所述目标内容节点。
所述目标节点确定模块502，包括：第五确定单元502e和第六确定单元502f；
第五确定单元502e被设置为用于当所述至少一个触控点坐标为一段闭合曲线的坐标时，根据所述网页的DOM树确定第三候选节点集合，所述第三候选节点集合中包含有与所述闭合曲线所围区域的相交面积占显示面积的比例最大的内容节点；
第六确定单元502f被设置为用于将所述第三候选节点集合中显示面积最大的内容节点确定为所述目标内容节点。
所述装置还包括：检测模块506；
检测模块506被设置为用于在接收所述网页调整指令之前，检测所述网页中的纯文本节点内的字符的平均显示面积是否小于预设的面积阈值；
所述指令接收模块501被设置为用于若所述检测模块506的检测结果为所述网页中的纯文本节点内的字符的平均显示面积小于预设的面积阈值，则执行所述接收所述网页调整指令的步骤。
综上所述，本示例性实施例示出的网页调整装置，通过接收包含有至少一个触控点坐标的网页调整指令，根据该至少一个触控点和该网页的文件对象模型DOM树从该网页的各个内容节点中确定目标内容节点，并该目标内容节点对应的显示区域的中心调整至屏幕的中心，只需要用户一次操作就可以将对应的内容节点的显示区域移动至适合用户浏览的屏幕中心位置，解决了相关技术中若要将网页中的某一块内容调整至适合浏览的位置，通常需要用户经过多次调整操作的问题，达到简化用户操作，节约用户时间的效果。
其次，本示例性实施例提供的网页调整装置，通过根据该目标内容节点对应的显示区域的当前尺寸和该屏幕的尺寸计算缩放比例，并根据该缩放比例对该网页进行缩放，将目标内容节点对应的显示区域调整至更佳的浏览尺寸，从而进一步提高用户体验，简化用户操作。
最后，本示例性实施例示出的网页调整装置，通过在接收该网页调整指令之前，检测该网页中的纯文本节点内的字符的平均显示面积是否小于预设的面积阈值；若检测结果为该网页中的纯文本节点内的字符的平均显示面积小于预设的面积阈值，则执行该接收该网 页调整指令的步骤，避免对不需要调整的网页进行调整，达到节约电子设备的处理资源和电量的效果。
图10是根据一示例性实施例示出的一种电子设备的框图，如图10所示，该电子设备可以用于对当前显示的网页进行调整。该电子设备可以是智能手机、平板电脑或者电子书阅读器等。该电子设备可以包括：
如上述图8或图9所示的网页调整装置001。
综上所述，本示例性实施例示出的电子设备，通过接收包含有至少一个触控点坐标的网页调整指令，根据该至少一个触控点和该网页的文件对象模型DOM树从该网页的各个内容节点中确定目标内容节点，并该目标内容节点对应的显示区域的中心调整至屏幕的中心，只需要用户一次操作就可以将对应的内容节点的显示区域移动至适合用户浏览的屏幕中心位置，解决了相关技术中若要将网页中的某一块内容调整至适合浏览的位置，通常需要用户经过多次调整操作的问题，达到简化用户操作，节约用户时间的效果。
其次，本示例性实施例提供的电子设备，通过根据该目标内容节点对应的显示区域的当前尺寸和该屏幕的尺寸计算缩放比例，并根据该缩放比例对该网页进行缩放，将目标内容节点对应的显示区域调整至更佳的浏览尺寸，从而进一步提高用户体验，简化用户操作。
最后，本示例性实施例示出的电子设备，通过在接收该网页调整指令之前，检测该网页中的纯文本节点内的字符的平均显示面积是否小于预设的面积阈值；若检测结果为该网页中的纯文本节点内的字符的平均显示面积小于预设的面积阈值，则执行该接收该网页调整指令的步骤，避免对不需要调整的网页进行调整，达到节约电子设备的处理资源和电量的效果。
图11是根据一示例性实施例示出的一种电子设备600的框图。例如，电子设备600可以是移动电话，计算机，数字广播终端，消息收发设备，游戏控制台，平板设备，医疗设备，健身设备，个人数字助理等。
参照图11，电子设备600可以包括以下一个或多个组件：处理组件602，存储器604，电源组件606，多媒体组件608，音频组件610，输入/输出(I/O)的接口612，传感器组件614，以及通信组件616。
处理组件602通常控制电子设备600的整体操作，诸如与显示，电话呼叫，数据通信，相机操作和记录操作相关联的操作。处理组件602可以包括一个或多个处理器620来执行指令，以完成上述的方法的全部或部分步骤。此外，处理组件602可以包括一个或多个模块，便于处理组件602和其他组件之间的交互。例如，处理组件602可以包括多媒体模块，以方便多媒体组件608和处理组件602之间的交互。
存储器604被配置为存储各种类型的数据以支持在电子设备600的操作。这些数据的示例包括用于在电子设备600上操作的任何应用程序或方法的指令，联系人数据，电话簿数据，消息，图片，视频等。存储器604可以由任何类型的易失性或非易失性存储设备或者它们的组合实现，如静态随机存取存储器(SRAM)，电可擦除可编程只读存储器(EEPROM)，可擦除可编程只读存储器(EPROM)，可编程只读存储器(PROM)，只读存储器(ROM)，磁存储器，快闪存储器，磁盘或光盘。存储器604中还存储有一个或多个模块，该一个或多个模块被配置成由该一个或多个处理器620执行，以完成上述图1、图2或者图7任一所示方法的全部或部分步骤。
电源组件606为电子设备600的各种组件提供电力。电源组件606可以包括电源管理系统，一个或多个电源，及其他与为电子设备600生成、管理和分配电力相关联的组件。
多媒体组件608包括在所述电子设备600和用户之间的提供一个输出接口的屏幕。在一些实施例中，屏幕可以包括液晶显示器(LCD)和触摸面板(TP)。如果屏幕包括触摸面板，屏幕可以被实现为触摸屏，以接收来自用户的输入信号。触摸面板包括一个或多个触摸传感器以感测触摸、滑动和触摸面板上的手势。所述触摸传感器可以不仅感测触摸或滑动动作的边界，而且还检测与所述触摸或滑动操作相关的持续时间和压力。在一些实施例中，多媒体组件608包括一个前置摄像头和/或后置摄像头。当电子设备600处于操作模式，如拍摄模式或视频模式时，前置摄像头和/或后置摄像头可以接收外部的多媒体数据。每个前置摄像头和后置摄像头可以是一个固定的光学透镜系统或具有焦距和光学变焦能力。
音频组件610被配置为输出和/或输入音频信号。例如，音频组件610包括一个麦克风(MIC)，当电子设备600处于操作模式，如呼叫模式、记录模式和语音识别模式时，麦克风被配置为接收外部音频信号。所接收的音频信号可以被进一步存储在存储器604或经由通信组件616发送。在一些实施例中，音频组件610还包括一个扬声器，用于输出音频信号。
I/O接口612为处理组件602和外围接口模块之间提供接口，上述外围接口模块可以是键盘，点击轮，按钮等。这些按钮可包括但不限于：主页按钮、音量按钮、启动按钮和锁定按钮。
传感器组件614包括一个或多个传感器，用于为电子设备600提供各个方面的状态评估。例如，传感器组件614可以检测到电子设备600的打开/关闭状态，组件的相对定位，例如所述组件为电子设备600的显示器和小键盘，传感器组件614还可以检测电子设备600或电子设备600的一个组件的位置改变，用户与电子设备600接触的存在或不存在，电子设备600方位或加速/减速和电子设备600的温度变化。传感器组件614可以包括接近传感 器，被配置用来在没有任何的物理接触时检测附近物体的存在。传感器组件614还可以包括光传感器，如CMOS或CCD图像传感器，用于在成像应用中使用。在一些实施例中，该传感器组件614还可以包括加速度传感器，陀螺仪传感器，磁传感器，压力传感器或温度传感器。
通信组件616被配置为便于电子设备600和其他设备之间有线或无线方式的通信。电子设备600可以接入基于通信标准的无线网络，如WiFi，2G或3G，或它们的组合。在一个示例性实施例中，通信组件616经由广播信道接收来自外部广播管理系统的广播信号或广播相关信息。在一个示例性实施例中，所述通信组件616还包括近场通信(NFC)模块，以促进短程通信。例如，在NFC模块可基于射频识别(RFID)技术，红外数据协会(IrDA)技术，超宽带(UWB)技术，蓝牙(BT)技术和其他技术来实现。
在示例性实施例中，电子设备600可以被一个或多个应用专用集成电路(ASIC)、数字信号处理器(DSP)、数字信号处理设备(DSPD)、可编程逻辑器件(PLD)、现场可编程门阵列(FPGA)、控制器、微控制器、微处理器或其他电子元件实现，用于执行上述方法。
在示例性实施例中，还提供了一种包括指令的非临时性计算机可读存储介质，例如包括指令的存储器604，上述指令可由电子设备600的处理器620执行以完成上述方法。例如，该非临时性计算机可读存储介质可以是ROM、随机存取存储器(RAM)、CD-ROM、磁带、软盘和光数据存储设备等。
本领域技术人员在考虑说明书及实践这里的公开后，将容易想到本公开的其它实施方案。本申请旨在涵盖本公开的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本公开的真正范围和精神由权利要求指出。
应当理解的是，本公开并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本公开的范围仅由所附的权利要求来限制。

Claims (13)

  1. 一种网页调整方法，其特征在于，所述方法包括：
    接收网页调整指令，所述网页调整指令为检测到对当前显示的网页的触控操作时生成的指令，所述网页调整指令中包含有至少一个触控点坐标；
    根据所述至少一个触控点坐标和所述网页的文件对象模型DOM树从所述网页的各个内容节点中确定目标内容节点；
    将所述目标内容节点对应的显示区域的中心调整至屏幕的中心。
  2. 根据权利要求1所述的方法，其特征在于，所述方法还包括：
    根据所述目标内容节点对应的显示区域的当前尺寸和所述屏幕的尺寸计算缩放比例；
    根据所述缩放比例对所述网页进行缩放。
  3. 根据权利要求1所述的方法，其特征在于，所述根据所述至少一个触控点坐标和所述网页的DOM树从所述网页的各个内容节点中确定目标内容节点，包括：
    当所述至少一个触控点坐标中包含一个触控点坐标时，根据所述网页的DOM树确定第一候选节点集合，所述第一候选节点集合中包含有所述触控点坐标所在的各个内容节点；
    将所述第一候选节点集合中，显示宽度小于屏幕宽度且显示面积最大的内容节点确定为所述目标内容节点。
  4. 根据权利要求1所述的方法，其特征在于，所述根据所述至少一个触控点坐标和所述网页的DOM树从所述网页的各个内容节点中确定目标内容节点，包括：
    当所述至少一个触控点坐标为一段闭合曲线的坐标时，根据所述网页的DOM树确定第二候选节点集合，所述第二候选节点集合中包含有与所述闭合曲线所围区域的相交面积占所述闭合曲线所围面积的比例大于预定比例阈值的内容节点；
    将所述第二候选节点集合中显示面积最小的内容节点确定为所述目标内容节点。
  5. 根据权利要求1所述的方法，其特征在于，所述根据所述至少一个触控点坐标和所述网页的DOM树从所述网页的各个内容节点中确定目标内容节点，包括：
    当所述至少一个触控点坐标为一段闭合曲线的坐标时，根据所述网页的DOM树确定第三候选节点集合，所述第三候选节点集合中包含有与所述闭合曲线所围区域的相交面积占显示面积的比例最大的内容节点；
    将所述第三候选节点集合中显示面积最大的内容节点确定为所述目标内容节点。
  6. 根据权利要求1所述的方法，其特征在于，所述方法还包括：
    在接收所述网页调整指令之前，检测所述网页中的纯文本节点内的字符的平均显示面积是否小于预设的面积阈值；
    若检测结果为所述网页中的纯文本节点内的字符的平均显示面积小于预设的面积阈值，则执行所述接收所述网页调整指令的步骤。
  7. 一种网页调整装置，其特征在于，所述装置包括：
    指令接收模块，用于接收网页调整指令，所述网页调整指令为检测到对当前显示的网页的触控操作时生成的指令，所述网页调整指令中包含有至少一个触控点坐标；
    目标节点确定模块，用于根据所述至少一个触控点坐标和所述网页的文件对象模型DOM树从所述网页的各个内容节点中确定目标内容节点；
    调整模块，用于将所述目标内容节点对应的显示区域的中心调整至屏幕的中心。
  8. 根据权利要求7所述的装置，其特征在于，所述装置还包括：
    计算模块，用于根据所述目标内容节点对应的显示区域的当前尺寸和所述屏幕的尺寸计算缩放比例；
    缩放模块，用于根据所述缩放比例对所述网页进行缩放。
  9. 根据权利要求7所述的装置，其特征在于，所述目标节点确定模块，包括：
    第一确定单元，用于当所述至少一个触控点坐标中包含一个触控点坐标时，根据所述网页的DOM树确定第一候选节点集合，所述第一候选节点集合中包含有所述触控点坐标所在的各个内容节点；
    第二确定单元，用于将所述第一候选节点集合中，显示宽度小于屏幕宽度且显示面积最大的内容节点确定为所述目标内容节点。
  10. 根据权利要求7所述的装置，其特征在于，所述目标节点确定模块，包括：
    第三确定单元，用于当所述至少一个触控点坐标为一段闭合曲线的坐标时，根据所述网页的DOM树确定第二候选节点集合，所述第二候选节点集合中包含有与所述闭合曲线所围区域的相交面积占所述闭合曲线所围面积的比例大于预定比例阈值的内容节点；
    第四确定单元，用于将所述第二候选节点集合中显示面积最小的内容节点确定为所述目标内容节点。
  11. 根据权利要求7所述的装置，其特征在于，所述目标节点确定模块，包括：
    第五确定单元，用于当所述至少一个触控点坐标为一段闭合曲线的坐标时，根据所述网页的DOM树确定第三候选节点集合，所述第三候选节点集合中包含有与所述闭合曲线所围区域的相交面积占显示面积的比例最大的内容节点；
    第六确定单元，用于将所述第三候选节点集合中显示面积最大的内容节点确定为所述目标内容节点。
  12. 根据权利要求7所述的装置，其特征在于，所述装置还包括：
    检测模块，用于在接收所述网页调整指令之前，检测所述网页中的纯文本节点内的字符的平均显示面积是否小于预设的面积阈值；
    所述指令接收模块，用于若所述检测模块的检测结果为所述网页中的纯文本节点内的字符的平均显示面积小于预设的面积阈值，则执行所述接收所述网页调整指令的步骤。
  13. 一种电子设备，其特征在于，所述电子设备包括：
    处理器；
    用于存储所述处理器可执行指令的存储器；
    其中，所述处理器被配置为：
    接收网页调整指令，所述网页调整指令为检测到对当前显示的网页的触控操作时生成的指令，所述网页调整指令中包含有至少一个触控点坐标；
    根据所述至少一个触控点坐标和所述网页的文件对象模型DOM树从所述网页的各个内容节点中确定目标内容节点；
    将所述目标内容节点对应的显示区域的中心调整至屏幕的中心。
PCT/CN2014/091198 2014-03-21 2014-11-14 网页调整方法、装置及电子设备 WO2015139469A1 (zh)

Priority Applications (5)

Application Number Priority Date Filing Date Title
BR112015002042A BR112015002042A2 (pt) 2014-03-21 2014-11-14 método e aparelho para ajustar uma página da internet, e, dispositivo eletrônico
JP2016508008A JP6093088B2 (ja) 2014-03-21 2014-11-14 ウェブページおよび電子機器を調整するための方法および装置
MX2015001411A MX353129B (es) 2014-03-21 2014-11-14 Metodo y aparato para ajustar una pagina web y un dispositivo electronico.
KR1020157002642A KR20150119834A (ko) 2014-03-21 2014-11-14 웹페이지 조정 방법 및 장치와 전자 장치
US14/658,422 US20150269272A1 (en) 2014-03-21 2015-03-16 Methods, devices, and apparatuses for adjusting display of webpage

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN201410108833.X 2014-03-21
CN201410108833.XA CN103885712B (zh) 2014-03-21 2014-03-21 网页调整方法、装置及电子设备

Related Child Applications (1)

Application Number Title Priority Date Filing Date
US14/658,422 Continuation US20150269272A1 (en) 2014-03-21 2015-03-16 Methods, devices, and apparatuses for adjusting display of webpage

Publications (1)

Publication Number Publication Date
WO2015139469A1 true WO2015139469A1 (zh) 2015-09-24

Family

ID=50954633

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2014/091198 WO2015139469A1 (zh) 2014-03-21 2014-11-14 网页调整方法、装置及电子设备

Country Status (7)

Country Link
EP (1) EP2921969A1 (zh)
JP (1) JP6093088B2 (zh)
KR (1) KR20150119834A (zh)
CN (1) CN103885712B (zh)
BR (1) BR112015002042A2 (zh)
MX (1) MX353129B (zh)
WO (1) WO2015139469A1 (zh)

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113538450A (zh) * 2020-04-21 2021-10-22 百度在线网络技术（北京）有限公司 用于生成图像的方法及装置
CN113656736A (zh) * 2021-08-19 2021-11-16 上海哔哩哔哩科技有限公司 数据处理方法及装置
CN115795192A (zh) * 2022-06-30 2023-03-14 盐城金堤科技有限公司 页面适配方法、装置以及存储介质和电子设备

Families Citing this family (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103885712B (zh) * 2014-03-21 2017-08-15 小米科技有限责任公司 网页调整方法、装置及电子设备
CN104408133B (zh) * 2014-11-27 2018-02-23 北京国双科技有限公司 网页链接区域的热力图的显示方法和装置
CN104820544A (zh) * 2015-04-15 2015-08-05 深信服网络科技（深圳）有限公司 菜单显示放大方法及装置
US10203852B2 (en) * 2016-03-29 2019-02-12 Microsoft Technology Licensing, Llc Content selection in web document
CN107145513A (zh) * 2017-03-31 2017-09-08 北京猎豹移动科技有限公司 一种信息显示方法及装置、终端
CN108446070A (zh) * 2018-02-26 2018-08-24 北京辰森世纪科技股份有限公司 一种用于浏览信息的方法及装置

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101796478A (zh) * 2008-01-06 2010-08-04 苹果公司 具有界面重新配置模式的便携式多功能设备
CN102135853A (zh) * 2011-03-09 2011-07-27 苏州佳世达电通有限公司 用于触控显示装置的信息处理方法
CN103164191A (zh) * 2011-12-08 2013-06-19 腾讯科技（深圳）有限公司 网页元素拖拽方法和装置
CN103885712A (zh) * 2014-03-21 2014-06-25 小米科技有限责任公司 网页调整方法、装置及电子设备

Family Cites Families (12)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US7203901B2 (en) * 2002-11-27 2007-04-10 Microsoft Corporation Small form factor web browsing
JP2008158540A (ja) * 2004-11-11 2008-07-10 Casio Comput Co Ltd 投影装置、投影方法、投影制御プログラム
US7864163B2 (en) * 2006-09-06 2011-01-04 Apple Inc. Portable electronic device, method, and graphical user interface for displaying structured electronic documents
US8174502B2 (en) * 2008-03-04 2012-05-08 Apple Inc. Touch event processing for web pages
JP4533943B2 (ja) * 2008-04-28 2010-09-01 株式会社東芝 情報処理装置、表示制御方法およびプログラム
KR20100064533A (ko) * 2008-12-05 2010-06-15 삼성전자주식회사 카메라를 이용한 문자 크기 자동 조절 장치 및 방법
JP2010134938A (ja) * 2009-12-18 2010-06-17 Seiko Epson Corp 携帯情報機器及び情報記憶媒体
EP2599012A4 (en) * 2010-07-30 2015-08-05 Hewlett Packard Development Co CONTENT SELECTION ON ONE WEBSITE
US9195637B2 (en) * 2010-11-03 2015-11-24 Microsoft Technology Licensing, Llc Proportional font scaling
US20120304113A1 (en) * 2011-05-27 2012-11-29 Patten Michael J Gesture-based content-object zooming
CA2798507C (en) * 2012-01-06 2015-03-17 Microsoft Corporation Input pointer delay and zoom logic
JP2013218739A (ja) * 2013-07-31 2013-10-24 Kyocera Document Solutions Inc 情報処理装置及び画像形成装置

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101796478A (zh) * 2008-01-06 2010-08-04 苹果公司 具有界面重新配置模式的便携式多功能设备
CN102135853A (zh) * 2011-03-09 2011-07-27 苏州佳世达电通有限公司 用于触控显示装置的信息处理方法
CN103164191A (zh) * 2011-12-08 2013-06-19 腾讯科技（深圳）有限公司 网页元素拖拽方法和装置
CN103885712A (zh) * 2014-03-21 2014-06-25 小米科技有限责任公司 网页调整方法、装置及电子设备

Cited By (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113538450A (zh) * 2020-04-21 2021-10-22 百度在线网络技术（北京）有限公司 用于生成图像的方法及装置
US11810333B2 (en) 2020-04-21 2023-11-07 Baidu Online Network Technology (Beijing) Co., Ltd. Method and apparatus for generating image of webpage content
CN113656736A (zh) * 2021-08-19 2021-11-16 上海哔哩哔哩科技有限公司 数据处理方法及装置
CN115795192A (zh) * 2022-06-30 2023-03-14 盐城金堤科技有限公司 页面适配方法、装置以及存储介质和电子设备
CN115795192B (zh) * 2022-06-30 2024-04-05 盐城天眼察微科技有限公司 页面适配方法、装置以及存储介质和电子设备

Also Published As

Publication number Publication date
CN103885712B (zh) 2017-08-15
BR112015002042A2 (pt) 2017-07-04
KR20150119834A (ko) 2015-10-26
CN103885712A (zh) 2014-06-25
EP2921969A1 (en) 2015-09-23
MX353129B (es) 2017-12-19
MX2015001411A (es) 2016-05-05
JP2016515276A (ja) 2016-05-26
JP6093088B2 (ja) 2017-03-08

Similar Documents

Publication Publication Date Title
WO2015139469A1 (zh) 网页调整方法、装置及电子设备
US10942616B2 (en) Multimedia resource management method and apparatus, and storage medium
WO2017219595A1 (zh) 文本选择方法及装置
JP6199510B2 (ja) ディスプレイモードを切り換える方法及び装置
US11334225B2 (en) Application icon moving method and apparatus, terminal and storage medium
EP3575937A1 (en) Methods, electronic devices, and storage mediums for waking up an icon
WO2016023341A1 (zh) 应用程序角标添加方法及装置
US20200210061A1 (en) Method, device and storage medium for sharing multimedia resource
EP2924591A1 (en) Method and device for controlling page rollback
WO2017084183A1 (zh) 信息显示方法与装置
US20120064946A1 (en) Resizable filmstrip view of images
CN104793843B (zh) 桌面显示方法及装置
WO2017092293A1 (zh) 对象操作方法及装置
US20180365200A1 (en) Method, device, electric device and computer-readable storage medium for updating page
WO2016065814A1 (zh) 信息选取方法及装置
WO2016206295A1 (zh) 字符确定方法及装置
WO2017032078A1 (zh) 一种界面控制方法及移动终端
CN105511777B (zh) 触控显示屏上的会话显示方法及装置
US20150116368A1 (en) Method and device for adjusting characters of application
CN105094626B (zh) 文本内容选择方法及装置
CN110968364A (zh) 添加快捷插件的方法、装置及智能设备
CN107168969B (zh) 一种页面元素控制方法、装置及电子设备
CN106020694B (zh) 电子设备、选区动态调整方法及装置
CN107832112B (zh) 壁纸设置方法及装置
EP4020150A1 (en) Method for cursor control, electronic device and storage medium

Legal Events

Date Code Title Description
WWE Wipo information: entry into national phase

Ref document number: MX/A/2015/001411

Country of ref document: MX

ENP Entry into the national phase

Ref document number: 20157002642

Country of ref document: KR

Kind code of ref document: A

ENP Entry into the national phase

Ref document number: 2016508008

Country of ref document: JP

Kind code of ref document: A

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

Ref document number: 14886287

Country of ref document: EP

Kind code of ref document: A1

REG Reference to national code

Ref country code: BR

Ref legal event code: B01A

Ref document number: 112015002042

Country of ref document: BR

NENP Non-entry into the national phase

Ref country code: DE

122 Ep: pct application non-entry in european phase

Ref document number: 14886287

Country of ref document: EP

Kind code of ref document: A1

ENP Entry into the national phase

Ref document number: 112015002042

Country of ref document: BR

Kind code of ref document: A2

Effective date: 20150129