Webpage layout method and device, electronic equipment and storage medium

Abstract

The invention discloses a webpage layout method and device, electronic equipment and a storage medium, in response to a webpage layout adjustment instruction, display characteristic parameters of a target viewport are obtained based on a preset interface, and the display characteristic parameters comprise viewport size parameters and an equipment pixel ratio; according to the viewport size parameter, classifying the display equipment corresponding to the target viewport to the corresponding screen specification classification; when the device pixel ratio deviates from the reference value, calculating the compensation scaling of each interface element in the target viewport in the display device based on the screen specification classification and the display characteristic parameters; and performing layout optimization rendering processing on each interface element according to the compensation scaling. Compared with the prior art, the display equipment is classified into the screen specification classification through the viewport size parameters, and the rigid limitation of a traditional fixed breakpoint is broken through. By classifying the target viewports, the problem that the main content area is blank due to fixed width elements in an ultra-wide screen scene is solved, and the screen space utilization rate is increased.

Description

Technical Field

[0001] The present disclosure relates to the field of data processing technology, and in particular to a method and device for target training, an electronic device, and a storage medium. Background Art

[0002] Display devices are becoming increasingly diverse, with screen resolutions expanding from 1280×720 to 8K UHD (7680×4320). Screen ratios are also expanding from 16:9 to ultra-wide ratios like 21:9 and 32:9, with high-PPI 4K / 8K screens becoming increasingly common. This presents numerous challenges for web page display: On high-pixel-density (PPI) displays, the physical size of web page elements is too small. For example, on a 218PPI display, 12 logical pixels correspond to a physical size of only 0.08 mm, below the human eye's readability threshold. This forces users to manually zoom their browsers, which is inconvenient and impacts efficiency. Traditional responsive layout techniques are insufficient. On ultra-wide screens, fixed-width sidebars or navigation bars can leave large areas of blank space in the main content area, wasting screen space and reducing information display efficiency. Uniform scaling solutions often present problems in complex layouts, leading to content breakage in the middle column of a three-column layout, overflowing sidebar icons, and elements appearing too large or too small, creating visual jitters and severely impacting user experience and web usability. Summary of the Invention

[0003] The present disclosure provides a webpage layout method and device, electronic device, and storage medium, which are mainly intended to solve the problems of element size mismatch and layout misalignment in webpage layout in related technologies.

[0004] According to a first aspect of the present disclosure, a method for web page layout is provided, comprising:

[0005] In response to the webpage layout adjustment instruction, obtaining display characteristic parameters of the target viewport based on a preset interface, wherein the display characteristic parameters include: viewport size parameters and device pixel ratio;

[0006] According to the viewport size parameters, the display device corresponding to the target viewport is classified into the corresponding screen specification category;

[0007] When the device pixel ratio deviates from the reference value, the compensation scaling ratio of each interface element in the target viewport on the display device is calculated based on the screen specification classification and display characteristic parameters;

[0008] Perform layout optimization and rendering processing on each interface element according to the compensation scaling ratio.

[0009] Optionally, based on the viewport size parameter, the display device corresponding to the target viewport is classified into a corresponding screen specification category, including:

[0010] Compare the viewport size parameters with the classification benchmark data corresponding to different screen specification categories for similarity;

[0011] Based on the similarity comparison results and viewport size parameters, the display devices are classified into the screen specification categories to which they belong.

[0012] Optionally, the viewport size parameters are compared with classification benchmark data corresponding to different screen specification categories for similarity, including:

[0013] Obtain the reference aspect ratios of different classification benchmark data, and obtain the target aspect ratio of the target viewport in the viewport size parameter;

[0014] Different benchmark aspect ratios are used as cluster centers, and the Euclidean distance between the target aspect ratio and each cluster center is calculated.

[0015] Optionally, based on the similarity comparison results and viewport size parameters, display devices are classified into their corresponding screen specification categories, including:

[0016] Based on the Euclidean distance, determine the target screen specification category with the smallest distance from the target aspect ratio;

[0017] Get the reference width corresponding to the target screen specification category, compare the target viewport width in the viewport size parameter with the reference width, and determine the screen specification category to which the display device belongs.

[0018] Optionally, based on the screen specification classification and display characteristic parameters, the compensation scaling ratio of each interface element in the target viewport on the display device is calculated, including:

[0019] Assign type weight coefficients to each interface element in the target viewport;

[0020] The scaling model is used to perform collaborative calculations on type weight coefficients, screen specification classifications, and display feature parameters to generate a compensation scaling ratio.

[0021] Optionally, a scaling model is used to perform collaborative calculations on the type weight coefficient, screen specification classification, and display feature parameters to generate a compensation scaling ratio, including:

[0022] Get the benchmark pixel density and benchmark width corresponding to the screen specification category, and get the target viewport width and target pixel density of the display device. The target pixel density is calculated based on the device pixel ratio.

[0023] Using the first objective function in the scaling model, a compensation operation is performed on the reference pixel density and the target pixel density to obtain a pixel density compensation value;

[0024] By using the first objective function in the scaling model, the base width and the target viewport width are adapted to obtain the viewport configuration value;

[0025] The compensation scaling ratio is calculated based on the type weight coefficient, pixel density compensation value, viewport configuration value, and scaling factor corresponding to the target viewport.

[0026] Optionally, layout optimization rendering processing is performed on each interface element according to the compensation scaling ratio, including:

[0027] Call hardware acceleration resources to allocate independent computing resources for page rendering operations, and mark the page rendering operations as independent rendering layers;

[0028] Layout calculation and page rendering operations are performed according to the compensated scaling ratio, and the layout calculation and page rendering operations are run through multiple threads.

[0029] According to a second aspect of the present disclosure, there is provided a device for web page layout, comprising:

[0030] an acquiring unit, configured to acquire, in response to a webpage layout adjustment instruction, display characteristic parameters of a target viewport based on a preset interface, wherein the display characteristic parameters include: a viewport size parameter and a device pixel ratio;

[0031] A classification unit, configured to classify a display device corresponding to a target viewport into a corresponding screen specification category according to a viewport size parameter;

[0032] A calculation unit, configured to calculate a compensatory scaling ratio of each interface element in a target viewport in a display device based on screen specification classification and display characteristic parameters when a device pixel ratio deviates from a reference value;

[0033] The processing unit is used to perform layout optimization rendering processing on each interface element according to the compensation scaling ratio.

[0034] Optionally, the classification units include:

[0035] A comparison module is used to compare the viewport size parameters with the classification benchmark data corresponding to different screen specification categories for similarity;

[0036] The classification module is used to classify display devices into their corresponding screen specification categories based on similarity comparison results and viewport size parameters.

[0037] Optionally, the comparison module is also used to:

[0038] Obtain the reference aspect ratios of different classification benchmark data, and obtain the target aspect ratio of the target viewport in the viewport size parameter;

[0039] Different benchmark aspect ratios are used as cluster centers, and the Euclidean distance between the target aspect ratio and each cluster center is calculated.

[0040] Optionally, the partitioning module is further used to:

[0041] Based on the Euclidean distance, determine the target screen specification category with the smallest distance from the target aspect ratio;

[0042] Get the reference width corresponding to the target screen specification category, compare the target viewport width in the viewport size parameter with the reference width, and determine the screen specification category to which the display device belongs.

[0043] Optionally, the computing unit includes:

[0044] The assignment module is used to assign a type weight coefficient to each interface element in the target viewport;

[0045] The calculation module is used to use the scaling model to perform collaborative calculations on the type weight coefficient, screen specification classification and display feature parameters to generate a compensation scaling ratio.

[0046] Optionally, the computing module is further configured to:

[0047] Get the benchmark pixel density and benchmark width corresponding to the screen specification category, and get the target viewport width and target pixel density of the display device. The target pixel density is calculated based on the device pixel ratio.

[0048] Using the first objective function in the scaling model, a compensation operation is performed on the reference pixel density and the target pixel density to obtain a pixel density compensation value;

[0049] By using the first objective function in the scaling model, the base width and the target viewport width are adapted to obtain the viewport configuration value;

[0050] The compensation scaling ratio is calculated based on the type weight coefficient, pixel density compensation value, viewport configuration value, and scaling factor corresponding to the target viewport.

[0051] Optionally, the processing unit includes:

[0052] The acceleration module is used to call hardware acceleration resources to allocate independent computing resources for page rendering operations and mark page rendering operations as independent rendering layers;

[0053] The calculation module is used to perform layout calculation and page rendering operations according to the compensation scaling ratio, and the layout calculation and page rendering operations are run through multiple threads.

[0054] According to a third aspect of the present disclosure, there is provided an electronic device, including:

[0055] at least one processor; and

[0056] a memory communicatively connected to the at least one processor; wherein,

[0057] The memory stores instructions that can be executed by the at least one processor. The instructions are executed by the at least one processor to enable the at least one processor to perform the webpage layout method described in the first aspect.

[0058] According to a fourth aspect of the present disclosure, a non-transitory computer-readable storage medium storing computer instructions is provided, wherein the computer instructions are used to enable the computer to execute the webpage layout method described in the first aspect.

[0059] According to a fifth aspect of the present disclosure, a computer program product is provided, comprising a computer program, wherein when the computer program is executed by a processor, the computer program implements the web page layout method as described in the first aspect.

[0060] The present disclosure provides a method and apparatus for web page layout, an electronic device and a storage medium, and relates to the field of web page technology. Compared with related technologies, the embodiments of the present disclosure classify display devices into screen specification classifications through viewport size parameters, breaking through the rigid limitations of traditional fixed breakpoints. By classifying the target viewport, the problem of blank main content area caused by fixed-width elements in ultra-wide screen scenarios is solved, and the screen space utilization rate is improved. When the device pixel ratio deviates from the reference value, the compensation scaling ratio is calculated to avoid the problem of too small elements caused by the difference between logical pixels and physical pixels on high PPI screens, thereby reducing the user's manual scaling operations. The compensation scaling ratio is calculated based on the screen specification classification and display feature parameters, and the scaling priority is dynamically adjusted in combination with the screen type to avoid the misalignment problems such as content breakage and icon overflow in the three-column layout caused by unified scaling, thereby ensuring the consistency of physical size and visual coherence of elements in complex layouts.

[0061] It should be understood that the content described in this section is not intended to identify the key or important features of the embodiments of the present application, nor is it intended to limit the scope of the present application. Other features of the present application will become easily understood through the following description. BRIEF DESCRIPTION OF THE DRAWINGS

[0062] The accompanying drawings are provided to facilitate a better understanding of the present invention and do not constitute a limitation of the present disclosure.

[0063] Figure 1 A flowchart of a web page layout method provided by an embodiment of the present disclosure;

[0064] Figure 2 A flowchart of another web page layout method provided by an embodiment of the present disclosure;

