Page layout method and device, display device, electronic device, and storage medium

Abstract

This application relates to a page layout method, apparatus, display device, electronic device, and storage medium. The method includes: determining the element type and semantic features of each page element, wherein the semantic features are used to indicate the importance of the page element in the page structure; determining page adaptation parameters for the corresponding page element by combining the element type and the semantic features; and determining the final rendering size of the corresponding page element based on the page adaptation parameters and a preset page viewport size. This application can improve the rationality of page layout.

Description

Technical Field

[0001] This application relates to the field of terminal technology, and in particular to a page layout method, apparatus, display device, electronic device and storage medium. Background Technology

[0002] When adapting various visual pages to different terminal screen sizes or browser window scaling changes, all page elements share a single scaling rule for size adaptation. This approach has many drawbacks. For example, the page title and body text are enlarged and shrunk simultaneously, disrupting the originally designed visual hierarchy and causing confusion in the page's visual order. Alternatively, interactive controls such as buttons may shrink along with the overall page size, resulting in excessively small interactive components on small screens and making touch operation inconvenient. Summary of the Invention

[0003] This application provides a page layout method, apparatus, display device, electronic device, and storage medium to improve the rationality of page layout.

[0004] According to one aspect of the embodiments of this application, this application provides a page layout method, the method comprising: Determine the element type and semantic features of each page element, wherein the semantic features are used to indicate the importance of the page element in the page structure; The page adaptation parameters of the corresponding page element are determined by combining the element type and the semantic features; The final rendering size of the corresponding page element is determined based on the page adaptation parameters and the preset page viewport size.

[0005] Optionally, determining the semantic features of each page element includes: A DOM tree is generated by parsing the page code, where each node in the DOM tree corresponds to a page element; Traverse the DOM tree and use the path length from the root node to the current node as the nesting depth of the current page elements; Based on the page viewport size and the visible area of ​​the current page element, determine the area proportion of the current page element; Detect whether the current page element has a listener event bound to it, and determine the listener attribute of the current page element; Identify the business function attributes of the current page elements within the page; The nesting depth, the area proportion, the listening attribute, and the business function attribute are used as semantic features of the page element.

[0006] Optionally, determining the page adaptation parameters for the corresponding page element by combining the element type and the semantic features includes: Based on the element type, the corresponding basic adaptation parameters are queried in the preset mapping table, wherein the basic adaptation parameters are used to set a unified adaptation benchmark for page elements of the same type. The semantic features are input into a preset generation model to obtain correction parameters, wherein the correction parameters are used to distinguish the adaptation differences between different page elements of the same element type; By combining the basic adaptation parameters and the correction parameters, the page adaptation parameters of the page element are obtained.

[0007] Optionally, the basic adaptation parameters include basic scaling weight, basic change curve, basic upper limit size, and basic lower limit size; the correction parameters include curve offset, upper limit correction coefficient, and lower limit correction coefficient; and the page adaptation parameters of the page element are obtained by fusing the basic adaptation parameters and the correction parameters: The curve offset is superimposed on the basic change curve to obtain the final adaptation curve of the page element, wherein the curve offset is used to correct the smoothness of the curve. The maximum allowable size of the page element is obtained by correcting the basic upper limit size using the upper limit correction coefficient. The minimum allowable size of the page element is obtained by correcting the basic lower limit size using the lower limit correction coefficient. The basic scaling weight, the final adaptation curve, the maximum allowable size, and the minimum allowable size are used as the page adaptation parameters for the page element.

[0008] Optionally, determining the final rendering size of the corresponding page element based on the page adaptation parameters and the preset page viewport size includes: By combining the basic scaling weight, the final adaptation curve, and the page viewport size, a target scaling factor for the page element in a set size dimension is generated. Multiply the original size of the page element in the set size dimension by the target scaling factor to obtain the scaled target size; Select the maximum value between the target size and the minimum allowable size, and select the minimum value between the maximum allowable size and the maximum value to obtain the sub-rendering size of the page element under the set size dimension; The final rendered size of the page element is obtained by summing up the individual rendering sizes under each set size dimension.

[0009] Optionally, generating the target scaling factor for the page element in a set size dimension by combining the base scaling weight, the final adaptation curve, and the page viewport size includes: Determine the page viewport value that adapts to the set size dimension and the preset baseline viewport value; Based on the ratio of the page viewport value to the baseline viewport value, and combined with the variation pattern of the final adaptation curve, the adaptation adjustment amount is obtained. The adaptation adjustment amount is used to indicate the correction amount by which the size scaling of page elements changes continuously with the final adaptation curve during the change of the page viewport size. The target scaling factor of the page element in the set size dimension is obtained by multiplying the base scaling weight and the adaptation adjustment amount.

[0010] Optionally, after determining the final rendering size of the corresponding page element, the method further includes: If a change in the page viewport size is detected, the page viewport size is reacquired. Update the final rendering size of the corresponding page elements based on the re-acquired page viewport size and the page adaptation parameters.

[0011] According to another aspect of the embodiments of this application, this application provides a page layout apparatus, the apparatus comprising: The first determining module is used to determine the element type and semantic features of each page element, wherein the semantic features are used to indicate the importance of the page element in the page structure; The second determining module is used to determine the page adaptation parameters of the corresponding page element by combining the element type and the semantic features; The third determining module is used to determine the final rendering size of the corresponding page element based on the page adaptation parameters and the preset page viewport size.

[0012] According to another aspect of the embodiments of this application, this application provides a display device including the page layout apparatus described above.

[0013] According to another aspect of the embodiments of this application, this application provides an electronic device, including: at least one communication interface; at least one bus connected to the at least one communication interface; at least one processor connected to the at least one bus; and at least one memory connected to the at least one bus.

[0014] According to another aspect of the embodiments of this application, this application also provides a computer storage medium storing computer-executable instructions for performing the page layout method described in any of the preceding claims of this application.

[0015] The technical solutions provided in this application have the following advantages compared with the prior art: This application determines the element type and semantic features of each page element. Element type ensures consistent page adaptation rules for elements of the same type, while semantic features reflect the importance of page elements within the overall page structure. Combining element type and semantic features, page adaptation parameters are determined for each element. Element type ensures consistent scaling standards for elements of the same type, guaranteeing a neat page layout. Semantic features differentiate the scaling scales of different page elements, allowing elements of varying importance to have their own matching scaling effects. Finally, combining the page viewport size and page adaptation parameters, the final rendering size is determined, enabling adaptive display of page elements under different page window changes. This application breaks the constraint of existing technologies where all page elements share the same layout rules, refining the adaptation granularity from the overall page level to the individual element level. This allows different page elements to have their own scaling rules, avoiding problems such as page hierarchy disorder and element display imbalance caused by uniform scaling, and improving the rationality of page layout adaptation. Attached Figure Description

[0016] The accompanying drawings, which are incorporated in and form part of this specification, illustrate embodiments consistent with this application and, together with the description, serve to explain the principles of this application.

