Self-adaptive page zooming method and device, equipment and medium

Abstract

The invention discloses a page self-adaptive zooming method and device, equipment and a medium, and the method comprises the steps that a page zooming event is responded, the page zooming proportion of the event is determined, and the page zooming proportion is the ratio of the page container width value of an original page corresponding to the event to the page viewport width value after user zooming operation; equally dividing the width value of the page container according to a preset equal score, and taking the product of the unit width obtained after equally dividing and the page scaling as a pixel scaling unit value; according to the pixel scaling unit value, scaling the page element taking the pixel as the unit in the original page, so that the scaled page element adapts to the page viewport width value and is displayed on the client. According to the method and the device, the pixel zooming unit value is dynamically calculated, and the page elements are scaled according to the value, so that the problems of layout disorder, element display abnormity and the like when a user carries out page zooming can be effectively solved.

Description

Technical Field

[0001] This application relates to the field of computer technology, and in particular to a method, apparatus, device, and medium for adaptive page scaling. Background Technology

[0002] As an important platform for obtaining information, communicating, and conducting business, web pages often need to be resized according to user needs to obtain a more comfortable and clearer visual experience. To this end, users usually use the web page zoom function provided by the browser to zoom in or out of the page. This operation can change the overall display ratio of the web page to meet the user's viewing needs in different scenarios.

[0003] However, traditional web page layouts are usually designed based on fixed pixel values. The size and position of page elements are determined during development. When users zoom in and out of the web page, these page elements, which are based on fixed pixel values, cannot automatically adjust their size and layout. This results in poor display at different zoom levels. For example, some text boxes may exceed their original boundaries, images may be stretched and distorted, or the spacing between some elements may become too large or too small, thus affecting the overall aesthetics and readability of the web page. Summary of the Invention

[0004] The primary objective of this application is to solve at least one of the aforementioned problems by providing a page adaptive scaling method, apparatus, device, or medium thereof.

[0005] To achieve the various objectives of this application, the following technical solution is adopted: A page adaptive scaling method provided for one of the purposes of this application includes the following steps: In response to a page zoom event, determine the page zoom ratio for that event. The page zoom ratio is the ratio of the width of the original page container corresponding to the event to the width of the page viewport after the user zooms. The width of the page container is divided into equal parts according to a preset number of equal parts, and the product of the unit width obtained after division and the page scaling ratio is used as the pixel scaling unit value. The page elements in the original page are scaled proportionally in pixels according to the pixel scaling unit value so that the scaled page elements are displayed on the client side to fit the page viewport width value.

[0006] A page adaptive scaling device provided for one of the purposes of this application includes: The scaling ratio determination module is configured to respond to page scaling events and determine the page scaling ratio for the event. The page scaling ratio is the ratio of the width of the original page container corresponding to the event to the width of the page viewport after the user's scaling operation. The unit value calculation module is configured to divide the width of the page container into equal parts according to a preset number of equal parts, and use the product of the unit width obtained after division and the page scaling ratio as the pixel scaling unit value. The element scaling module is configured to scale the page elements in the original page in pixels according to the pixel scaling unit value, so that the scaled page elements are adapted to the page viewport width value for display on the client.

[0007] A computer device provided for one of the purposes of this application includes a central processing unit and a memory, the central processing unit being configured to invoke and run a computer program stored in the memory to perform the steps of the page adaptive scaling method described in this application.

[0008] A computer-readable storage medium is provided for another purpose of this application, which stores, in the form of computer-readable instructions, a computer program implemented according to the page adaptive scaling method, which, when invoked by a computer, performs the steps included in the method.

[0009] Compared with existing technologies, the advantages of this application are as follows: First, this application uses the ratio of the page container width to the page viewport width as the page scaling ratio, which can accurately reflect the actual viewport change caused by user operation. Based on this, page elements are scaled to ensure that the display ratio of page elements remains accurate under different viewport sizes. This effectively avoids the problems of element misalignment, overflow or deformation that occur when scaling traditional fixed pixel layouts, thereby significantly improving the visual consistency and layout stability of the page.

[0010] Secondly, the width of the page container is divided into equal parts by a preset number of equal parts, and the resulting unit width is multiplied by the page scaling ratio to obtain the pixel scaling unit value. This method converts the page size, which was originally defined by absolute pixels, into a scaling reference based on relative units. This ensures that the size adjustment of all page elements is based on a unified dynamic unit, which not only achieves coordinated scaling of the overall layout, but also maintains the proportional relationship between individual elements. Thus, the original intent and visual hierarchy of the page design can be maintained at any scaling ratio.

[0011] Furthermore, by scaling each element in the original page in pixels according to the calculated pixel scaling unit value, each page element can adaptively adjust its display size based on the same scaling logic. This eliminates the need to write separate responsive rules for different elements, simplifying implementation complexity and ensuring good readability and usability of the page in different viewports, fundamentally improving the user's browsing experience during scaling operations. Attached Figure Description

[0012] The above and / or additional aspects and advantages of this application will become apparent and readily understood from the following description of the embodiments taken in conjunction with the accompanying drawings, wherein: Figure 1 This is a flowchart illustrating a typical embodiment of the page adaptive scaling method of this application; Figure 2 This is a flowchart illustrating the process of non-uniformly dividing the width of the page container in an embodiment of this application. Figure 3 This is a schematic diagram illustrating the scaling process for the visual focus area and background area in an embodiment of this application; Figure 4 This is a schematic diagram illustrating the process of scaling the visual priority of each page element in an embodiment of this application; Figure 5 This is a schematic diagram of the edge sharpness processing process in an embodiment of this application; Figure 6 This is a schematic diagram illustrating the process of scaling specific page blocks based on adaptive layout rules in an embodiment of this application; Figure 7 This application embodiment is a flowchart illustrating the process of dynamically adjusting the preset fractional number after exceeding a preset threshold. Figure 8 This is a schematic block diagram of the page adaptive scaling device of this application; Figure 9 This is a schematic diagram of the structure of a computer device used in this application. Detailed Implementation

[0013] This application relates to a page adaptive scaling method, which can be programmed into a computer program product and deployed on a client or server for execution. For example, in an exemplary application scenario, this page adaptive scaling method is applicable to various devices that support web browsing, such as personal computers, laptops, tablets, and smartphones. These devices connect to a server via the internet, and users access web page content on the server through a browser. While browsing this web page content, users perform zoom operations on the page. The page adaptive scaling method of this application takes effect in real time on the client side, ensuring adaptive adjustment of page elements.