[0065] Figure 3 A schematic structural diagram of a web page layout device provided by an embodiment of the present disclosure;

[0066] Figure 4 A schematic structural diagram of another webpage layout device provided by an embodiment of the present disclosure. DETAILED DESCRIPTION

[0067] The following description of exemplary embodiments of the present disclosure is made in conjunction with the accompanying drawings, including various details of the embodiments of the present disclosure to facilitate understanding. These details should be considered as merely exemplary. Therefore, those skilled in the art will recognize that various changes and modifications may be made to the embodiments described herein without departing from the scope and spirit of the present disclosure. Similarly, for the sake of clarity and conciseness, descriptions of well-known functions and structures are omitted in the following description.

[0068] The following describes the webpage layout method and apparatus, electronic device, and storage medium according to embodiments of the present disclosure with reference to the accompanying drawings.

[0069] Figure 1 A flowchart of a web page layout method provided by an embodiment of the present disclosure is provided.

[0070] like Figure 1 As shown, the method comprises the following steps:

[0071] Step 101 : In response to a webpage layout adjustment instruction, obtain display characteristic parameters of a target viewport based on a preset interface, wherein the display characteristic parameters include: viewport size parameters and device pixel ratio.

[0072] In an embodiment of the present disclosure, during the web page display process, when the system receives a web page layout adjustment instruction, a series of operation processes for optimizing the web page display effect are triggered. The generation of this instruction may be due to a screen change of the user's device (such as screen rotation, window resizing), or it may be based on various situations such as the system detecting a switch in device type. The system obtains the display characteristic parameters of the target viewport based on a preset interface. These preset interfaces are pre-set channels that can interact with the device bottom layer or browser environment. They have the ability to obtain relevant information stably and efficiently. The viewport is the visible area on the user's device screen for displaying web page content, and its display characteristic parameters are crucial for adjusting the web page layout. The viewport size parameters cover the width and height information of the viewport. This size information accurately reflects the current size of the space available for displaying web page content and is one of the basic bases for subsequent web page layout adjustments. It can help the system determine the size specifications of the current viewport and provide important data support for subsequently determining the appropriate layout strategy.

[0073] Step 102 : Classify the display device corresponding to the target viewport into a corresponding screen specification category according to the viewport size parameter.

[0074] In an embodiment of the present disclosure, after obtaining the viewport size parameters of the target viewport, the system will perform a key operation, namely classifying the display device corresponding to the target viewport according to these parameters and dividing it into the corresponding screen specification classification. The viewport size parameters serve as a basis for judgment and contain key information about the display area of the device, including the width and height values of the viewport. The system analyzes and processes these values through a pre-set classification logic. This classification logic is formed based on the research and summary of a variety of common screen specifications, covering the characteristics of different resolutions and screen ratios. During the analysis process, the system will compare the obtained viewport size parameters with various preset screen specification standards. These standards may involve considerations of multiple dimensions such as different width ranges, height ranges, and aspect ratio characteristics. Through precise calculation and judgment, the system can determine which type of screen specification classification the current target viewport best meets.

[0075] Step 103 : When the device pixel ratio deviates from the reference value, the compensation scaling ratio of each interface element in the target viewport in the display device is calculated based on the screen specification classification and display characteristic parameters.

[0076] In the embodiment of the present disclosure, after the system completes the classification of the screen specifications of the display device, it will immediately enter a critical calculation process. During this process, it is necessary to monitor and judge the device pixel ratio. The device pixel ratio reflects the relationship between the device's physical pixels and logical pixels. Different device pixel ratios will affect the actual display effect of web page elements on the screen. The reference value is a pre-set standard value used to measure whether the current device pixel ratio is in an ideal state.

[0077] Once the system detects that the device pixel ratio deviates from the reference value, it will start the corresponding calculation process. At this time, the system will make full use of the acquired screen specification classification information and display feature parameters (such as viewport size parameters, device pixel ratio itself, etc.) to perform comprehensive calculations. The system will process these parameters according to specific calculation rules. These rules are formulated based on the research and analysis of the optimal display effects of web page elements under different screen specifications. In the calculation process, the relationship between various factors such as screen resolution, pixel density, aspect ratio and device pixel ratio will be taken into account. Through comprehensive consideration and calculation of these factors, the system can accurately calculate the compensation scaling ratio of each interface element in the target viewport in the current display device.

[0078] Step 104 : performing layout optimization rendering processing on each interface element according to the compensation scaling ratio.

[0079] In the embodiments of the present disclosure, after calculating the compensation scaling ratio, the system enters the critical stage of optimizing the webpage layout and rendering. Based on the calculated compensation scaling ratio, the system performs corresponding processing operations on each interface element in the target viewport. These interface elements include, but are not limited to, text boxes, images, buttons, navigation bars, and other basic components that constitute a webpage. The system applies the compensation scaling ratio to these elements and adjusts their layout properties through a specific processing mechanism. For example, the system recalculates the element's position coordinates, size, and hierarchical relationships to ensure that each element occupies a reasonable amount of space in the new layout and collaborates with other elements to construct a complete and orderly webpage structure. While adjusting the layout properties, the system also initiates the rendering process. The rendering process involves converting these adjusted interface elements into visual content that the user can view on the display device. During this process, the system utilizes a series of graphics rendering-related technologies and resources to ensure rendering accuracy and efficiency. For example, the underlying graphics processing interface is used to draw and synthesize information such as the element's shape, color, and texture to generate the final image presented on the screen.