[0017] To more clearly illustrate the technical solutions in the embodiments of this application or the prior art, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, for those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0018] One or more embodiments are illustrated by way of example with reference numerals in the accompanying drawings. These illustrations do not constitute a limitation on the embodiments. Elements with the same reference numerals in the drawings are denoted as similar elements. Unless otherwise stated, the figures in the drawings are not to be limited by scale.

[0019] Figure 1 A schematic diagram of the page layout system provided in the embodiments of this application; Figure 2 A flowchart of a page layout method provided in an embodiment of this application; Figure 3 A schematic diagram of the framework of a page layout system provided in an embodiment of this application; Figure 4 This application provides an overall flowchart of a page layout. Figure 5 A schematic diagram of the structure of a page layout device provided in an embodiment of this application; Figure 6 This is a schematic diagram of the structure of an electronic device provided in an embodiment of this application. Detailed Implementation

[0020] To make the objectives, technical solutions, and advantages of the embodiments of this application clearer, the technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this application, not all embodiments. Based on the embodiments of this application, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this application.

[0021] The following disclosure provides numerous different embodiments or examples for implementing various structures of this application. To simplify the disclosure, specific examples of components and arrangements are described below. These are merely examples and are not intended to limit the scope of this application. Furthermore, reference numerals and / or letters may be repeated in different examples. Such repetition is for simplification and clarity and does not in itself indicate a relationship between the various embodiments and / or arrangements discussed.

[0022] Optionally, in the embodiments of this application, the above-described page layout method can be applied to, for example, Figure 1 The hardware environment shown consists of terminal 101 and server 103. Figure 1 As shown, server 103 is connected to terminal 101 via a network. Terminal 101 sends the collected page viewport size and the element type and semantic features of each page element to server 103. Server 103 determines the final rendering size of the page elements based on this data and feeds it back to terminal 101. Database 105 can be set up on the server or independently of the server to provide data storage services for server 103. The network mentioned above includes, but is not limited to, wide area network, metropolitan area network or local area network. Terminal 101 includes, but is not limited to, PC, mobile phone, tablet computer, etc.

[0023] Furthermore, the embodiments of this application can also be implemented as functional plug-ins and integrated into the terminal 101.

[0024] The following will describe in detail a page layout method provided in this application embodiment, taking its application to a terminal as an example, with specific implementation details. Figure 2 As shown, the specific steps are as follows: Step 201: Determine the element type and semantic features of each page element, where semantic features are used to indicate the importance of page elements in the page structure; Step 202: Determine the page adaptation parameters for the corresponding page elements by combining element type and semantic features; Step 203: Determine the final rendering size of the corresponding page element based on the page adaptation parameters and the preset page viewport size.

[0025] In step 201, after the page initialization and loading are completed, or when a change in the page display state is detected, the terminal obtains the page viewport size corresponding to the page window to be displayed during page loading. The page viewport size is the visible display size of the page window to be displayed, including the viewport width and viewport height.

[0026] During actual operation, changing to terminal devices with different screen sizes, switching between portrait and landscape modes, altering the opening / closing state of foldable terminals, or resizing the browser window will all change the page viewport size. When the viewport size changes, the layout of elements that were originally fixed in size cannot adapt to the new visible area, leading to issues such as element overflow, disproportionate dimensions, or layout errors. Therefore, the terminal needs to obtain the latest page viewport size.

[0027] The terminal retrieves the page code from a local database or server, parses and processes the page code to generate a corresponding DOM tree (Document Object Model) structure, where each node in the DOM tree corresponds to a page element. The terminal performs a depth-first traversal on the generated DOM tree, extracting the attribute information of each page element during the traversal. The attribute information includes tag name, class name, ID, inline styles, and rendered style attributes, etc.

[0028] The terminal uses the tag name in the element attribute information to call a locally pre-built type matching rule library to categorize each page element. This type matching rule library has pre-set fixed matching logic, enabling precise classification, for example... 、 Tags such as "text content" are identified as such. <h1> to< / h1> <h6>The tag is identified as "title text" type, and will The tag is identified as an "image" type. <button>, The tags are identified as "interactive elements".

[0029] Meanwhile, the terminal follows the logic that class name has higher priority than tag name. The terminal pre-stores the correspondence rules between class name and element type. When a page element is configured with a class name, such as ".main-title", ".content-text", or ".hero-image", the terminal prioritizes matching the element type corresponding to the class name, instead of simply relying on the default attribute of the tag, thus improving the accuracy of element type recognition in complex page scenarios.

[0030] After identifying element types, the terminal further extracts semantic features of each page element. These semantic features consist of the element's nesting depth in the DOM tree, its page area proportion, interaction listening attributes, and business function attributes. Nesting depth reflects the element's position in the page hierarchy; page area proportion reflects the element's display size; interaction listening attributes distinguish whether an element has operational functionality; and business function attributes define the element's role in the page's business architecture.

[0031] By comprehensively judging information from multiple dimensions, semantic features can fully reflect the importance of a page element within the overall page structure. The terminal can distinguish page elements of different importance, including core elements that play a central role in the page's display, interactive elements that users can click on, and auxiliary elements that only serve a supplementary display function.

[0032] In step 202, the terminal sets a uniform basic scaling rule for page elements of the same type according to the element type, so as to ensure that the scaling method of page elements with the same function is consistent, and to keep the overall layout of the page neat and uniform.

[0033] Semantic features are used to distinguish the importance of elements of the same type on a page. The terminal makes personalized adjustments to the basic layout rules based on the importance of different page elements in the page structure.

[0034] The terminal combines element type and semantic features to determine page adaptation parameters for page elements. These page adaptation parameters constrain the scaling behavior and size boundaries of the corresponding page elements when the page viewport size changes.

[0035] This application combines element type with semantic features. It ensures consistent adaptation rules for elements of the same type, preventing cluttered page layouts, by relying on element type; and it differentiates the importance of page elements by relying on semantic features, allowing elements of varying importance to have matching scaling effects. This approach improves upon traditional solutions where all page elements are scaled at the same ratio, resulting in unclear page hierarchy and distorted controls. It ensures that the scaled display of each page element matches the original page layout, preserving the original size contrast of titles and other content while preventing buttons from being excessively shrunk on small screens.

[0036] In step 203, when the terminal performs page layout adaptation, it uses the real-time page viewport size as the calculation benchmark and combines it with the page adaptation parameters of the corresponding page elements to calculate the final rendering size of the page elements in the current scene. The final rendering size includes, but is not limited to, the width, height, inner and outer spacing, and font size of the page elements.

[0037] Page adaptation parameters define specific scaling rules for each page element, while the page viewport size is dynamic data collected in real time by the terminal. Terminal screen rotation, screen folding, or browser window scaling all cause the page viewport size to change in real time. Therefore, page adaptation parameters determine the scaling rules for page elements and the allowable range of size changes; the real-time viewport size represents the available display space on the current page, determining how much page elements actually need to be enlarged or reduced. Only by combining boundary rules with the current visible space—both adhering to the preset scaling logic to avoid page elements being too large or too small, and fitting the actual size of the current page viewport—can a reasonable rendering size be calculated, achieving adaptive layout.