[0014] Before introducing the typical embodiments of this application, it is necessary to provide a general explanation of some basic concepts. First, the page container width refers to the width range occupied by the original page on the client device when no scaling operation is performed, reflecting the layout width of the page in its initial state. The page viewport width, on the other hand, refers to the width range of the page content actually displayed on the client device after the user performs a scaling operation. The page scaling ratio is determined by the ratio of the page container width to the page viewport width, reflecting the degree of scaling of the page after user interaction.

[0015] In a typical embodiment of this application, when a user accesses web page content on a server on a web-browsing device, they perform a zoom operation on the page, such as using the browser's zoom function, adjusting the browser window size, or using gestures on a touchscreen device, to trigger a page zoom event. The adaptive page scaling method of this application determines the page zoom ratio by monitoring and responding to the page zoom event in real time on the client side. Specifically, it first obtains the original page container width value, i.e., the initial width occupied by the page on the client device before any zoom operation. Then, it obtains the current page viewport width value after the user performs the zoom operation, i.e., the actual width of the page content displayed on the client device. By calculating the ratio of the page container width value to the page viewport width value, the page zoom ratio is determined. After determining the page scaling ratio, the width of the page container is divided into equal parts according to a preset fraction. The product of the resulting unit width and the page scaling ratio is used as the pixel scaling unit value. The preset fraction is a fixed value that is set in advance to evenly divide the width of the page container into several unit widths. Finally, based on the calculated pixel scaling unit value, the page elements in the original page are scaled proportionally in pixels to ensure that the page elements can adapt to the new page viewport width after the user performs a scaling operation and maintain a good display effect on the client device.

[0016] In summary, the page adaptive scaling method proposed in this application, through the application of a series of technical means and concepts, can effectively solve the problem of poor page display under user scaling operations on different devices in the prior art, and has significant practical application value and broad market prospects. The following will elaborate on the technical solutions and implementation processes corresponding to each claim of this application through specific embodiments.

[0017] Please see Figure 1 The page adaptive scaling method of this application, in its typical embodiment, includes the following steps: Step S5100: Respond to the page scaling event and determine the page scaling ratio of the event. The page scaling ratio is the ratio of the width of the original page container corresponding to the event to the width of the page viewport after the user scaling operation. Page scaling events can be triggered by adjusting the browser window size, using the mouse wheel to zoom the page, or using gestures to zoom the page on mobile devices. For example, changing the size of the browser window will trigger the resize event, while mouse wheel operation combined with specific keys (such as the Ctrl key) will trigger the page scaling operation.

[0018] In response to a page zoom event, two key width values ​​are obtained: the original width of the page container and the width of the page viewport after the user's zoom action. The page container width refers to the original width of the page before the user zooms in, while the page viewport width is the actual width of the browser window after the user's zoom action. When calculating the page zoom ratio, the page viewport width is divided by the page container width. For example, if the page container width is 1200 pixels and the page viewport width becomes 900 pixels after the user's zoom action, the page zoom ratio is 0.75. This page zoom ratio determines the scaling ratio by which page elements need to be adapted to the new page viewport width.

[0019] Step S5200: Divide the width of the page container into equal parts according to a preset number of equal parts, and use the product of the unit width obtained after division and the page scaling ratio as the pixel scaling unit value. The number of equal parts is a predefined value that determines how many equally wide unit areas the page container's width will be divided into. The unit width is calculated by dividing the page container's width by this predefined number of equal parts. For example, if the page container's width is 1200 pixels and the predefined number of equal parts is 12, the page container will be divided into 12 equally wide unit areas, each with a width of 100 pixels.

[0020] After dividing the page into equal parts, the width of each unit area is multiplied by the page scaling ratio to obtain a pixel scaling unit value. This pixel scaling value will be used in subsequent page element scaling calculations. For example, if the page scaling ratio is 0.75, the pixel scaling unit value for each unit area will be 75 pixels. This pixel scaling unit value represents the actual display width of each unit area at the current scaling ratio.

[0021] The calculated pixel scaling unit value provides a precise reference for the adaptive scaling of page elements. In some embodiments, the division rules can be adjusted according to the actual layout and design requirements of the page. For example, in some cases, the page contains multiple different layout areas, each of which needs to be divided differently according to its content and design requirements. Different division rules can be generated for each area through preset rules or algorithms, thereby achieving a more refined adaptive layout.

[0022] Step S5300: Scale the page elements in the original page (in pixels) according to the pixel scaling unit value so that the scaled page elements are adapted to the page viewport width value and displayed on the client.

[0023] This step first requires identifying and obtaining all page elements in the original page whose size is defined in pixels. These elements may include text boxes, buttons, images, layout containers, etc. The size of these elements is specified with fixed pixel values ​​during page design. Specifically, it is necessary to comprehensively scan the HTML structure and CSS styles of the page to extract the original width, height and other size information of each element, so as to provide basic data for subsequent scaling calculations.

[0024] After obtaining the original size of the page elements, these elements are scaled according to the pixel scaling unit value. In one embodiment, the original size of the target page element is divided by the unit width calculated in the aforementioned embodiment to perform unit conversion on the original size, obtaining an intermediate unit value. This intermediate unit value is then multiplied by the pixel scaling unit value to obtain the scaled pixel value of the target page element. The target page element is then displayed based on this pixel value. For example, if the original width of a page element is 200 pixels, the calculated unit width is 100 pixels, the page scaling ratio is 0.75, and the pixel scaling unit value is 75 pixels, the intermediate unit value of the page element is calculated as 200 pixels divided by 100 pixels, which equals 2 units. Multiplying these 2 units by the pixel scaling unit value of 75 pixels yields a scaled width of 150 pixels for the page element. Based on this calculated 150 pixels, the width of the page element is reset, ultimately allowing the page element to be displayed on the client page according to the calculated size, matching the current page viewport width and achieving adaptive display.

[0025] In some implementations, in addition to resizing, the layout and alignment of page elements also need to be considered. When the size of page elements changes, the position and spacing of each element on the page also need to be adjusted accordingly to maintain the overall aesthetics and functionality of the page. For example, it may be necessary to recalculate the spacing between elements or adjust their alignment to ensure that the page maintains a good visual effect and user experience even after scaling.

[0026] From the above description of the typical embodiments of this application, it can be understood that this application has many advantages, including but not limited to the following aspects: First, this application uses the ratio of the page container width to the page viewport width as the page scaling ratio, which can accurately reflect the actual viewport change caused by user operation. Based on this, page elements are scaled to ensure that the display ratio of page elements remains accurate under different viewport sizes. This effectively avoids the problems of element misalignment, overflow or deformation that occur when scaling traditional fixed pixel layouts, thereby significantly improving the visual consistency and layout stability of the page.