[0080] The present disclosure provides a method for web page layout. Compared with related technologies, the embodiment of the present disclosure classifies display devices into screen specification categories through viewport size parameters, breaking through the rigid limitations of traditional fixed breakpoints. By classifying the target viewport, the problem of blank main content area caused by fixed-width elements in ultra-wide screen scenarios is solved, and the screen space utilization rate is improved. When the device pixel ratio deviates from the reference value, the compensation scaling ratio is calculated to avoid the problem of too small elements caused by the difference between logical pixels and physical pixels on high PPI screens, thereby reducing the user's manual scaling operations. The compensation scaling ratio is calculated based on the screen specification classification and display feature parameters, and the scaling priority is dynamically adjusted in combination with the screen type to avoid the misalignment problems such as content breakage and icon overflow in the three-column layout caused by unified scaling, thereby ensuring the consistency of physical size and visual coherence of elements in complex layouts.

[0081] In order to clearly illustrate the embodiment of the present disclosure, this embodiment provides a flowchart of another webpage layout method.

[0082] like Figure 2 As shown, the method comprises the following steps:

[0083] Step 201 : In response to a webpage layout adjustment instruction, obtain display characteristic parameters of a target viewport based on a preset interface, wherein the display characteristic parameters include: viewport size parameters and device pixel ratio.

[0084] Specifically, in step 201, during the operation of the web page, when the system detects a web page layout adjustment instruction, it triggers a series of operation processes aimed at optimizing the web page display effect and improving the user experience. The generation of this instruction may be due to a variety of situations, such as the user zooming in and out of the browser window, rotating the device screen, or the user switching to a device with a different screen specification. After receiving the instruction, the system will obtain the display characteristic parameters of the target viewport through the preset interface. The advantage of using the browser native interface to obtain relevant information is that accurate device data can be obtained directly and efficiently. The viewport is the area on the user device screen used to present web page content, and its display characteristic parameters play a vital role in the subsequent web page layout adjustment.

[0085] The viewport size parameters include the width and height of the viewport. Obtaining these parameters precisely defines the amount of space available for displaying web content. In real-world scenarios, viewport sizes vary significantly across devices, from the common dimensions of traditional computer monitors to the varying screen sizes of various mobile devices. Accurately obtaining these parameters is like building a precise framework for web page layout, providing a foundation for subsequent layout adjustments.

[0086] Device pixel ratio is also a key display feature parameter. It reflects the correspondence between the physical pixels and logical pixels of the device. The device pixel ratio is used to calculate the physical pixel density (such as the approximate calculation of PPI through the formula pixel density = device pixel ratio * 96). Devices with different pixel densities have different device pixel ratios. The device pixel ratio of high-pixel density devices (such as 4K and 8K screens) is relatively high, which means that there are more physical pixels under the same logical pixels. Obtaining the device pixel ratio allows the system to know the pixel density of the current device, thereby providing key information for the subsequent processing of the display effects of web page elements on different devices.

[0087] Step 202 : performing a similarity comparison between the viewport size parameters and classification benchmark data corresponding to different screen specification classifications.

[0088] Furthermore, as a refinement of this embodiment, the viewport size parameters are compared with the classification benchmark data corresponding to different screen specification categories for similarity, including: obtaining the benchmark aspect ratios in the different classification benchmark data, and obtaining the target aspect ratio of the target viewport in the viewport size parameters; using the different benchmark aspect ratios as cluster centers, and calculating the Euclidean distance between the target aspect ratio and each cluster center.

[0089] Specifically, in step 202, the system first obtains the benchmark aspect ratios from the benchmark data for different categories. These benchmark aspect ratios are pre-set based on research and summary of a large number of common screen specifications. They represent the typical aspect ratio characteristics of different screen specification categories, such as the common 4:3, 16:9, 21:9, and 32:9 aspect ratios. These ratios correspond to different screen specification categories such as standard screen, widescreen, and ultra-widescreen. At the same time, the system also extracts the target aspect ratio of the target viewport from the viewport size parameters. This target aspect ratio is the ratio of the actual width to height of the current target viewport, which reflects the shape characteristics of the target viewport.

[0090] Next, the system uses different baseline aspect ratios as cluster centers and uses Euclidean distance to measure the similarity between the target aspect ratio and each cluster center. Euclidean distance is commonly used in mathematics to measure the differences between data points. In this technical solution, it is cleverly applied to determine the proximity of the target viewport to different screen size categories. The smaller the Euclidean distance value, the more similar the target viewport's aspect ratio is to the screen size category represented by the baseline aspect ratio.

[0091] Step 203 : Classify the display device into the screen specification category to which it belongs based on the similarity comparison result and the viewport size parameter.

[0092] Furthermore, as a refinement of this embodiment, the display device is divided into the screen specification category to which it belongs based on the similarity comparison result and the viewport size parameter, including: determining the target screen specification category with the smallest distance from the target aspect ratio based on the Euclidean distance; obtaining the reference width corresponding to the target screen specification category, comparing the target viewport width in the viewport size parameter with the reference width, and determining that the display device is divided into the screen specification category to which it belongs.

[0093] Specifically, in step 203, the system determines the target screen specification category with the smallest distance from the target aspect ratio based on the calculated Euclidean distance between the target aspect ratio and each reference aspect ratio. This is because the Euclidean distance quantifies the degree of difference between the target viewport aspect ratio and each reference aspect ratio. The smaller the distance, the more similar the target viewport aspect ratio characteristics are to the screen specification category represented by the reference aspect ratio. This method can quickly select the screen specification category that best matches the target viewport aspect ratio.