[0038] This approach allows page elements to dynamically adapt and adjust to various screen scenarios, such as scaling the browser window or opening and closing a folded screen; it stably preserves the original visual hierarchy of page elements, avoiding visual confusion, such as maintaining the original size difference between the title and the body text; and it improves the touch usability of the page in different usage scenarios, such as ensuring that interactive controls such as buttons are large enough for users to click.

[0039] After determining the final rendering size of each page element, the terminal traverses the DOM tree in depth-first order to locate the node of the page element within the DOM tree. Then, it uses native style setting methods to write the page element's width, height, element spacing, font size, and other parameters into the page element's inline styles. Since inline styles have higher priority than external and internal style sheets, the final rendering size parameters assigned in this process can directly override the page element's CSS (Cascading Style Sheets) style definitions, achieving precise and differentiated adaptation. After all page elements' inline styles are set, the terminal performs layout calculations and rendering operations based on the updated DOM tree and CSSOM (CSS Object Model) tree. The DOM tree records the hierarchical structure of page elements, while the CSSOM tree stores the style properties, style constraints, and style priorities of each page element. The terminal combines the data from the DOM tree and CSSOM tree to calculate the arrangement and size of each page element, completes page rendering, and finally displays the adapted page on the device screen.

[0040] This application determines the element type and semantic features of each page element. Element type ensures consistent page adaptation rules for elements of the same type, while semantic features reflect the importance of page elements within the overall page structure. Combining element type and semantic features, page adaptation parameters are determined for each element. Element type ensures consistent scaling standards for elements of the same type, guaranteeing a neat page layout. Semantic features differentiate the scaling scales of different page elements, allowing elements of varying importance to have their own matching scaling effects. Finally, combining the page viewport size and page adaptation parameters, the final rendering size is determined, enabling adaptive display of page elements under different page window changes. This application breaks the constraint of existing technologies where all page elements share the same layout rules, refining the adaptation granularity from the overall page level to the individual element level. This allows different page elements to have their own scaling rules, avoiding problems such as page hierarchy disorder and element display imbalance caused by uniform scaling, and improving the rationality of page layout adaptation.

[0041] As an optional implementation, in step 202, determining the semantic features of each page element includes: generating a DOM tree by parsing the page code, wherein each node in the DOM tree corresponds to a page element; traversing the DOM tree and using the path length from the root node to the current node as the nesting depth of the current page element; determining the area proportion of the current page element based on the page viewport size and the visible area of ​​the current page element; detecting whether the current page element is bound to a listener event and determining the listener attribute of the current page element; identifying the business function attribute undertaken by the current page element in the page; and using the nesting depth, area proportion, listener attribute, and business function attribute as the semantic features of the page element.

[0042] The terminal parses the page code and generates a DOM tree based on the hierarchical structure of the page code. Each node in the DOM tree corresponds to a page element. The DOM tree is used to completely restore the nested hierarchical structure and arrangement relationship between all page elements.

[0043] The terminal traverses the DOM tree, calculating the nesting depth of each node. The path length from the root node to the current node is defined as the nesting depth of the current page element. Nesting depth indicates the priority of a page element within the DOM tree. A smaller nesting depth value indicates that the page element is at the beginning of the DOM tree, and these elements are mostly core content of the page, with higher importance. Page elements with larger nesting depth values ​​are mostly auxiliary or supplementary content, with lower importance.

[0044] The terminal obtains the viewport size of the page to be displayed, calculates the total area of ​​the entire viewport, and then calculates the visible area of ​​the current page element within the visible area. The visible area of ​​the current page element is divided by the total area of ​​the viewport to obtain the ratio, which is used as the area percentage of the current page element. The area percentage represents the visual weight of a page element. The higher the area percentage, the larger the display area occupied by the page element within the viewport, making it easier for users to observe and capture, and thus its visual importance. Conversely, decorative page elements with a smaller area percentage have lower visual weight and are less important.

[0045] The terminal checks each element on the current page to see if it is bound to interactive event listeners such as click, jump, and swipe. Based on the detection results, it generates corresponding listener attributes for the current page element. These listener attributes are used to identify whether the current page element has interactive characteristics. Listener attributes can distinguish whether a page element undertakes interactive functions. Page elements bound to listener events can receive operation commands issued by the user and are a core component of the page's functional system, with higher importance than page elements that do not have listener events and are only used for static display.

[0046] The terminal reads the `role` attribute value configured for the current page element and uses this value as the corresponding business function attribute. The `role` attribute directly defines the functional positioning of a page element within the overall business architecture of the webpage. For example, different `role` identifiers such as `main`, `banner`, `navigation`, and `contentinfo` correspond to different business modules, such as the main page content, the top promotional module, the navigation bar, and the bottom auxiliary information. Page elements in core business modules have higher business value and are therefore more important, while auxiliary page elements play a secondary display role and are less important.

[0047] The terminal integrates the nesting depth, area proportion, listening attributes, and business function attributes of the current page element to form the complete semantic features of the current page element.

[0048] By adopting the above method and relying on four types of semantic features to comprehensively evaluate the primary and secondary levels of each page element, we can avoid the judgment bias caused by judging the importance of page elements from a single dimension, and achieve a fine distinction of the importance of page elements. Subsequently, we can configure differentiated scaling rules according to the importance of each page element, avoiding the defects of core page elements being over-compressed and secondary page elements crowding out the display area when the whole page is scaled.

[0049] In this application, semantic features are constructed based on nesting depth, area proportion, listening attributes, and business function attributes. The importance of each page element is comprehensively quantified from four dimensions: document hierarchy, visual display, interactive capabilities, and business positioning. Then, the adjustment range of each page element is adapted according to its importance. Protective scaling rules are provided for core page elements to prevent them from shrinking excessively during page contraction. The visual priority of secondary page elements is weakened, thereby finely distinguishing the primary and secondary status of page elements and realizing differentiated adaptive layout of each page element. This improves the shortcomings of existing solutions, such as the ambiguity of page hierarchy and the easy weakening of key content.

[0050] As an optional implementation, in step 203, determining the page adaptation parameters of the corresponding page element by combining element type and semantic features includes: Step S11: Based on the element type, query the corresponding basic adaptation parameters in the preset mapping table. The basic adaptation parameters are used to set a unified adaptation benchmark for page elements of the same type. Step S12: Input the semantic features into the preset generation model to obtain the correction parameters, wherein the correction parameters are used to distinguish the adaptation differences between different page elements under the same element type; Step S13: Combine the basic adaptation parameters and the correction parameters to obtain the page adaptation parameters of the page elements.

[0051] In step S11, the terminal queries a preset mapping table based on the element type to find the basic adaptation parameters that fit the current page viewport size. The preset mapping table is configured with element type, minimum viewport size, maximum viewport size, basic scaling weight, scaling curve type, and upper and lower limit constraint sizes for the element. The storage logic of the preset mapping table is as follows: for the same type of page element, multiple sets of basic adaptation parameters can be configured, and each set of basic adaptation parameters corresponds to a continuously changing curve to adapt to different viewport application scenarios.