[0027] Secondly, the width of the page container is divided into equal parts by a preset number of equal parts, and the resulting unit width is multiplied by the page scaling ratio to obtain the pixel scaling unit value. This method converts the page size, which was originally defined by absolute pixels, into a scaling reference based on relative units. This ensures that the size adjustment of all page elements is based on a unified dynamic unit, which not only achieves coordinated scaling of the overall layout, but also maintains the proportional relationship between individual elements. Thus, the original intent and visual hierarchy of the page design can be maintained at any scaling ratio.

[0028] Furthermore, based on the calculated pixel scaling unit value, each element in the original page is proportionally scaled in pixels, enabling each page element to adaptively adjust its display size based on the same scaling logic. This eliminates the need to write independent responsive rules for different elements, simplifying implementation complexity and ensuring good readability and usability of the page in different viewports, fundamentally improving the user's browsing experience during scaling operations.

[0029] For further embodiments, please refer to Figure 2 The page container width is divided into equal parts according to a preset number of equal parts. The product of the resulting unit width and the page scaling ratio is used as the pixel scaling unit value. This includes the following steps: Step S5210: Determine the target division rule from a set of preset division rules based on the layout type of the original page. Common layout types include fixed layout, fluid layout, flexbox, and CSSGrid, each with its unique characteristics and applicable scenarios. For example, fixed layout is used to design pages with a fixed size and is suitable for desktop devices; fluid layout achieves responsive design through percentage width and is suitable for various devices; while flexbox and grid layout provide more flexible space allocation methods and are suitable for complex page structures.

[0030] The layout type of a page can be identified by analyzing its CSS styles, HTML structure, or using JavaScript libraries. For example, by checking whether the display property of the root element is flex or grid, you can determine whether the page uses a flex layout or grid layout. For fluid layouts, you can identify them by checking whether the width of page elements uses percentage units, while for fixed layouts, the width of page elements is usually in pixels.

[0031] After identifying the page layout type, the target division rule is determined from several preset division rules. These preset division rules are predefined based on different layout types and guide how the page container width is divided. For example, for a fixed layout, the division rule is a simple fixed-width division, such as dividing the page container width into several fixed-width unit areas; for a fluid layout, the division rule is a percentage-based division, such as dividing the page container width into several percentage-width unit areas; for flex layouts and grid layouts, the division rule is a more complex division, taking into account the flexible space allocation and the size of the grid tracks.

[0032] Taking flex layout as an example, the division rule is determined based on the direction (horizontal or vertical) of the flex container and the flex properties of its child elements. If the flex container is horizontal and the child elements' flex properties allow for dynamic width adjustment, then the width of the page container is divided into several flex unit areas of equal width, and the width of each area is dynamically adjusted according to the flex properties of its child elements. For grid layout, the division rule is determined based on the column and row definitions of the grid container. If the grid container defines multiple columns and the width of each column is equal, then the width of the page container is divided into multiple grid unit areas of equal width.

[0033] In some embodiments, when selecting the target division rule, the actual content and design requirements of the page also need to be considered. For example, if the page contains multiple different functional areas, such as a navigation bar, content area, and footer, each area may need to be divided differently according to its content and design requirements. Different division rules can be generated for each area through preset rules or algorithms, thereby achieving a more refined adaptive layout.

[0034] In addition, the division rules can be dynamically adjusted according to the responsive design requirements of the page. For example, when the page viewport width changes, different division rules can be switched according to preset breakpoints (such as 768px, 1024px, etc.) to adapt to different devices and screen sizes, ensuring that the page maintains a good layout and display effect on different devices.

[0035] Step S5220: Divide the width value of the page container into multiple non-uniform unit widths based on the target equal division rule; Non-uniform division differs from traditional uniform division in that it allows the page container width to be divided into multiple unit areas of varying widths. The target division rules include the width proportion of each unit area, minimum or maximum width limits for a specific area, and the relative width relationship between different areas. For example, in a typical news website page, the main content area occupies 60% of the page width, while the sidebar occupies the remaining 40%. In this case, the page container width would be divided into two non-uniform unit widths based on this proportional relationship.

[0036] According to the target equal division rule, the specific value of each non-uniform unit width is calculated. That is, the target equal division rule defines preset equal division numbers for different areas. By dividing the page container width value by different preset equal division numbers, multiple non-uniform unit widths are obtained. In one embodiment, the target equal division rule specifies that the responsive design requirements of the page are considered when dividing the page container width value. In this case, the target equal division rule will dynamically adjust according to the width of the page viewport. For example, on a large screen, the main content area occupies 70% of the page width, while on a mobile device, this proportion may be adjusted to 80% to adapt to smaller screen sizes, ensuring that the page maintains a good layout and display effect on different devices.

[0037] Step S5230: Multiply each non-uniform unit width by the page scaling ratio to obtain a set of corresponding pixel scaling unit values, which are used to perform differentiated scaling on page elements in different layout areas of the original page.

[0038] The non-uniform unit widths obtained in the preceding steps are multiplied by the page scaling ratio to obtain a set of multiple pixel scaling unit values. These pixel scaling unit value sets will be used to perform differentiated scaling on page elements in different layout areas of the original page, ensuring that page elements in each area can adapt to the new page viewport width value after scaling, and maintain good visual effects and user experience.

[0039] After obtaining the set of pixel scaling unit values, these values ​​are used to apply differentiated scaling to page elements in each layout area. This means that page elements in different areas are scaled independently based on the pixel scaling unit value of their respective areas, rather than being uniformly scaled at the same rate. For example, text and images in the main content area will be scaled based on a 576-pixel unit width, while links and advertisements in the sidebar will be scaled based on a 384-pixel unit width. This differentiated approach ensures that page elements in each area maintain an appropriate size and layout after scaling, avoiding layout chaos or incomplete content display caused by uniform scaling.

[0040] In this embodiment, adaptive display of the page across different devices and screen sizes is achieved through refined page layout adjustments and element scaling strategies. Specifically, an appropriate target partitioning rule is first selected based on the page layout type. This target partitioning rule determines how the width of the page container is divided. For example, a simple fixed width partition is used for a fixed layout; for a fluid layout, the width is partitioned based on percentages; and for flexible and grid layouts, a more complex partition is performed based on the flexible attributes and grid track definitions. This dynamic selection of partitioning rules not only improves the flexibility of the page layout but also better adapts to complex page structures, ensuring that the page maintains a good visual effect under different scaling ratios.

[0041] For further embodiments, please refer to Figure 3 The page container width is divided into equal parts according to a preset number of equal parts. The product of the resulting unit width and the page scaling ratio is used as the pixel scaling unit value. The method also includes the following steps: Step S5240: Call the pre-trained visual weight model to perform visual heat area recognition on the original page, and determine the visual focus area and background area. A visual weighting model is a model built using machine learning or deep learning techniques. It analyzes the visual features of a webpage to identify which areas are most likely to attract user attention and which areas are background or supplementary content. Specifically, the visual weighting model is trained on a large amount of webpage data to learn how to determine visual focus based on factors such as page layout, color, contrast, and element size.