[0094] After determining the target screen size category, the system will obtain the corresponding benchmark width. This benchmark width is one of the key characteristic parameters of the screen size category, representing the typical width value of this type of screen. For example, the benchmark width for a standard screen might be set to 1920px, the benchmark width for a widescreen to 2560px, the benchmark width for an ultrawide screen to 3840px, and so on. The system then compares the target viewport width in the viewport size parameter with this benchmark width.

[0095] Through this comparison, the system can further accurately determine the specific screen specification category that the display device should be classified into. If the target viewport width is less than or equal to the base width of a screen specification category, combined with the previously determined target screen specification category information, the display device can be determined to belong to that screen specification category. If the target viewport width is greater than the base width of a screen specification category, a more detailed judgment logic (such as a comprehensive judgment based on aspect ratio) is required to determine the final classification.

[0096] Step 204: assign a type weight coefficient to each interface element in the target viewport.

[0097] Specifically, in step 204, the system identifies and classifies all interface elements within the target viewport. These interface elements include, but are not limited to, text, images, tables, cards, and various interactive components such as navigation bars and buttons. Different types of interface elements play different roles in the overall layout and functional implementation of a webpage, and their impact on display quality and user experience also varies. The system assigns corresponding type weight coefficients to different types of interface elements based on the screen specification classification results. This process is not arbitrary, but is based on research and analysis of user browsing habits and optimal web page display effects under a wide range of screen specifications. For example, on a standard screen (such as the common 16:9 ratio), the weight of text elements may be set to 0.9, image elements to 0.7, table elements to 1.1, and sidebar menu elements to 1.0. On an ultra-wide screen (such as a 21:9 or 32:9 ratio), to better utilize screen space, the weight of sidebar menu elements may be increased to 1.3, and the weight of image elements adjusted to 1.0, etc.

[0098] This way of assigning type weight coefficients is an important part of the hybrid scaling model. It can perform differentiated treatment on different types of interface elements in subsequent layout calculations. The type weight coefficient represents the priority and importance of element scaling. When optimizing the layout, the system will combine other parameters (such as device pixel ratio, viewport width, etc.) and non-linear scaling formulas to dynamically adjust the scaling ratio of each element according to these weight coefficients. For example, on a high-pixel-density screen, for elements with higher weights, the scaling ratio will be appropriately adjusted while ensuring their clarity and readability to ensure that their display on the screen is more prominent; for elements with lower weights, their scaling degree will be reasonably controlled while ensuring the overall layout coordination to avoid deformation of elements or affecting the overall aesthetics due to excessive scaling.

[0099] Step 205 : Using the scaling model, collaboratively calculating the type weight coefficient, the screen specification classification, and the display characteristic parameters, to generate a compensation scaling ratio.

[0100] Furthermore, as a refinement of this embodiment, a scaling model is used to collaboratively calculate the type weight coefficient, screen specification classification and display feature parameters to generate a compensation scaling ratio, including: obtaining a baseline pixel density and a baseline width corresponding to the screen specification classification, and obtaining the target viewport width of the target viewport and the target pixel density of the display device, wherein the target pixel density is calculated based on the device pixel ratio; using the first objective function in the scaling model, a compensation operation is performed on the baseline pixel density and the target pixel density to obtain a pixel density compensation value; using the first objective function in the scaling model, an adaptation operation is performed on the baseline width and the target viewport width to obtain a viewport configuration value; and based on the type weight coefficient, the pixel density compensation value, the viewport configuration value and the scaling factor corresponding to the target viewport, a compensation scaling ratio is calculated and generated.

[0101] Specifically in step 205, the system will use a specific scaling model to perform collaborative calculations on the type weight coefficient, screen specification classification, and display feature parameters to derive a compensating scaling ratio for each interface element. The system will first obtain the corresponding benchmark pixel density and benchmark width from the determined screen specification classification information. These benchmark values are pre-set and represent the pixel density and width standards of the screen specification classification under ideal conditions, and are an important reference for subsequent calculations. At the same time, the system will also obtain the target viewport width of the target viewport, and the target pixel density of the display device calculated based on the device pixel ratio. In actual operation, the target pixel density is approximately calculated by multiplying the device pixel ratio by 96. This calculation method can more accurately reflect the actual pixel density of the current device.

[0102] After obtaining these key parameters, the system will use the first objective function in the scaling model to perform two important operations. The first operation is to compensate for the baseline pixel density and the target pixel density. The first objective function will use a specific algorithm to calculate the difference between the two to obtain a pixel density compensation value. This compensation value is used to adjust the display differences of web page elements caused by different device pixel densities, ensuring that the physical size and display effects of web page elements on devices with different pixel densities can remain consistent or reach the optimal state. For example, on devices with high pixel density, the pixel density compensation value will adjust the scaling ratio of the element accordingly to prevent the element from being displayed too small due to excessively high pixel density, affecting user viewing.

[0103] The second operation uses the second objective function to adapt the baseline width to the target viewport width, resulting in a viewport configuration value. This calculation takes into account the differences in viewport width across different screen sizes to ensure that the webpage layout can adapt to various viewport sizes. The calculation of the viewport configuration value helps the system appropriately adjust the layout and scaling of webpage elements based on the actual viewport width, avoiding issues such as incomplete element display or distorted layout.