[0052] When the terminal performs a search operation, it uses the element type category as the main search condition, filters out all parameter records corresponding to the element type in the preset mapping table, and then combines the collected page viewport size to match the preset minimum viewport size and maximum viewport size in each parameter record to retrieve a set of basic adaptation parameters that are adapted to the current viewport size. The basic adaptation parameters specifically include the basic scaling weight λ_base, the basic change curve curve_default, the basic upper limit size max_constraint, and the basic lower limit size min_constraint.

[0053] The base scaling weight λ_base defines how sensitive the page element is to scaling changes as the viewport size changes. A larger base scaling weight means the page element is more sensitive to viewport size changes, and the larger the change in size is; a smaller base scaling weight means the smaller the change in size is.

[0054] The basic change curve curve_default has three types: linear curve, slow-in slow-out curve, and logarithmic curve. Each type of curve is explained below.

[0055] A linear curve, corresponding to the function f(x) = x, has a scaling factor that is directly proportional to the normalized viewport size. As the viewport enlarges or shrinks, page elements scale up or down synchronously and uniformly, with the scaling speed remaining exactly the same throughout, without any initial slow-to-fast or fast-to-slow transitions. The scaling factor controls the ratio by which page elements are scaled up or down, dynamically calculated based on changes in viewport width. Multiplying the viewport size by the scaling factor yields the adapted page element size.

[0056] The easing-in / easing-out curve corresponds to the function f(x)=x^2. When the viewport size is small, the scaling of page elements is very small and the change is gradual. As the viewport size increases, the speed of change of page element size will become faster and faster. The larger the viewport, the more obvious the scaling of page elements.

[0057] A logarithmic curve, corresponding to the function f(x) = ln(1 + (e-1)x), means that when the viewport size is adjusted slightly, the size of page elements hardly changes; only when the viewport size changes significantly will the size of page elements scale noticeably. This curve is specifically designed for interactive page elements such as buttons, preventing buttons from becoming excessively small or difficult to click when users drag the browser window slightly.

[0058] The base upper limit size `max_constraint` is the maximum allowed rendering size threshold for page elements of the corresponding type. If the size of a page element calculated by scaling exceeds this base upper limit size, the terminal will force the final size of the page element to be the base upper limit size to prevent page elements from being excessively enlarged in large-screen scenarios, thus squeezing the display space of other content on the page and maintaining the overall layout balance of the page.

[0059] The minimum allowable rendering size, min_constraint, is the threshold for the minimum rendering size of a page element of the corresponding type. If the size of a page element calculated by scaling is lower than this minimum allowable size, the terminal will forcibly lock this minimum allowable size as the final size of the page element. This prevents page elements such as text and buttons from being excessively shrunk in small screen and narrow window scenarios, ensuring text readability and the clickable range of interactive controls.

[0060] In step S12, the terminal inputs semantic features composed of nesting depth, region proportion, whether there is interaction, and role encoding into the preset generation model that has completed supervised learning training. The model outputs correction parameters for differential adjustment of the adaptation benchmark. The preset generation model is trained by supervised learning, and the training samples come from a large amount of labeled page elements and their optimal adaptation effect data under various terminal devices.

[0061] The preset generated model output correction parameters include three categories: curve offset δ_curve, upper limit correction coefficient α_max, and lower limit correction coefficient α_min.

[0062] The curve offset δ_curve has a range of -1, 0, and 1, which respectively represent adjusting the scaling curve to a smoother direction, maintaining the original default curve, and adjusting it to a steeper direction.

[0063] The upper limit correction coefficient α_max ranges from 0.8 to 1.5 and is used to perform a multiplier correction on the basic upper limit size. If α_max is less than 1, the maximum allowable size will be smaller than the basic upper limit size; if α_max is greater than 1, the maximum allowable size will be larger than the basic upper limit size.

[0064] The lower limit correction factor α_min ranges from 0.5 to 1.2 and is used to perform a scaling correction on the basic lower limit size. If α_min is less than 1, the minimum allowable size will be smaller than the basic lower limit size; if α_min is greater than 1, the minimum allowable size will be larger than the basic lower limit size.

[0065] The correction parameters are used to distinguish between page elements belonging to the same element type but with different semantic importance, providing a basis for personalized adaptation adjustments for different page elements on top of a unified adaptation benchmark.

[0066] In step S13, the terminal performs a fusion calculation on the basic adaptation parameters and the correction parameters to generate the page adaptation parameters for the current page element.

[0067] The process of generating page adaptation parameters is as follows: A curve offset is superimposed on the basic change curve to obtain the final adaptation curve for the page element. The curve offset is used to correct the smoothness of the curve. An upper limit correction coefficient is used to correct the basic upper limit size to obtain the maximum allowable size of the page element. A lower limit correction coefficient is used to correct the basic lower limit size to obtain the minimum allowable size of the page element. The basic scaling weight, the final adaptation curve, the maximum allowable size, and the minimum allowable size are used as the page adaptation parameters for the page element.

[0068] The final adaptation curve curve_final = basic change curve curve_default + curve offset δ_curve. The curve offset is added as a function parameter to the function expression of the basic change curve to adjust the curvature or smoothness of the curve, thus obtaining the final adaptation curve curve_final. Maximum allowable size max_constraint_final = base upper limit size max_constraint × upper limit correction coefficient α_max; Minimum allowable size min_constraint_final = basic lower limit size min_constraint × lower limit correction coefficient α_min.

[0069] This application employs a generation logic that combines a unified basic adaptation benchmark with personalized adjustments. First, it matches basic adaptation parameters in a preset mapping table based on element type and page viewport size range, ensuring all page elements of the same type have a unified adaptation benchmark and guaranteeing a consistent layout style for similar page elements. Then, relying on the multi-dimensional semantic features of page elements, it drives a preset generation model to output correction parameters, configuring differentiated correction ranges for page elements of the same type with varying levels of importance. This solves the problem of coarse granularity caused by relying solely on element type-based adaptation rules. The two levels of parameters work together to maintain consistency in the adaptation logic for page elements of the same type, while also comprehensively determining their importance based on document hierarchy, visual proportion, interactive attributes, and business function positioning. This achieves refined element-level adaptation differentiation, abandoning the existing approach of using a single scaling rule for all page elements, and improving the rationality of webpage layout adaptation across various screen size scenarios.

[0070] As an optional implementation, in step 203, determining the final rendering size of the corresponding page element based on the page adaptation parameters and the preset page viewport size includes: Step S21: Combine the basic scaling weight, the final adaptation curve, and the page viewport size to generate the target scaling factor of the page elements in the set size dimension; Step S22: Multiply the original size of the page element in the set size dimension by the target scaling factor to obtain the scaled target size; Step S23: Select the maximum value between the target size and the minimum allowable size, and select the minimum value between the maximum allowable size and the maximum value to obtain the individual rendering sizes of the page element under the set size dimensions; Step S24: Summarize the rendering dimensions of each set size dimension to obtain the final rendering dimensions of the page elements.