[0042] Specifically, the process begins by loading a pre-trained visual weight model. This model can be an image recognition model based on a convolutional neural network (CNN) or a model specifically designed for webpage layout. After loading the model, the visual representation of the original page (such as a screenshot or rendered image) is input into it. The model analyzes the page's visual features to divide the page into visual focus areas and background areas. Visual focus areas typically contain important content, such as headlines, main images, and key buttons. Background areas contain supplementary information or decorative content. For example, on a news website homepage, the main news headlines and accompanying images are the visual focus areas, while the copyright notice and navigation bar in the footer are the background areas.

[0043] Step S5250: Based on the width of the page container and the preset focus division coefficient and background division coefficient, determine the unit width of the visual focus area and the background area, wherein the focus division coefficient is greater than the background division coefficient; The unit width calculation for the visual focus area and background area is based on the page container width and preset division coefficients. The focus division coefficient and background division coefficient are preset in advance by those skilled in the art based on experimental data or experience. In some embodiments, the division coefficient can be directly equivalent to the preset division number mentioned in the previous embodiments, used to divide the visual focus area and background area into different equal parts. The resulting unit widths of the visual focus area and background area are also different; that is, the page container width value divided by the focus division coefficient is used as the unit width of the visual focus area, and the page container width value divided by the background division coefficient is used as the unit width of the background area. For example, when the page container width value is 1200 pixels, the preset focus division coefficient is 20, and the background division coefficient is 10, the calculated unit width of the visual focus area is 60 pixels, while the unit width of the background area is 120 pixels. By setting differentiated division coefficients for different types of areas, refined division processing of visually important areas of the page can be achieved, providing a benchmark for subsequent targeted scaling.

[0044] Step S5260: Multiply the unit width by the page scaling ratio to obtain the pixel scaling unit value of the visual focus area and the background area, which is used to perform corresponding scaling on the page elements of the visual focus area and the background area.

[0045] After obtaining the unit width of both the visual focus area and the background area, the pixel scaling unit value for each area is calculated based on the current page zoom level. Specifically, the unit width of the visual focus area is multiplied by the page zoom level to obtain the pixel scaling unit value for the visual focus area; similarly, the unit width of the background area is multiplied by the page zoom level to obtain the pixel scaling unit value for the background area. This pixel scaling unit value represents the actual display pixel width corresponding to each unit within the corresponding area in the current viewport, and is the basic scale for performing the final element scaling calculation.

[0046] For example, assuming the current page scaling ratio is 0.8, the unit width of the visual focus area is 60 pixels, and the unit width of the background area is 120 pixels, then the pixel scaling unit value for the visual focus area is calculated as 60 pixels multiplied by 0.8, which equals 48 pixels, and the pixel scaling unit value for the background area is calculated as 120 pixels multiplied by 0.8, which equals 96 pixels. This means that in the final rendering, each unit length within the visual focus area will correspond to an actual display width of 48 pixels, while each unit length within the background area will correspond to an actual display width of 96 pixels.

[0047] Based on the calculated pixel scaling unit values ​​for the visual focus area and the background area, page elements within their respective areas can be proportionally scaled. For page elements in the visual focus area, their original size is converted to a number of units based on the unit width of the visual focus area, and then multiplied by the pixel scaling unit value of the visual focus area to obtain their scaled actual pixel size. Similarly, for page elements in the background area, the pixel scaling unit value of the background area is used for conversion. Through this differentiated processing, key content in the visual focus area can maintain high visual precision and detail density after scaling, while content in the background area can undergo relatively large scale adjustments. This optimizes the allocation of visual resources while adapting to changes in the viewport, improving the user's browsing experience and information acquisition efficiency after scaling.

[0048] In this embodiment, by intelligently identifying the visual focus area and background area of ​​the page, and assigning different division coefficients to different areas based on differences in visual importance, refined and differentiated control is achieved during the page scaling process. The visual focus area, due to the use of a larger focus division coefficient, results in a smaller unit width after division. Combined with the page scaling ratio, this yields a relatively small pixel scaling unit value, allowing for more precise size calculations of elements within this area. This maintains higher content density and visual clarity after scaling, ensuring that key information remains clearly and accurately presented even when the viewport changes. Conversely, the background area uses a smaller background division coefficient, resulting in a larger unit width and pixel scaling unit value. This allows for greater adjustments to elements in this area during scaling, and even moderate compression without affecting the overall layout perception, thus reserving more display resources for the focus content within the limited viewport space. This embodiment's differentiated scaling strategy based on visual weight not only improves the overall information presentation efficiency of the page in a scaled state but also optimizes the user's visual flow and reading experience, making the page adaptation process more aligned with human visual habits and cognitive priorities.

[0049] For further embodiments, please refer to Figure 4 The process of scaling page elements in the original page (in pixels) proportionally according to the pixel scaling unit value includes the following steps: Step S5310: Obtain the preset visual priority weights for each page element in the original page; Visual priority weights are numerical indicators used to characterize the visual importance or prominence of different page elements. These weights can be pre-set manually by page designers and developers based on the information hierarchy, interactive importance, or visual guidance intent of the page content, or they can be automatically calculated by analyzing page layout structure, element types, style characteristics, and historical user behavior data. Visual priority weights are usually expressed numerically; higher values ​​indicate higher visual priority for the corresponding page element, and its size, clarity, or layout position should be maintained as much as possible during scaling. For example, in an e-commerce product detail page, the main product image and the "Buy Now" button can be set to higher visual priority weights, while the product parameter table sidebar and related recommendation links can be set to lower weights.

[0050] In practice, the visual priority weight of each page element can be obtained in several ways. One way is to add specific attribute tags or metadata to the elements in the page code, such as explicitly defining their weight value in the HTML tag using the `data-priority` attribute. Another way is to infer it through style rules associated with the page stylesheet. For example, elements can be matched using CSS selector rules, and based on their visual characteristics such as font size, color contrast, positioning, and hierarchy, combined with a predefined weight mapping table, the corresponding priority weight can be automatically assigned. Furthermore, in pages that support dynamic content or interaction, the visual priority weight can be dynamically adjusted based on factors such as whether an element is bound to a key interactive event or whether it belongs to a frequently clicked area.

[0051] After obtaining the visual priority weight of each page element, this weight will serve as an important basis for subsequent differential scaling. This allows high-priority elements to receive more refined scaling that is more inclined to maintain their original appearance during the page adaptation process, while low-priority elements can undergo larger size adjustments or layout simplification when necessary. This optimizes the presentation of key content and the user's visual experience while adapting to changes in the viewport as a whole.