[0104] Finally, the system calculates the compensation scaling ratio using specific calculation logic based on the type weight coefficient, pixel density compensation value, viewport configuration value, and the scaling factor corresponding to the target viewport. The type weight coefficient determines the priority and importance of different types of interface elements during the scaling process; the pixel density compensation value and viewport configuration value adjust the scaling ratio based on pixel density and viewport width respectively; and the scaling factor is a pre-set adjustment parameter based on different screen specifications to further optimize the scaling effect. Taking these parameters into consideration and performing calculations can generate a precise compensation scaling ratio for each interface element.

[0105] In some embodiments of the present disclosure, the calculation formula for the compensation scaling ratio is: A = B*e^(k*(C / D))*ln(E / F+1)*G. Where A is the compensation scaling ratio, B is the type weight coefficient, k is the compensation coefficient, C is the target pixel density, D is the reference pixel density, E is the target viewport width, F is the reference width, and G is the scaling factor. The first objective function is e^(k*(C / D)), and the second objective function is ln(E / F+1).

[0106] Step 206: Call hardware acceleration resources to allocate independent computing resources for the page rendering operation, and mark the page rendering operation as an independent rendering layer.

[0107] Specifically, in step 206, the system invokes the hardware acceleration resources of the graphics processing unit (GPU). This ability to leverage the GPU's powerful computing capabilities is due to its hardware architecture, which is specifically optimized for graphics processing. The system requests resource allocation from the GPU through specific instructions or interfaces, handing over some or all of the page rendering tasks to the GPU.

[0108] While invoking hardware acceleration resources, the system allocates independent computing resources for page rendering operations. During this process, the system will rationally plan the allocation of GPU resources based on factors such as the complexity of the page, the number of elements, and the amount of data to be processed. For example, for pages containing a large number of graphic elements and complex animations, more computing resources will be allocated to ensure the efficiency of the rendering process. The allocation of independent computing resources can avoid resource competition between different page rendering tasks and improve overall rendering efficiency. After completing resource allocation, the system marks the page rendering operation as an independent rendering layer. Layers are a key concept in the browser's rendering mechanism. By marking the page rendering operation as an independent rendering layer, the system can isolate the rendering of this page from the rendering of other page elements. This operation utilizes the browser's "will-change: transform" declaration principle. When the browser parses this declaration, it will pre-allocate a separate layer for the element (in this case, the entire page rendering operation).

[0109] This method of marking page rendering operations as independent rendering layers, combined with GPU hardware acceleration, can effectively reduce browser reflow calculations. In the traditional rendering process, when the layout or size of web page elements changes, the browser needs to recalculate the geometric properties of the elements and rebuild the rendering tree. This process, called reflow, consumes a lot of computing resources and time. By marking page rendering operations as independent rendering layers, when page elements are transformed based on the compensation scaling ratio, the operation will only be performed on this independent layer, without affecting the layout of other elements, thus avoiding large-scale reflow calculations.

[0110] Step 207 : Perform layout calculation and page rendering operations according to the compensated scaling ratio. The layout calculation and page rendering operations are executed through multiple threads.

[0111] Specifically in step 207, the system performs layout calculations for each interface element in the target viewport based on the generated compensation scaling ratio. The layout calculation involves redetermining the position coordinates, size, hierarchical relationship and other attributes of the element. During this process, the system will refer to the type weight coefficient to perform differentiated processing on different elements, such as giving priority to adjusting the layout parameters of high-weight elements (such as core text and navigation bar). At the same time, combined with the screen specification classification and display feature parameters, the scaling ratio of the element is finally adapted to ensure that its display effect on the target device is consistent with the design expectations. The page rendering operation is the process of converting the elements after layout calculation into a visual image. The system uses GPU hardware acceleration resources (such as the independent rendering layer mechanism described in step 206) to draw and synthesize the shape, color, texture and other attributes of the element. During the rendering process, the compensation scaling ratio directly affects the visual presentation of the element, realizing the adaptive display of the web page on different devices.

[0112] To avoid page freezes caused by blocking the main thread, the system uses Web Workers technology to implement multi-threaded operation of layout calculations and page rendering operations. Web Workers allows scripts to be executed in background threads and perform calculations independently of the main thread. In this technical solution, layout calculations and DOM operations (such as element attribute modifications, node addition / deletion) are assigned to independent Web Workers threads. For example, time-consuming tasks such as complex table layout calculations and image resizing are executed in background threads, while the main thread is only responsible for handling user interaction events (such as clicks, scrolling) and the final rendering scheduling of the page. This separation mechanism effectively reduces the load on the main thread and ensures that the page remains responsive during layout calculations and rendering.

[0113] It should be noted that the embodiments of the present disclosure may include multiple steps. For the convenience of description, these steps are numbered, but these numbers do not limit the execution time slots or execution order between the steps; these steps can be implemented in any order, and the embodiments of the present disclosure do not limit this.

[0114] Corresponding to the above-mentioned webpage layout method, the present disclosure also provides a webpage layout device. Since the device embodiment of the present disclosure corresponds to the above-mentioned method embodiment, details not disclosed in the device embodiment can be referred to the above-mentioned method embodiment and will not be repeated in this disclosure.

[0115] Figure 3 A schematic diagram of a web page layout device provided by an embodiment of the present disclosure is shown in FIG. Figure 3 As shown, including:

[0116] The acquiring unit 31 is configured to acquire display characteristic parameters of a target viewport based on a preset interface in response to a webpage layout adjustment instruction, wherein the display characteristic parameters include: viewport size parameters and device pixel ratio;

[0117] A classification unit 32 is configured to classify a display device corresponding to a target viewport into a corresponding screen specification category according to the viewport size parameter;

[0118] A calculation unit 33 is configured to calculate a compensation scaling ratio of each interface element in the target viewport in the display device based on the screen specification classification and display characteristic parameters when the device pixel ratio deviates from the reference value;

[0119] The processing unit 34 is used to perform layout optimization rendering processing on each interface element according to the compensation scaling ratio.

[0120] The present disclosure provides a device for web page layout. Compared with related technologies, the embodiments of the present disclosure classify display devices into screen specification categories through viewport size parameters, breaking through the rigid limitations of traditional fixed breakpoints. By classifying the target viewports, the problem of blank main content area caused by fixed-width elements in ultra-wide screen scenarios is solved, and the screen space utilization rate is improved. When the device pixel ratio deviates from the reference value, the compensation scaling ratio is calculated to avoid the problem of too small elements caused by the difference between logical pixels and physical pixels on high PPI screens, thereby reducing the user's manual scaling operations. The compensation scaling ratio is calculated based on the screen specification classification and display feature parameters, and the scaling priority is dynamically adjusted in combination with the screen type to avoid the misalignment problems such as content breakage and icon overflow in the three-column layout caused by unified scaling, thereby ensuring the consistency of physical size and visual coherence of elements in complex layouts.

[0121] Furthermore, in a possible implementation of this embodiment, as Figure 4 As shown, the classification unit 32 includes:

[0122] A comparison module 321 is used to compare the viewport size parameters with classification benchmark data corresponding to different screen specification categories for similarity;

[0123] The classification module 322 is used to classify the display devices into the screen specification categories to which they belong based on the similarity comparison results and the viewport size parameters.

[0124] Furthermore, in a possible implementation of this embodiment, the comparison module 321 is further configured to:

[0125] Obtain the reference aspect ratios of different classification benchmark data, and obtain the target aspect ratio of the target viewport in the viewport size parameter;

[0126] Different benchmark aspect ratios are used as cluster centers, and the Euclidean distance between the target aspect ratio and each cluster center is calculated.

[0127] Furthermore, in a possible implementation of this embodiment, the dividing module 322 is further configured to:

[0128] Based on the Euclidean distance, determine the target screen specification category with the smallest distance from the target aspect ratio;

[0129] Get the reference width corresponding to the target screen specification category, compare the target viewport width in the viewport size parameter with the reference width, and determine the screen specification category to which the display device belongs.

[0130] Furthermore, in a possible implementation of this embodiment, as Figure 4 As shown, the calculation unit 33 includes:

[0131] The assignment module 331 is used to assign a type weight coefficient to each interface element in the target viewport;

[0132] The calculation module 332 is used to use the scaling model to perform collaborative calculations on the type weight coefficient, screen specification classification, and display characteristic parameters to generate a compensation scaling ratio.

[0133] Furthermore, in a possible implementation of this embodiment, the operation module 332 is further configured to:

[0134] Get the benchmark pixel density and benchmark width corresponding to the screen specification category, and get the target viewport width and target pixel density of the display device. The target pixel density is calculated based on the device pixel ratio.

[0135] Using the first objective function in the scaling model, a compensation operation is performed on the reference pixel density and the target pixel density to obtain a pixel density compensation value;

[0136] By using the first objective function in the scaling model, the base width and the target viewport width are adapted to obtain the viewport configuration value;

[0137] The compensation scaling ratio is calculated based on the type weight coefficient, pixel density compensation value, viewport configuration value, and scaling factor corresponding to the target viewport.

[0138] Furthermore, in a possible implementation of this embodiment, as Figure 4 As shown, the processing unit 34 includes:

[0139] The acceleration module 341 is used to call hardware acceleration resources to allocate independent computing resources for page rendering operations and mark the page rendering operations as independent rendering layers;

[0140] The calculation module 342 is used to perform layout calculation and page rendering operations according to the compensation scaling ratio, and the layout calculation and page rendering operations are executed through multiple threads.

[0141] It should be noted that the above explanation of the method embodiment is also applicable to the device of this embodiment, and the principles are the same, which is not limited in this embodiment.

[0142] For the description of the features in the embodiment corresponding to the webpage layout apparatus, reference can be made to the relevant description of the embodiment corresponding to the webpage layout method, which will not be repeated here.

[0143] An embodiment of the present application further provides an electronic device, including a memory and a processor, wherein the memory stores a computer program, and the processor is configured to run the computer program to execute the steps of any of the above-mentioned webpage layout method embodiments.

[0144] An embodiment of the present application further provides a computer-readable storage medium, in which a computer program is stored. The computer program is configured to execute the steps of any of the above-mentioned webpage layout method embodiments when running.

[0145] In an exemplary embodiment, the computer-readable storage medium may include, but is not limited to, various media that can store computer programs, such as a USB flash drive, a read-only memory (ROM), a random access memory (RAM), a mobile hard disk, a magnetic disk, or an optical disk.

[0146] An embodiment of the present application further provides a computer program product, which includes a computer program. When the computer program is executed by a processor, the steps of any of the above-mentioned web page layout method embodiments are implemented.