[0071] In step S21, the terminal combines the basic scaling weight, the final adaptation curve, and the page viewport size to calculate and generate the target scaling factor corresponding to the page element in the set size dimension. The specific execution process is as follows.

[0072] The first step is for the terminal to determine the page viewport values ​​to be adapted to the set size dimensions, and simultaneously read the pre-configured baseline viewport values. The set size dimensions include the width, height, font size, and inner and outer spacing of page elements. The baseline viewport values ​​and page viewport values ​​are determined based on the set size dimensions, and the specific adaptation is as follows.

[0073] If the size dimension is set to the width of the page element or the horizontal spacing inside and outside, the reference viewport value and the page viewport value are both taken from the viewport width value.

[0074] If the size dimension is set to the height of the page element or the inner and outer vertical spacing, the reference viewport value and the page viewport value are both taken from the viewport height value.

[0075] If the size dimension is set to the font size, both the baseline viewport value and the page viewport value are taken from the viewport width value. That is, the horizontal visible range of the page is used as the reference for text scaling, which conforms to the logic of adapting web page text to the screen width.

[0076] The second step involves the terminal calculating the ratio of the page viewport value to the baseline viewport value. This ratio is the normalized viewport ratio. This normalized viewport ratio is then substituted into the function expression corresponding to the final adaptation curve. Based on the inherent continuous variation law of the final adaptation curve, the adaptation adjustment amount is obtained. This adaptation adjustment amount is a multiplier that continuously changes with the viewport size, reflecting the basic range by which the size of page elements needs to be enlarged or reduced when the page viewport size changes. Different types of final adaptation curves will output different adaptation adjustment amounts, thereby achieving smooth scaling control at different paces of change.

[0077] This application abandons the traditional approach of relying on predefined breakpoints to segment and switch adaptation rules. Instead, it pre-configures functions corresponding to curves for each type of page element in a preset mapping table. The selectable curves include linear curves, easing-in / easing-out curves, and logarithmic curves. When calculating the adaptation adjustment amount, it is not necessary to determine whether the current viewport size matches the preset breakpoint. The normalized viewport ratio can be directly substituted into the curve function within the complete continuous domain to complete the calculation.

[0078] This application upgrades the outdated piecewise fixed-value and piecewise linear adaptation model to a continuous function mapping model covering the entire viewport size range. This model can not only match different curve change rhythms to various page elements as needed, but also capture viewport size changes in real time and calculate adaptation adjustments synchronously. This application completely solves the problem of discrete page layout jumps caused by relying on breakpoint switching adaptation rules. In scenarios such as dragging to adjust the browser window size, expanding or collapsing the screen, the size of page elements can smoothly follow the viewport size to change synchronously, without abrupt layout jumps, achieving continuous and smooth real-time updates.

[0079] The third step is for the terminal to multiply the base scaling weight by the adaptation adjustment amount. The result of the multiplication is the target scaling factor for the current page element's set size dimension.

[0080] For example, if the size dimension is set to the width of the page element, then the corresponding page viewport value and the base viewport value are the viewport widths. The formula for calculating the target scaling factor in this dimension is: scale_factor=λ_base×f_curve(W / W_ref) Where scale_factor is the target scaling factor of the page element in width, λ_base is the base scaling weight, f_curve is the final adaptation curve, W is the page viewport width, and W_ref is the base viewport width, for example, 1440px.

[0081] Similarly, when setting the size dimensions as the height of page elements, font size, and inner and outer spacing, the target scaling factor for the corresponding dimension is also calculated according to the formula above.

[0082] In step S22, the terminal obtains the original size of the page element in the set size dimension, such as the original width, and multiplies the original size by the calculated target scaling factor to obtain the scaled target size. This scaled target size is calculated solely based on the viewport size change without introducing any size boundary constraints, which may result in the size being too small or too large.

[0083] In step S23, the terminal performs size boundary limit calculation on the scaled target size. First, it compares the scaled target size with the minimum allowable size and takes the maximum value of the two. If the scaled target size is less than the minimum allowable size, it means that the size of the page element after the viewport is shrunk is lower than the safe and usable standard, and the minimum allowable size is forcibly used as a fallback. If the scaled target size is greater than or equal to the minimum allowable size, the original scaled target size is retained.

[0084] Then, compare the maximum value obtained from the previous step with the maximum allowable size and take the minimum of the two. If the size after the fallback exceeds the maximum allowable size, it means that the size of the page element under the large screen viewport is too large and will squeeze the display space of other page elements, so it is forcibly limited to the maximum allowable size; if it does not exceed the maximum allowable size, then retain the maximum value obtained in the previous step.

[0085] After two rounds of value filtering, the sub-dimensions corresponding to the currently set dimension are obtained.

[0086] In step S24, the terminal collects the individual dimensions corresponding to each of the set size dimensions, summarizes and integrates all individual rendering dimensions, and generates the final rendering dimensions of the page elements.

[0087] For example, the formula for calculating the final rendered width of a page element is as follows: targetWidth=min(max(originalWidth×scale_factor,min_constraint_final),max_constraint_final) Where targetWidth is the final rendered width of the page element, originalWidth is the original width of the page element, scale_factor is the target scaling factor on the width, min_constraint_final is the minimum allowable size, and max_constraint_final is the maximum allowable size.

[0088] This application employs a layered, progressive size calculation logic. First, the target scaling factor is calculated based on the page viewport size, the final adaptation curve, and the basic scaling weight. Then, the original size is multiplied by the target scaling factor to obtain the scaled target size. Subsequently, boundary constraints are completed through two layers of filtering logic—minimum allowable size and maximum allowable size—to obtain the individual rendering sizes. Finally, all dimensions of individual rendering sizes are aggregated to obtain the final rendering size. The entire process first enables page elements to scale continuously and smoothly with the viewport size. Then, a two-way size interception mechanism is used to safely correct the scaled target size. This avoids the problem of text and interactive page elements being too small to read or click in narrow viewports, and also prevents page elements from being enlarged without limit in large-screen scenarios, disrupting the overall page layout. At the same time, the individual rendering sizes are calculated independently for each dimension—width, height, font size, and spacing—and then aggregated to generate the final rendering size. This achieves independent adaptation and control of various visual size parameters of page elements, balancing page layout smoothness, text readability, and interactive control operability under any viewport size.

[0089] As an optional implementation, after determining the final rendering size of the corresponding page element, the method further includes: if a change in the page viewport size is detected, re-acquiring the page viewport size; and updating the final rendering size of the corresponding page element based on the re-acquiring page viewport size and page adaptation parameters.

[0090] The terminal pre-registers browser window resize event listeners and screen orientation switching event listeners. For terminal devices equipped with foldable screen hardware, an additional dedicated listening interface for folding angle changes is registered to continuously monitor changes in the page viewport size in real time.