[0052] Step S5320: Based on the visual priority weight, generate a scaling factor for each page element that is positively correlated with its visual priority weight; Visual priority weights reflect the importance of page elements, while scaling factors directly determine the final display size of that element during adaptive scaling. To prioritize the readability and usability of highly important content during scaling, a scaling factor positively correlated with the visual priority weight should be generated for each page element. That is, the higher the weight of an element, the larger its scaling factor should be, so that under the same scaling conditions, its size reduction is relatively smaller, and in some cases, it can even approach the original size.

[0053] Specifically, the process of generating scaling factors is based on preset mapping rules or calculation formulas, converting visual priority weights into scaling adjustment factors suitable for size calculations. This scaling factor can range from 0 to 1, or be extended to a range greater than 1 as needed. A typical implementation is to establish a correspondence between weight ranges and scaling factors. For example, when the visual priority weight is in the high-weight range of 0.8 to 1.0, the corresponding scaling factor can be set to 0.9 to 1.0, indicating that high-priority elements retain 90% to 100% of their original size after scaling. When the weight is in the medium-weight range of 0.3 to 0.5, the scaling factor can be set to 0.6 to 0.8. For low-priority elements with weights below 0.3, the scaling factor can be further reduced to 0.4 to 0.6. Another approach is to calculate using a continuous function, for example, scaling factor = base scaling factor + (visual priority weight * compensation factor), where the base scaling factor reflects the overall scaling ratio, and the compensation factor is used for fine-tuning based on the weights, thus allowing high-weight elements to receive additional size compensation.

[0054] For example, suppose on a certain page, the visual priority weight of the main product image is 0.9, the weight of the product description text is 0.7, and the weight of the registration information at the bottom of the page is 0.2. If the base scaling factor for the overall scaling requirement is 0.7, and the compensation factor is set to 0.2, then the scaling factor for the main image is calculated as 0.7 + (0.9 × 0.2) = 0.88, the scaling factor for the description text is 0.84, and the scaling factor for the registration information is 0.74. It can be seen that although all three are scaled, the elements with higher weights receive higher scaling factors, resulting in a smaller actual size reduction, thus better maintaining their visual appeal and functionality within the limited viewport space.

[0055] By generating scaling factors that are positively correlated with visual priority weights for each page element, it is possible to achieve differentiated scaling control for content of different importance while adapting the overall viewport. This ensures the overall coordination of the page layout and highlights key content, thereby achieving a balance between visual efficiency and space utilization, and improving the user's efficiency in obtaining information and the interactive experience after scaling.

[0056] Step S5330: Based on the pixel scaling unit value and the scaling factor of each page element, scale each page element.

[0057] After obtaining a uniform pixel scaling unit value and an independent scaling factor for each page element, the final display size of each page element after scaling can be calculated based on these two factors. Specifically, for each page element, firstly, based on its original pixel size and the unit width calculated in the previous steps, its original size is converted into a number of units based on the unit width to obtain the unit size of the element. Then, this unit size is multiplied by the pixel scaling unit value to obtain the base scaled size under a uniform scaling ratio. Finally, the base scaled size is multiplied by the scaling factor corresponding to the element to obtain the final display pixel size of the element.

[0058] Based on the final display pixel size calculated above, the style properties of each page element in the document object model can be updated, or its original size definition can be dynamically overridden through Cascading Style Sheets rules, thereby completing the scaling of each page element.

[0059] In this embodiment, visual priority weights are introduced for each page element, and differentiated scaling coefficients are generated based on these weights. Elements with high visual priority, such as key operation buttons or core information graphics, are assigned higher scaling coefficients, allowing them to retain more of their original size characteristics in the final size calculation. This maintains prominent visual appeal and clear interactive guidance in the scaled page. Conversely, elements with low visual priority, such as decorative content or auxiliary information, are compressed to a greater extent with lower scaling coefficients, visually weakening them to free up more display space for high-priority content. This weight-based differentiated scaling not only optimizes the space utilization efficiency of the scaled page but also follows the user's visual perception rules, ensuring that the page can still clearly and orderly convey core information when adapting to different viewport sizes, thus improving the user experience.

[0060] For further embodiments, please refer to Figure 5 The process involves scaling page elements in the original page (in pixels) proportionally according to the pixel scaling unit value, so that the scaled page elements are displayed on the client side to fit the page viewport width value. This includes the following steps: Step S6100: Perform edge sharpness detection on the scaled page elements to identify blurry page elements whose edge sharpness value is less than the preset clarity threshold. Edge sharpness detection is a process used to quantify the visual clarity of page elements. It is particularly suitable for identifying image quality degradation, jagged text edges, or loss of graphic details caused by scaling, especially significant reduction. When the display size of page elements (especially those containing graphics, icons, and text) changes after scaling calculations, their actual visual presentation quality may be affected by factors such as pixel resampling and anti-aliasing. Specifically, the outlines of element edges become less sharp, appearing blurry, jagged, or feathered, affecting readability and aesthetics.

[0061] In practice, edge sharpness detection typically involves analyzing the rendered results of a scaled page using image processing algorithms. A common approach is to acquire the actual pixel data of page elements after scaling (e.g., drawing elements via the Canvas API and obtaining their image data) and calculate the contrast gradient of their edge regions, using this as a quantitative indicator of edge sharpness. For example, the gradient magnitude of the element's image data can be calculated using edge detection algorithms such as the Sobel operator or the Laplacian operator; a higher magnitude generally indicates a sharper edge. The calculated edge sharpness value is then compared to a preset sharpness threshold. If the edge sharpness value is lower than this threshold, the page element is considered a blurry element. The sharpness threshold can be preset or dynamically adjusted based on factors such as the pixel density of the display device, viewing distance, and element type. For example, for high-resolution displays, a higher sharpness threshold can be set to ensure high-quality visual presentation.

[0062] For example, when a news article page is zoomed in, the text in the body paragraphs may become blurry due to pixel alignment issues caused by the significant size reduction. By performing edge sharpness detection on this text area and calculating its edge gradient magnitude, if the value is lower than the sharpness threshold set for the text element, the text paragraph is determined to be a blurry page element and requires further processing to improve its sharpness. Similarly, zoomed-in icons, button graphics, etc., may also be identified as blurry elements for similar reasons.

[0063] By performing edge sharpness detection and identifying blurred page elements, this step provides a clear objective for subsequent visual quality enhancement processing, ensuring that page adaptive scaling not only adapts to the viewport in terms of layout size, but also maintains or improves the user experience in terms of visual presentation quality. This is especially important in high-precision display devices or application scenarios with high visual quality requirements.