[0147] An embodiment of the present application further provides another computer program product, including a non-volatile computer-readable storage medium, wherein the non-volatile computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the steps of any of the above-mentioned web page layout method embodiments are implemented.

[0148] Professionals may further appreciate that the units and algorithm steps of each example described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, computer software, or a combination of the two. In order to clearly illustrate the interchangeability of hardware and software, the above description has generally described the components and steps of each example according to their functions. Whether these functions are performed in hardware or software depends on the specific application and design constraints of the technical solution. Professionals and technicians may use different methods to implement the described functions for each specific application, but such implementation should not be considered beyond the scope of this application.

[0149] The above describes in detail the webpage layout method and device, electronic device, and storage medium provided by the present application. Specific examples are used herein to illustrate the principles and implementation methods of the present application. The description of the above embodiments is only intended to help understand the method and core concept of the present application. It should be noted that, for those skilled in the art, without departing from the principles of the present application, several improvements and modifications can be made to the present application, and these improvements and modifications also fall within the scope of protection of the claims of the present application.

Claims

1. A web page layout method, characterized in that: include: In response to the webpage layout adjustment instruction, obtaining display characteristic parameters of the target viewport based on a preset interface, wherein the display characteristic parameters include: viewport size parameters and device pixel ratio; Classifying the display device corresponding to the target viewport into a corresponding screen specification category according to the viewport size parameter; When the device pixel ratio deviates from a reference value, calculating a compensation scaling ratio of each interface element in the target viewport in the display device based on the screen specification classification and the display characteristic parameters; Perform layout optimization rendering processing on each of the interface elements according to the compensation scaling ratio.

2. The webpage layout method according to claim 1, characterized in that: The classifying, according to the viewport size parameter, the display device corresponding to the target viewport into a corresponding screen specification category includes: Comparing the viewport size parameters with classification benchmark data corresponding to different screen specification categories for similarity; According to the similarity comparison result and the viewport size parameter, the display device is classified into the screen specification category to which it belongs.

3. The webpage layout method according to claim 2, characterized in that: The comparing the viewport size parameters with classification benchmark data corresponding to different screen specification categories for similarity includes: Obtaining reference aspect ratios in different classification reference data, and obtaining a target aspect ratio of the target viewport in the viewport size parameter; The different reference aspect ratios are used as cluster centers, and the Euclidean distance between the target aspect ratio and each cluster center is calculated.

4. The webpage layout method according to claim 3, characterized in that: Classifying the display device into its corresponding screen specification category based on the similarity comparison result and the viewport size parameter includes: Determining, based on the Euclidean distance, a target screen specification category with the smallest distance from the target aspect ratio; A reference width corresponding to the target screen specification category is obtained, and the target viewport width in the viewport size parameter is compared with the reference width to determine the screen specification category to which the display device is classified.

5. The webpage layout method according to claim 1, wherein: The calculating, based on the screen specification classification and the display characteristic parameters, the compensation scaling ratio of each interface element in the target viewport in the display device includes: Assigning a type weight coefficient to each interface element in the target viewport; The type weight coefficient, the screen specification classification and the display characteristic parameter are collaboratively calculated using a scaling model to generate the compensation scaling ratio.

6. The webpage layout method according to claim 5, characterized in that: The method of using a scaling model to collaboratively calculate the type weight coefficient, the screen specification classification, and the display characteristic parameter to generate the compensation scaling ratio includes: Obtaining a reference pixel density and a reference width corresponding to the screen specification category, and obtaining a target viewport width of the target viewport and a target pixel density of the display device, wherein the target pixel density is calculated based on the device pixel ratio; Using a first objective function in the scaling model, a compensation operation is performed on the reference pixel density and the target pixel density to obtain a pixel density compensation value; Performing an adaptation operation on the reference width and the target viewport width by using a first objective function in the scaling model to obtain a viewport configuration value; The compensation scaling ratio is calculated and generated based on the type weight coefficient, the pixel density compensation value, the viewport configuration value, and the scaling factor corresponding to the target viewport.

7. The webpage layout method according to claim 1, characterized in that: The performing layout optimization rendering processing on each interface element according to the compensation scaling ratio includes: Calling hardware acceleration resources to allocate independent computing resources for page rendering operations, and marking the page rendering operations as independent rendering layers; Layout calculation and page rendering operations are performed according to the compensation scaling ratio, and the layout calculation and page rendering operations are run through multiple threads.

8. A web page layout device, characterized in that: include: an acquiring unit, configured to acquire, in response to the webpage layout adjustment instruction, display characteristic parameters of the target viewport based on a preset interface, wherein the display characteristic parameters include: viewport size parameters and device pixel ratio; a classification unit, configured to classify the display device corresponding to the target viewport into a corresponding screen specification category according to the viewport size parameter; a calculation unit, configured to calculate, when the device pixel ratio deviates from a reference value, a compensation scaling ratio of each interface element surface in the target viewport in the display device based on the screen specification classification and the display characteristic parameters; A processing unit is used to perform layout optimization rendering processing on each interface element according to the compensation scaling ratio.

9. An electronic device, characterized in that: include: at least one processor; as well as a memory communicatively connected to the at least one processor; wherein, The memory stores instructions that can be executed by the at least one processor. The instructions are executed by the at least one processor to enable the at least one processor to perform the web page layout method according to any one of claims 1 to 7.

10. A non-transitory computer-readable storage medium storing computer instructions, characterized in that: The computer instructions are used to enable the computer to execute the web page layout method according to any one of claims 1 to 7.

Images