[0091] The terminal continuously monitors various registered size change events. Once a change in the page viewport size is detected, the terminal immediately re-collects the latest page viewport size. The terminal compares the difference between the newly collected page viewport size and the historical viewport size retained from the previous round of calculation to determine whether the difference exceeds a preset size change threshold, such as 5px. Only when the difference between the old and new sizes exceeds the size change threshold is the terminal determined that the current viewport size has changed effectively. Then, the process of collecting the terminal page viewport size in step 201 is re-executed. Based on the newly acquired page viewport size and the page adaptation parameters of the page element, the final rendering size of the corresponding page element is completely recalculated and updated.

[0092] If the difference between the old and new dimensions does not reach the size change threshold, the size change is considered a minor fluctuation, and there is no need to re-execute the entire adaptation calculation process. The final rendered size of the current page elements remains unchanged. The entire update process relies on a continuous curve mapping mechanism to recalculate the adaptation parameters. Throughout the continuous change of the page viewport size, the size adjustment effect of the page elements remains continuous and smooth, without any discrete jumps in page size.

[0093] This application captures various viewport size changes such as window scaling, screen rotation, and folding screen opening and closing. By filtering out minor size fluctuations with a size change threshold, it avoids the waste of performance resources caused by frequent full-process recalculation when windows are slightly dragged or devices experience temporary jitter. When a valid viewport size change is detected, the final rendering size of page elements is automatically updated to ensure that the page layout can be adjusted synchronously with the visible area of ​​the terminal in real time. At the same time, the adaptation calculation is based on continuous curve mapping throughout, abandoning the traditional breakpoint segmented adaptation mode. In dynamic scenarios such as continuous window dragging and scaling, and gradual unfolding or folding of the screen, the size of page elements changes smoothly and gradually without abrupt layout jumps. It balances the real-time performance of dynamic page adaptation, the resource efficiency of computing, and the smoothness of the visual experience when dynamically adjusting across multiple terminals.

[0094] For example, Table 1 shows the adaptation effect of page elements of the company's official website under three types of page viewports. The test scenarios are 1920px for desktop, 768px for tablet, and 375px for mobile. The basic scaling weight is uniformly bound according to the element type, and the size is calculated by combining the exclusive final adaptation curve. Then, the maximum allowable size and minimum allowable size are used for boundary interception to finally form the actual rendering size shown in the table.

[0095] Table 1

[0096] Table 1 clearly illustrates the logical relationships between page element types, basic scaling weights, adaptation curves, page viewport sizes, and page element rendering sizes.

[0097] The type of page element is the underlying basis for configuration rules. Each type of page element will be pre-bound with its own basic scaling weight and adaptation curve.

[0098] Larger titles and main visual images with higher visual priority will be assigned larger base scaling weights and paired with adaptation curves that show steeper changes.

[0099] The basic scaling weight values ​​for the main text paragraphs are relatively small, paired with an adaptation curve that changes at a gradual pace.

[0100] As an interactive control, the button is configured with a logarithmic adaptation curve, so that the button size is not easily compressed when there are slight changes in the page viewport.

[0101] Assuming the base scaling weight and final adaptation curve remain fixed, the smaller the page viewport width, the smaller the calculated element adaptation size. When the calculated element adaptation size is lower than the minimum allowable size for that page element, the final rendered size of the page element will be locked and will not continue to shrink as the page viewport shrinks.

[0102] Since there is no minimum size constraint set for the main visual image, the narrower the page viewport, the larger the width proportion of the main visual image on the page will continue to increase.

[0103] Figure 3 The system framework diagram provided in this application embodiment is divided into two parts: external server and terminal. Data flow is completed by relying on HTML, CSS, JS, and DOM tree. The functions and operating logic of each module are as follows.

[0104] 1. External server.

[0105] Used to store page code, it sends the page code to the terminal after receiving a page request. The page code is in the form of HTML (HyperText Markup Language), CSS, or JS (JavaScript).

[0106] II. Terminal.

[0107] Page parsing module: Receives the web page code sent by the server, parses it to generate a DOM tree, and pushes the generated DOM tree to the update listening module, type recognition module, and semantic feature extraction module respectively.

[0108] The monitoring update module and the page viewport size acquisition module: The monitoring update module continuously monitors viewport size change events; after detecting a size change, it drives the page viewport size acquisition module to acquire the page viewport size and sends the page viewport size to the adaptation parameter calculation module.

[0109] Type recognition module and preset mapping table: The type recognition module identifies the element type corresponding to each page element based on the DOM tree, and retrieves the basic adaptation parameters stored in the preset mapping table with the element type as the index. The basic adaptation parameters include the basic scaling weight, basic change curve, basic upper limit size, and basic lower limit size of various page elements, and transmits the retrieved baseline parameters to the adaptation parameter calculation module.

[0110] Semantic feature extraction module and preset generation model: The semantic feature extraction module parses the DOM tree, extracts the semantic features corresponding to the page elements, and then inputs the semantic features into the preset generation model; the preset generation model outputs correction parameters based on the semantic features, and transmits them to the adaptation parameter calculation module to correct the baseline adaptation parameters.

[0111] Adaptation parameter calculation module: As the core of layout adaptation calculation, it simultaneously receives the page viewport size, the baseline adaptation parameters output by the preset mapping table, and the correction parameters output by the preset generation model, calculates the final rendering size corresponding to each page element, and then sends the adaptation rendering size to the layout rendering engine.

[0112] Layout rendering engine: Receives the final rendering size, reconstructs the page layout in combination with the DOM structure, generates DOM and CSS styles that adapt to the current page viewport, and then completes the page drawing and rendering to display the web interface adapted to the current device viewport.

[0113] Figure 4 The overall flow diagram of the page layout provided for this application includes the following content.

[0114] Step 401: Start the process and collect the viewport size of the terminal page.

[0115] The terminal collects the page viewport size corresponding to its own visible area in real time and uses this size as dynamic input data for layout adaptation.

[0116] Step 402: Parse the page code, traverse the DOM tree, identify element types, and extract semantic features.

[0117] The terminal parses the page code sent by the page to generate a complete DOM tree structure, traversing all nodes in the DOM tree. Each node corresponds to a page element in the webpage. The element category of each page element is identified one by one, and the semantic features corresponding to each page element are extracted. The semantic features are composed of element nesting depth, page visibility, interaction binding attributes, and business function attributes, which are used to determine the importance of each page element in the webpage hierarchy.

[0118] Step 403: Retrieve basic adaptation parameters from the table based on the element type.

[0119] The terminal uses the element type identified in step 402 as the search index, and combines it with the page viewport size in step 401 to query the pre-configured local mapping table to retrieve the basic adaptation parameters uniformly configured for elements of that page type. Page elements of the same type share a set of basic adaptation parameters to ensure that the scaling rules for similar elements such as titles, buttons, body text, and images remain consistent; the basic adaptation parameters specifically include basic scaling weight, basic change curve, basic upper limit size, and basic lower limit size.