[0064] Step S6200: Obtain the original pixel data of the blurred page element and its layout position information in the original page; After identifying blurry page elements, their original pixel data needs to be obtained for subsequent high-quality redrawing. Original pixel data refers to the complete image information of the page element at its original design size and resolution before any scaling. The method for obtaining original pixel data differs depending on the type of page element. For image elements, complete bitmap data, including the color value and transparency of each pixel, can be read directly from the original image file pointed to by its src attribute or from cached image resources. For vector graphics, icons, or text drawn by HTML and CSS, this can be obtained by reading their original vector description information; for text elements, their font file, font size, and font weight can be obtained for accurate rasterization rendering in subsequent steps. Furthermore, for graphics drawn on Canvas, the original pixel information can be recovered from their original drawing commands or data saved in the off-screen Canvas.

[0065] Simultaneously, it is necessary to obtain the layout position information of the blurred page elements within the original page. This layout position information is used to determine the precise positioning of the elements in the overall page layout coordinate system, ensuring that the redrawn elements can be accurately placed back to their proper visual positions, maintaining the integrity and consistency of the page layout. Layout position information may include the element's bounding box information in the original page coordinate system, such as the X and Y coordinates of its top-left corner relative to the page viewport or root container, and the element's original width and height. Furthermore, it may also include the element's stacking context information, transformation matrices, and relative positioning reference elements, all of which collectively define the element's precise spatial relationship within the original page layout. This information can be obtained from the element's style attributes and layout calculation attributes in the Document Object Model.

[0066] Step S6300: Based on the original pixel data and the layout position information, the edge contours of the blurred page element are redrawn and filled based on vector paths, and the redrawn page element replaces the blurred page element for display.

[0067] Based on the acquired original pixel data and layout position information, high-fidelity vector redrawing is performed on the blurred page elements to generate a visually sharper and clearer redrawn version, which ultimately replaces the original blurred elements for display.

[0068] Specifically, for image elements, the process begins by generating key vector paths for their visual content based on their original pixel data using image contour extraction algorithms (such as edge detection combined with contour tracking). For example, for icons or logos with clearly defined shapes, their outer contour paths can be extracted; for complex images, the boundary paths of their main color regions can be extracted. Then, based on the obtained layout position information, a new vector graphic element is created at the corresponding coordinates on the page. Simultaneously, the area enclosed by the paths is filled with color information from the original pixel data. For gradient or texture areas, corresponding gradient or pattern definitions are generated and applied. After redrawing, the newly generated vector graphic element is positioned according to the layout position information, and its stacking order is set to cover or replace the original blurred bitmap image element.

[0069] For text elements, based on the obtained original font attributes, text content, and layout position information, the text is re-rendered in a new graphics context (such as a Canvas dedicated to high-quality rendering) using the original font file and at the original design size. This process bypasses the browser's subpixel anti-aliasing or grayscale rendering of the text after scaling, and can generate sharp text with clear edges that are precisely aligned with the device's pixel grid. Then, this newly rendered text image or vector text is precisely placed in the original position determined by the layout position information to replace the blurred DOM text node.

[0070] For simple shapes drawn with CSS (such as buttons, borders, etc.), the corresponding SVG path and style description can be directly generated based on their original style definition, and then redrawn.

[0071] After the repaint is complete, the generated high-quality vector elements are inserted into the document object model. The original elements can be hidden by setting the display property of the original blurred page elements to none, or they can be removed directly from the DOM tree, and the new repainted elements are inserted into the corresponding positions.

[0072] In this embodiment, by actively detecting the edge sharpness of page elements after scaling, and for the identified blurred elements, performing high-quality redrawing and replacement based on vector paths according to their original pixel data and layout position information, the visual quality degradation problem commonly found in traditional page scaling techniques is effectively overcome. By generating resolution-independent vector versions for blurred elements, clear and sharp edge outlines can be provided at any scaling ratio, significantly improving the readability of text and the visual professionalism of graphic elements. This is especially suitable for corporate websites, product display pages, or data visualization interfaces containing rich graphics and fine text, ensuring that the page can always provide users with a high-quality, high-definition browsing experience in complex multi-device, multi-resolution scenarios.

[0073] For further embodiments, please refer to Figure 6 Before dividing the page container width value equally according to the preset display unit width, the following steps are included: Step S4100: Based on the page scaling ratio, determine whether there is a page block in the original page that matches the preset page structure template; A page structure template is a predefined abstract model that describes the typical layout structure, element composition, and style characteristics of specific types of page blocks (such as navigation bars, card lists, areas with mixed text and images, footers, etc.). Each page structure template contains its corresponding layout rules, such as the arrangement of elements (flow, grid, flex), relative size relationships, spacing rules, etc., and is usually associated with a set of adaptive layout strategies optimized for that page structure template. When the page is scaled, this step identifies local areas in the original page that match the characteristics of the predefined page structure template, so that targeted layout rules can be invoked for more intelligent adaptation later.

[0074] Specifically, the judgment process can be implemented by analyzing the document object model subtree of the current page and its calculated styles. First, the page zoom level is used as one of the triggering conditions or contexts for the judgment. For example, the matching of the preset page structure template is only performed when the zoom level is below a certain threshold (such as 0.5, indicating that the viewport is significantly reduced). Then, the main container elements in the original page are traversed, and their structural features are extracted, such as the number and type of child elements, tag name sequence, CSS class name, and key style properties (display, flex-direction, etc.). The extracted features are then matched with multiple preset page structure templates. The matching algorithm can be based on rule judgment, feature vector similarity calculation (such as cosine similarity), or lightweight machine learning models (such as decision trees) to determine whether there are page blocks in the original page that match the preset page structure template.

[0075] Step S4200: When it exists, call the adaptive layout rule corresponding to the page structure template to update the layout attributes of the page elements in the page block.

[0076] Once a page block matching the preset page structure template is identified, the adaptive layout rules associated with that template can be invoked to perform targeted updates to the layout attributes of the elements within that page block, thereby optimizing its presentation at the current zoom level. Each page structure template predefines its adaptive layout rules for different viewports or zoom scenarios.

[0077] Specifically, the adaptive layout rules applied vary depending on the type of page structure template matched. For example, for blocks matching the top navigation bar template, the rules might include: when the page zoom level is less than 0.6, converting horizontally arranged navigation items into vertically collapsible dropdown menus and updating the corresponding CSS properties such as display and flex-direction, while adjusting font size and spacing to ensure operability; for blocks matching the card grid template, the rules might include: dynamically calculating and setting the optimal number of grid columns based on the current viewport width (or zoom level), and adjusting the card margins and padding; for blocks matching the sidebar-main content area two-column template, the rules might include: when the zoom level is below a specific threshold, adjusting the sidebar from a fixed width to an adaptive width, or moving it below the main content area.

[0078] During the update process, the target attribute value is calculated based on the adaptive layout rules and directly applied to the styles of relevant elements within the page block. This can be achieved by manipulating the `style` property of the Document Object Model (DOM) or by switching the predefined CSS class names in the stylesheet that correspond to different layout states.

[0079] In this embodiment, by introducing a preset page structure template and its associated adaptive layout rules, when the page needs to be scaled due to changes in the viewport, it can be ensured that functional blocks such as navigation bars and card lists can be adjusted in accordance with the best responsive practices in their respective domains. For example, the navigation bar collapses into a menu in a narrow viewport, and the card grid adaptively adjusts the number of columns to maintain content readability and layout efficiency.

[0080] For further embodiments, please refer to Figure 7 It also includes the following steps: Step S7100: Monitor the real-time change value of the page viewport width; By continuously monitoring for changes in the size of the browser window or display area, the system captures and calculates changes in the page viewport width in real time. Changes in the page viewport width can be caused by user actions such as manually resizing the browser window, rotating the screen orientation on a mobile device, or switching device emulation modes in developer tools.

[0081] In practice, changes in viewport size can be determined by listening to the browser's resize event. When the resize event is triggered, the handler obtains the current viewport width value. To calculate the real-time change value, the viewport width at the time of the last event trigger needs to be recorded. If there is a difference between the viewport widths obtained before and after the event, the absolute value of the difference is the real-time change value detected this time.

[0082] In some embodiments, the relative rate of change, such as the percentage of the change value relative to the original width, may also be monitored to more evenly assess the impact of changes under different initial dimensions.

[0083] Step S7200: When the real-time change value exceeds the preset threshold, the preset equal fraction is dynamically adjusted based on the current page viewport width and the page container width, according to preset constraint rules.

[0084] When the detected real-time change value exceeds a preset threshold, it indicates a significant change in the viewport width. This significant change could stem from user actions such as quickly dragging the window border, switching between landscape and portrait modes, or moving the window between different sized monitors. If a fixed preset fractional division is used for subsequent scaling calculations in this situation, the calculated pixel scaling unit value will be either too large or too small, resulting in the final rendered page element size failing to meet usability requirements. For example, text may be too small to read, or interactive controls may be difficult to select. Therefore, based on the current page viewport width and page container width, the preset fractional division is dynamically adjusted according to preset constraint rules. These preset constraint rules ensure that the final calculated pixel scaling unit value is not lower than the minimum usable pixel value preset to maintain basic usability.

[0085] In this embodiment, by monitoring the viewport change amplitude in real time, and dynamically adjusting the preset fraction according to the constraint rules when the change exceeds the preset threshold, the size of the final rendered elements will not be lower than the specific threshold.

[0086] Please see Figure 8 This invention provides a page adaptive scaling device to meet one of the purposes of this application. It is a functional embodiment of the page adaptive scaling method of this application. The device includes: a scaling ratio determination module 5100, a unit value calculation module 5200, and an element scaling module 5300. The scaling ratio determination module 5100 is configured to respond to a page scaling event and determine the page scaling ratio of the event. The page scaling ratio is the ratio of the width of the original page container corresponding to the event to the width of the page viewport after the user scaling operation. The unit value calculation module 5200 is configured to divide the width of the page container into equal parts according to a preset number of equal parts, and use the product of the resulting unit width and the page scaling ratio as the pixel scaling unit value. The element scaling module 5300 is configured to scale the page elements in the original page in pixels according to the pixel scaling unit value, so that the scaled page elements are adapted to the page viewport width and displayed on the client.

[0087] In a further embodiment, the unit value calculation module 5200 includes: a rule determination unit, configured to determine a target equal division rule from a plurality of preset equal division rules according to the layout type of the original page; a non-uniform equal division unit, configured to perform non-uniform equal division on the width value of the page container based on the target equal division rule to obtain a plurality of non-uniform unit widths; and a unit value set calculation unit, configured to multiply each non-uniform unit width by the page scaling ratio to obtain a corresponding plurality of pixel scaling unit value sets, used to perform differentiated scaling on page elements in different layout areas of the original page.

[0088] In a further embodiment, the unit value calculation module 5200 further includes: a visual heat zone recognition unit, configured to call a pre-trained visual weight model to perform visual heat zone recognition on the original page, and determine the visual focus area and background area; a differential width calculation unit, configured to determine the unit width of the visual focus area and the background area based on the width value of the page container and preset focus division coefficients and background division coefficients, wherein the focus division coefficient is greater than the background division coefficient; and a differential unit value calculation unit, configured to multiply the unit width by the page scaling ratio to obtain the pixel scaling unit value of the visual focus area and the background area, used to perform corresponding scaling on the page elements of the visual focus area and the background area.

[0089] In a further embodiment, the element scaling module 5300 includes: a priority acquisition unit, configured to acquire a preset visual priority weight for each page element in the original page; a scaling coefficient generation unit, configured to generate a scaling coefficient for each page element that is positively correlated with its visual priority weight based on the visual priority weight; and a weighted scaling execution unit, configured to scale each page element based on the pixel scaling unit value and the scaling coefficient of each page element.

[0090] In a further embodiment, after the element scaling module 5300, the system includes: a blur detection unit, configured to perform edge sharpness detection on the scaled page elements and identify blurry page elements whose edge sharpness values ​​are less than a preset sharpness threshold; an element information acquisition unit, configured to acquire the original pixel data of the blurry page elements and their layout position information in the original page; and a vector redrawing unit, configured to redraw and fill the edge contours of the blurry page elements based on the original pixel data and the layout position information, and replace the blurry page elements for display.

[0091] In a further embodiment, before the unit value calculation module 5200, there are: a template matching unit, configured to determine whether there is a page block in the original page that matches a preset page structure template based on the page scaling ratio; and a layout attribute update unit, configured to call the adaptive layout rule corresponding to the page structure template when such a page block exists, and update the corresponding layout attributes of the page elements in the page block.

[0092] In a further embodiment, it also includes: a viewport change monitoring unit, configured to monitor the real-time change value of the page viewport width; and a dynamic unit adjustment unit, configured to dynamically adjust the preset fraction based on the current page viewport width and the page container width, based on preset constraint rules, when the real-time change value exceeds a preset threshold.