[0120] Step 404: Input the semantic features into the model to generate correction parameters.

[0121] The terminal inputs the semantic features extracted in step 402 into the preset generation model for processing and outputs the corresponding correction parameters. The correction parameters include curve offset, upper limit correction coefficient, and lower limit correction coefficient. Their function is to distinguish the adaptation differences between primary and secondary elements of the same type based on the unified rules for similar elements, and to obtain stronger size protection strategies for key elements.

[0122] Step 405: Integrate basic adaptation parameters and correction parameters to generate page adaptation parameters.

[0123] The terminal integrates the basic adaptation parameters and correction parameters to generate page adaptation parameters for a single page element. Specifically, the process involves: overlaying a curve offset onto the basic change curve to adjust the smoothness of the curve scaling, resulting in the final adaptation curve for the element; using an upper limit correction coefficient to correct the basic upper limit size, calculating the maximum allowable size; using a lower limit correction coefficient to correct the basic lower limit size, calculating the minimum allowable size; and finally, integrating the basic scaling weights, the final adaptation curve, the maximum allowable size, and the minimum allowable size to form complete page adaptation parameters.

[0124] Step 406: Calculate the final rendered size of the page elements by combining the page viewport size and page adaptation parameters.

[0125] The terminal combines the page viewport size collected in step 401 and the page adaptation parameters generated in step 405 to calculate the rendering size in multiple dimensions, including width, height, font size, and inner / outer spacing. For a single size dimension, the corresponding page viewport value is matched with the baseline viewport value, and the ratio between the two is calculated and substituted into the final adaptation curve to obtain the adaptation adjustment amount. The adaptation adjustment amount ensures that the scaling of page elements changes along a continuous curve without any abrupt size breaks. The adaptation adjustment amount is multiplied by the basic scaling weight to obtain the target scaling factor for the current dimension. The original size of the page element is multiplied by the target scaling factor to obtain the scaled target size. Two boundary filtering steps are performed: first, the maximum value between the target size and the minimum allowable size is selected to avoid elements becoming unreadable or unclickable after being shrunk; then, the maximum value is compared with the maximum allowable size and the minimum value is taken to prevent individual page element sizes from crowding out the rest of the page content, thus obtaining the individual rendering sizes for each dimension. The individual rendering sizes for all size dimensions are summarized and integrated to obtain the final rendering size of the page element.

[0126] Step 407: Complete the webpage rendering according to the final rendering size.

[0127] The terminal reconstructs the webpage layout based on the final rendering size of all page elements, updates the DOM structure and page styles, performs page rendering operations, and outputs a webpage that fits the current visible area size on the terminal screen.

[0128] Step 408: Continuously monitor changes in the page viewport size and make branch judgments.

[0129] After the webpage rendering is complete, the terminal continuously listens for changes in the page viewport size and executes the judgment logic: If the viewport size does not change, or the size change does not exceed the size change threshold, it is determined to be an invalid fluctuation caused by device jitter. The terminal enters a waiting state, suspends calculation, and waits for the next size event to arrive, thus saving terminal computing resources.

[0130] If the detected change in viewport size exceeds the size change threshold, a valid size change requiring adaptation is determined, and the process jumps to step 401 to re-collect the page viewport size. This process then repeats all subsequent adaptation steps, refreshing the webpage layout. The entire process operates in a closed loop. When the page window is dragged and resized, the device switches between portrait and landscape modes, or a folded screen unfolds or folds, the page automatically re-adapts to the layout, achieving a smooth, seamless adaptive effect.

[0131] This application provides a page layout device, such as Figure 5 As shown, the device includes: The first determining module 501 is used to determine the element type and semantic features of each page element, wherein the semantic features are used to indicate the importance of the page element in the page structure. The second determining module 502 is used to determine the page adaptation parameters of the corresponding page element by combining the element type and semantic features; The third determining module 503 is used to determine the final rendering size of the corresponding page element based on the page adaptation parameters and the preset page viewport size.

[0132] Optionally, the first determining module 501 is used for: A DOM tree is generated by parsing the page code, where each node in the DOM tree corresponds to a page element; Traverse the DOM tree and use the path length from the root node to the current node as the nesting depth of the current page elements; Determine the area proportion of the current page element based on the page viewport size and the visible area of ​​the current page element; Detect whether the current page element has a listener event bound to it, and determine the listener attribute of the current page element; Identify the business function attributes of the current page elements within the page; Nesting depth, area proportion, listening attributes, and business function attributes are used as semantic features of page elements.

[0133] Optionally, the second determining module 502 is used for: Based on the element type, the corresponding basic adaptation parameters are queried in the preset mapping table. The basic adaptation parameters are used to set a unified adaptation benchmark for page elements of the same type. The semantic features are input into the preset generation model to obtain the correction parameters, which are used to distinguish the adaptation differences between different page elements of the same element type. By combining the basic adaptation parameters and the correction parameters, the page adaptation parameters of the page elements are obtained.

[0134] Optionally, the basic adaptation parameters include basic scaling weights, basic change curves, basic upper limit dimensions, and basic lower limit dimensions; the correction parameters include curve offset, upper limit correction coefficient, and lower limit correction coefficient. The second determining module 502 is specifically used for: By overlaying a curve offset onto the basic change curve, the final adaptation curve for the page element is obtained. The curve offset is used to correct the smoothness of the curve. The maximum allowable size of the page element is obtained by adjusting the base upper limit size using an upper limit correction factor. The minimum allowable size of page elements is obtained by adjusting the basic lower limit size using a lower limit correction factor. Use the base scaling weight, final adaptation curve, maximum allowable size, and minimum allowable size as page adaptation parameters for page elements.

[0135] Optionally, the third determining module 503 is used for: By combining the base scaling weight, the final adaptation curve, and the page viewport size, the target scaling factor of the page elements in the set size dimension is generated; Multiply the original size of the page element in the set size dimension by the target scaling factor to obtain the scaled target size; Select the maximum value between the target size and the minimum allowable size, and then select the minimum value between the maximum allowable size and the maximum value to obtain the individual rendering sizes of the page element under the set size dimensions; Summarize the individual rendering dimensions under each set size dimension to obtain the final rendering size of the page element.

[0136] Optionally, the third determining module 503 is specifically used for: Determine the page viewport values ​​for the specified size dimensions and the preset baseline viewport values; Based on the ratio of the page viewport value to the baseline viewport value, and combined with the changing pattern of the final adaptation curve, the adaptation adjustment amount is obtained. The adaptation adjustment amount is used to indicate the correction amount of the size scaling of page elements as the final adaptation curve changes continuously during the process of changing the page viewport size. The target scaling factor of the page element in the set size dimension is obtained by multiplying the base scaling weight and the adaptation adjustment amount.

[0137] Optionally, the device is also used for: If a change in the page viewport size is detected, the page viewport size should be re-acquired. Update the final rendered size of the corresponding page elements based on the re-acquired page viewport size and page adaptation parameters.

[0138] like Figure 6 As shown, this application provides an electronic device including a processor 601, a communication interface 602, a memory 603, and a communication bus 604, wherein the processor 601, the communication interface 602, and the memory 603 communicate with each other through the communication bus 604.

[0139] Memory 603 is used to store computer programs.

[0140] In one embodiment of this application, when the processor 601 executes the program stored in the memory 603, it implements the page layout method provided in any of the foregoing method embodiments.

[0141] This application also provides a computer-readable storage medium storing a computer program thereon, which, when executed by a processor, implements the steps of the page layout method provided in any of the foregoing method embodiments.

[0142] The device embodiments described above are merely illustrative. The units described as separate components may or may not be physically separate, and the components shown as units may or may not be physical units; that is, they may be located in one place or distributed across multiple network units. Some or all of the modules can be selected to achieve the purpose of this embodiment according to actual needs.

[0143] Through the above description of the embodiments, those skilled in the art can clearly understand that each embodiment can be implemented using software plus a general-purpose hardware platform, or of course, using hardware. Based on this understanding, the above technical solutions, in essence or the parts that contribute to the related technology, can be embodied in the form of a software product. This computer software product can be stored in a computer-readable storage medium, such as ROM / RAM, magnetic disk, optical disk, etc., and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute the methods described in the various embodiments or some parts of the embodiments.

[0144] It should be understood that the terminology used herein is for the purpose of describing particular exemplary embodiments only and is not intended to be limiting. Unless the context clearly indicates otherwise, the singular forms "a," "an," and "described" as used herein may also mean including the plural forms. The terms "comprising," "including," "containing," and "having" are inclusive and therefore indicate the presence of the stated features, steps, operations, elements, and / or components, but do not exclude the presence or addition of one or more other features, steps, operations, elements, components, and / or combinations thereof. The method steps, processes, and operations described herein are not construed as requiring them to be performed in a specific order described or illustrated unless the order of performance is explicitly indicated. It should also be understood that additional or alternative steps may be used.

[0145] The above description is merely a specific embodiment of this application, enabling those skilled in the art to understand or implement this application. Various modifications to these embodiments will be readily apparent to those skilled in the art, and the general principles defined herein may be implemented in other embodiments without departing from the spirit or scope of this application. Therefore, this application is not to be limited to the embodiments shown herein, but is to be accorded the widest scope consistent with the principles and novel features claimed herein.< / button> < / h6>

Claims

1. A page layout method, characterized in that, The method includes: Determine the element type and semantic features of each page element, wherein the semantic features are used to indicate the importance of the page element in the page structure; The page adaptation parameters of the corresponding page element are determined by combining the element type and the semantic features; The final rendering size of the corresponding page element is determined based on the page adaptation parameters and the preset page viewport size.

2. The method according to claim 1, characterized in that, Determining the semantic features of each page element includes: A DOM tree is generated by parsing the page code, where each node in the DOM tree corresponds to a page element; Traverse the DOM tree and use the path length from the root node to the current node as the nesting depth of the current page elements; Based on the page viewport size and the visible area of ​​the current page element, determine the area proportion of the current page element; Detect whether the current page element has a listener event bound to it, and determine the listener attribute of the current page element; Identify the business function attributes of the current page elements within the page; The nesting depth, the area proportion, the listening attribute, and the business function attribute are used as semantic features of the page element.

3. The method according to claim 1, characterized in that, Determining the page adaptation parameters for the corresponding page element by combining the element type and the semantic features includes: Based on the element type, the corresponding basic adaptation parameters are queried in the preset mapping table, wherein the basic adaptation parameters are used to set a unified adaptation benchmark for page elements of the same type. The semantic features are input into a preset generation model to obtain correction parameters, wherein the correction parameters are used to distinguish the adaptation differences between different page elements of the same element type; By combining the basic adaptation parameters and the correction parameters, the page adaptation parameters of the page element are obtained.

4. The method according to claim 3, characterized in that, The basic adaptation parameters include basic scaling weight, basic change curve, basic upper limit size, and basic lower limit size. The correction parameters include curve offset, upper limit correction coefficient, and lower limit correction coefficient. By combining the basic adaptation parameters and the correction parameters, the page adaptation parameters of the page element are obtained as follows: The curve offset is superimposed on the basic change curve to obtain the final adaptation curve of the page element, wherein the curve offset is used to correct the smoothness of the curve. The maximum allowable size of the page element is obtained by correcting the basic upper limit size using the upper limit correction coefficient. The minimum allowable size of the page element is obtained by correcting the basic lower limit size using the lower limit correction coefficient. The basic scaling weight, the final adaptation curve, the maximum allowable size, and the minimum allowable size are used as the page adaptation parameters for the page element.

5. The method according to claim 4, characterized in that, Determining the final rendering size of the corresponding page element based on the page adaptation parameters and the preset page viewport size includes: By combining the basic scaling weight, the final adaptation curve, and the page viewport size, a target scaling factor for the page element in a set size dimension is generated. Multiply the original size of the page element in the set size dimension by the target scaling factor to obtain the scaled target size; Select the maximum value between the target size and the minimum allowable size, and select the minimum value between the maximum allowable size and the maximum value to obtain the sub-rendering size of the page element under the set size dimension; The final rendered size of the page element is obtained by summing up the individual rendering sizes under each set size dimension.

6. The method according to claim 5, characterized in that, Combining the base scaling weight, the final adaptation curve, and the page viewport size, the target scaling factor for the page element in the set size dimension is generated as follows: Determine the page viewport value that adapts to the set size dimension and the preset baseline viewport value; Based on the ratio of the page viewport value to the baseline viewport value, and combined with the variation pattern of the final adaptation curve, the adaptation adjustment amount is obtained. The adaptation adjustment amount is used to indicate the correction amount by which the size scaling of page elements changes continuously with the final adaptation curve during the change of the page viewport size. The target scaling factor of the page element in the set size dimension is obtained by multiplying the base scaling weight and the adaptation adjustment amount.

7. The method according to claim 1, characterized in that, After determining the final rendering size of the corresponding page element, the method further includes: If a change in the page viewport size is detected, the page viewport size is reacquired. Update the final rendering size of the corresponding page elements based on the re-acquired page viewport size and the page adaptation parameters.

8. A page layout device, characterized in that, The device includes: The first determining module is used to determine the element type and semantic features of each page element, wherein the semantic features are used to indicate the importance of the page element in the page structure; The second determining module is used to determine the page adaptation parameters of the corresponding page element by combining the element type and the semantic features; The third determining module is used to determine the final rendering size of the corresponding page element based on the page adaptation parameters and the preset page viewport size.

9. A display device, characterized in that, Includes the page layout device as described in claim 8.

10. An electronic device, characterized in that, It includes a processor, a communication interface, a memory, and a communication bus, wherein the processor, the communication interface, and the memory communicate with each other through the communication bus; Memory, used to store computer programs; A processor, when executing a program stored in memory, implements the method described in any one of claims 1-7.

11. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a computer program that, when executed by a processor, implements the method described in any one of claims 1-7.

Images