[0093] To address the aforementioned technical problems, embodiments of this application also provide computer equipment. For example... Figure 9 The diagram shows the internal structure of a computer device. The computer device includes a processor, a computer-readable storage medium, a memory, and a network interface connected via a system bus. The computer-readable storage medium stores an operating system, a database, and computer-readable instructions. The database may store a sequence of control information. When the computer-readable instructions are executed by the processor, they enable the processor to implement a page adaptive scaling method. The processor of the computer device provides computing and control capabilities, supporting the operation of the entire computer device. The memory of the computer device may store computer-readable instructions, which, when executed by the processor, enable the processor to execute the page adaptive scaling method of this application. The network interface of the computer device is used for communication with a terminal. Those skilled in the art will understand that… Figure 9 The structure shown is merely a block diagram of a portion of the structure related to the present application and does not constitute a limitation on the computer device to which the present application is applied. Specific computer devices may include more or fewer components than those shown in the figure, or combine certain components, or have different component arrangements.

[0094] In this embodiment, the processor is used to execute... Figure 8 The system defines the specific functions of each module and its submodules. The memory stores the program code and various data required to execute these modules or submodules. The network interface is used for data transmission between the user terminal and the server. In this embodiment, the memory stores the program code and data required to execute all modules / submodules in the page adaptive scaling device of this application. The server can call the server's program code and data to execute the functions of all submodules.

[0095] This application also provides a storage medium storing computer-readable instructions, which, when executed by one or more processors, cause the one or more processors to perform the steps of the page adaptive scaling method of any embodiment of this application.

[0096] Those skilled in the art will understand that all or part of the processes in the methods of the above embodiments of this application can be implemented by a computer program instructing related hardware. This computer program can be stored in a computer-readable storage medium, and when executed, it can include the processes of the embodiments of the methods described above. The aforementioned storage medium can be a magnetic disk, optical disk, read-only memory (ROM), or random access memory (RAM), etc.

[0097] Those skilled in the art will understand that the steps, measures, and solutions in the various operations, methods, and processes discussed in this application can be alternated, modified, combined, or deleted. Furthermore, other steps, measures, and solutions in the various operations, methods, and processes discussed in this application can also be alternated, modified, rearranged, decomposed, combined, or deleted. Furthermore, steps, measures, and solutions in the prior art that are similar to those disclosed in this application can also be alternated, modified, rearranged, decomposed, combined, or deleted.

[0098] The above description is only a partial embodiment of this application. It should be noted that for those skilled in the art, several improvements and modifications can be made without departing from the principle of this application, and these improvements and modifications should also be considered within the scope of protection of this application.

Claims

1. A method for adaptive page scaling, characterized in that, include: In response to a page zoom event, determine the page zoom ratio for that event. The page zoom ratio is the ratio of the width of the original page container corresponding to the event to the width of the page viewport after the user zooms. The width of the page container is divided into equal parts according to a preset number of equal parts, and the product of the unit width obtained after division and the page scaling ratio is used as the pixel scaling unit value. The page elements in the original page are scaled proportionally in pixels according to the pixel scaling unit value so that the scaled page elements are displayed on the client side to fit the page viewport width value.

2. The page adaptive scaling method according to claim 1, characterized in that, The width of the page container is divided into equal parts according to a preset number of equal parts. The product of the resulting unit width and the page scaling ratio is used as the pixel scaling unit value, including: Based on the layout type of the original page, the target division rule is determined from a set of preset division rules; Based on the target equal division rule, the width value of the page container is divided into multiple non-uniform unit widths. Each non-uniform unit width is multiplied by the page scaling ratio to obtain a set of corresponding pixel scaling unit values, which are used to perform differentiated scaling on page elements in different layout areas of the original page.

3. The page adaptive scaling method according to claim 1, characterized in that, The page container width is divided into equal parts according to a preset number of equal parts. The product of the resulting unit width and the page scaling ratio is used as the pixel scaling unit value. The method also includes: The pre-trained visual weight model is invoked to perform visual heat area recognition on the original page, and the visual focus area and background area are determined. Based on the width of the page container and the preset focus division coefficient and background division coefficient, the unit width of the visual focus area and the background area is determined, wherein the focus division coefficient is greater than the background division coefficient. Multiplying the unit width by the page scaling ratio yields the pixel scaling unit values ​​for the visual focus area and the background area, which are then used to perform corresponding scaling on the page elements in the visual focus area and the background area.

4. The page adaptive scaling method according to claim 1, characterized in that, The page elements in the original page, measured in pixels, are scaled proportionally according to the pixel scaling unit value, including: Obtain the preset visual priority weights for each page element in the original page; Based on the visual priority weight, a scaling factor that is positively correlated with the visual priority weight is generated for each page element; The page elements are scaled based on the pixel scaling unit value and the scaling factor of each page element.

5. The page adaptive scaling method according to claim 1, characterized in that, The page elements in the original page, measured in pixels, are proportionally scaled according to the pixel scaling unit value so that the scaled page elements are adapted to the page viewport width value for display on the client side. This includes: The scaled page elements are subjected to edge sharpness detection to identify blurry page elements whose edge sharpness values ​​are less than a preset clarity threshold. Obtain the original pixel data of the blurred page element and its layout position information in the original page; Based on the original pixel data and the layout position information, the edge contours of the blurred page element are redrawn and filled based on vector paths, and the redrawn page element replaces the blurred page element for display.

6. The page adaptive scaling method according to claim 1, characterized in that, Before dividing the page container width value equally according to the preset display unit width, the process includes: Based on the page scaling ratio, determine whether there is a page block in the original page that matches the preset page structure template; When it exists, the adaptive layout rule corresponding to the page structure template is invoked to update the layout attributes of the page elements within the page block accordingly.

7. The page adaptive scaling method according to any one of claims 1 to 6, characterized in that, Also includes: Monitor the real-time changes in the page viewport width; When the real-time change value exceeds a preset threshold, the preset fractional part is dynamically adjusted based on the current page viewport width and the page container width, according to preset constraint rules.

8. A page adaptive scaling device, characterized in that, include: The scaling ratio determination module is configured to respond to page scaling events and determine the page scaling ratio for the event. The page scaling ratio is the ratio of the width of the original page container corresponding to the event to the width of the page viewport after the user's scaling operation. The unit value calculation module is configured to divide the width of the page container into equal parts according to a preset number of equal parts, and use the product of the unit width obtained after division and the page scaling ratio as the pixel scaling unit value. The element scaling module is configured to scale the page elements in the original page in pixels according to the pixel scaling unit value, so that the scaled page elements are adapted to the page viewport width value for display on the client.

9. A computer device comprising a central processing unit and a memory, characterized in that, The central processing unit is used to invoke and run a computer program stored in the memory to perform the steps of the method as described in any one of claims 1 to 7.

10. A computer-readable storage medium, characterized in that, It stores, in the form of computer-readable instructions, a computer program implemented according to any one of claims 1 to 7, which, when invoked by a computer, executes the steps included in the corresponding method.

Images