Web page zooming method, device, storage medium and electronic device

Abstract

This specification discloses a web page zooming method, device, storage medium and electronic device. The method first determines the web page to be zoomed, and the size transformation function for transforming the elements in the web page. Then, the size that can be obtained by transforming the elements in the web page through the size transformation function is determined as the initial predicted size. According to the initial predicted size and the target size, the size transformation function is rewritten so that the size that can be obtained by transforming the elements in the web page according to the rewritten size transformation function is the target size. The web page zoom ratio of the web page is determined, and the web page is zoomed according to the web page zoom ratio and the rewritten size transformation function. By rewriting the size transformation function that is not compatible with the Zoom method so that the rewritten size transformation function can output the target size, the web page can adapt to various devices, display the web page content normally, and improve the user experience.

Description

Technical Field

[0001] This specification relates to the field of computers, and in particular to a webpage zooming method, device, storage medium, and electronic device. Background Art

[0002] Because users use different types of devices, when displaying web pages, it is usually necessary to scale the web pages to present the content to users in the best way. Generally speaking, developers can design web pages that can adapt to multiple terminal versions during development.

[0003] However, in actual development, due to time and resource constraints, developers may only design a webpage for one terminal version. Subsequently, the existing webpage needs to be quickly modified to adapt to different browser window sizes. This is often done with the Zoom method in CSS (Cascading Style Sheets, CSS) 3. This method adjusts the element scale and changes the webpage display effect, enabling flexible layout and scaling of webpage elements. This ensures that the webpage displays properly on various devices, providing an optimal user experience.

[0004] However, there's an incompatibility between the Zoom method and the resize functions used to determine the position and size of various elements relative to the viewport. That is, after scaling elements on a page using the Zoom method, the size and position relative to the viewport returned by the resize functions may be inaccurate. This can cause elements displayed on the page to overlap, and elements to become misaligned when the user scrolls, resulting in a poor user experience.

[0005] Based on this, this specification provides a web page zooming method. Summary of the Invention

[0006] This specification provides a webpage zooming method, device, storage medium and electronic device to partially solve the above-mentioned problems existing in the prior art.

[0007] This manual adopts the following technical solutions:

[0008] This specification provides a webpage zooming method, the method comprising:

[0009] Determining the web page to be scaled and the size transformation function used to transform the elements in the web page;

[0010] Determining a size that can be obtained by transforming the element in the webpage using the size transformation function as an initial predicted size;

[0011] rewriting the size conversion function according to the initial predicted size and the target size so that a size obtained by converting the element in the webpage according to the rewritten size conversion function is the target size;

[0012] Determining a webpage zoom ratio of the webpage; and scaling the webpage according to the webpage zoom ratio and the rewritten size conversion function.

[0013] Optionally, determining the webpage to be scaled specifically includes:

[0014] In response to a user's web page access operation, obtaining a uniform resource locator of the web page;

[0015] determining, according to the uniform resource locator, whether the webpage is a webpage to be scaled;

[0016] If yes, determining the webpage accessed by the user as the webpage to be zoomed;

[0017] If not, the webpage accessed by the user is determined as a webpage that is not to be scaled, and a size conversion function provided by the browser where the webpage is located is called through a Proxy agent.

[0018] Optionally, judging whether the webpage is a webpage to be scaled according to the uniform resource locator specifically includes:

[0019] Determining whether the value of the preset flag in the uniform resource locator is a preset value;

[0020] If yes, determining the webpage accessed by the user as the webpage to be zoomed;

[0021] If not, the webpage accessed by the user is determined as a webpage that is not to be scaled.

[0022] Optionally, the size conversion function includes a getBoundingClientRec function;

[0023] Rewriting the size conversion function according to the initial predicted size and the target size specifically includes:

[0024] The getBoundingClientRect function is rewritten by a Proxy agent according to the initial predicted size and the target size, and the initial predicted size is negatively correlated with the target size.

[0025] Optionally, determining the webpage zoom ratio of the webpage specifically includes:

[0026] Obtaining the window width of the browser where the webpage is located;

[0027] When the browser window width is smaller than a first preset size, determining the webpage zoom ratio to be a first zoom ratio;

[0028] When the browser window width is greater than a second preset size, determining the webpage zoom ratio to be a second zoom ratio;

[0029] When the browser window width is not less than the first preset size and not greater than the second preset size, the webpage zoom ratio is determined according to a preset proportional relationship and the browser window width, wherein the preset proportional relationship includes a positive correlation between the webpage zoom ratio and the browser window width.

[0030] Optionally, scaling the webpage according to the webpage scaling ratio and the rewritten size conversion function specifically includes:

[0031] determining an initial size of each element in the web page;

[0032] For each element in the webpage, determining a first predicted size of the element according to the initial size of the element and the webpage zoom ratio by using the size conversion function;

[0033] Determining a second predicted size of the element according to the first predicted size and the webpage zoom ratio using the rewritten size conversion function;

[0034] The webpage is scaled using a Zoom method according to the second predicted size of each element in the webpage.

[0035] Optionally, the method further includes:

[0036] Determining whether the window width of the browser where the webpage is located has changed;

[0037] If yes, re-determine the zoom ratio of the web page;

[0038] The webpage is scaled according to the re-determined webpage scaling ratio and the rewritten size conversion function.

[0039] Optionally, determining whether the window width of the browser where the webpage is located has changed specifically includes:

[0040] By monitoring the size adjustment event, the window width of the browser where the web page is located is obtained in real time;

[0041] According to the browser window width obtained in real time, it is determined whether the window width of the browser where the webpage is located has changed.

[0042] This specification provides a webpage zooming device, the device comprising:

[0043] A web page determination module, used to determine the web page to be scaled, and a size transformation function for transforming elements in the web page;

[0044] a size determination module, configured to determine a size that can be obtained by transforming the element in the web page using the size transformation function, as an initial predicted size;

[0045] a rewriting module, configured to rewrite the size conversion function according to the initial predicted size and the target size, so that a size obtained by converting the element in the webpage according to the rewritten size conversion function is the target size;

[0046] The scaling module is configured to determine a webpage scaling ratio of the webpage and scale the webpage according to the webpage scaling ratio and the rewritten size conversion function.

[0047] Optionally, the web page determination module is specifically used to obtain the uniform resource locator of the web page in response to the user's web page access operation; determine whether the web page is a web page to be scaled based on the uniform resource locator; if so, determine the web page accessed by the user as a web page to be scaled; if not, determine the web page accessed by the user as a web page not to be scaled, and call the size conversion function provided by the browser where the web page is located through the Proxy agent.

[0048] Optionally, the web page determination module is specifically used to determine whether the value of the preset flag in the uniform resource locator is a preset value; if so, determine the web page visited by the user as a zoomed web page; if not, determine the web page visited by the user as a non-zoomed web page.

[0049] Optionally, the size transformation function includes a getBoundingClientRec function; the rewriting module is specifically used to rewrite the getBoundingClientRect function through a Proxy agent according to the initial predicted size and the target size, and the initial predicted size is negatively correlated with the target size.

[0050] Optionally, the zoom module is specifically used to obtain the window width of the browser where the web page is located; when the window width of the browser is less than a first preset size, the web page zoom ratio is determined to be a first zoom ratio; when the window width of the browser is greater than a second preset size, the web page zoom ratio is determined to be a second zoom ratio; when the window width of the browser is not less than the first preset size and not greater than the second preset size, the web page zoom ratio is determined according to a preset proportional relationship and the window width of the browser, the preset proportional relationship including a positive correlation between the web page zoom ratio and the window width of the browser.

[0051] Optionally, the scaling module is specifically used to determine the initial size of each element in the web page; for each element in the web page, determine a first predicted size of the element according to the initial size of the element and the web page scaling ratio through the size transformation function; determine a second predicted size of the element according to the first predicted size and the web page scaling ratio through the rewritten size transformation function; and scale the web page according to the second predicted sizes of each element in the web page through the Zoom method.

[0052] Optionally, the device further comprises:

[0053] The monitoring module is used to determine whether the window width of the browser where the webpage is located has changed; if so, to redetermine the webpage zoom ratio; and to scale the webpage according to the redetermined webpage zoom ratio and the rewritten size conversion function.

[0054] Optionally, the monitoring module is specifically configured to obtain the window width of the browser where the webpage is located in real time by monitoring size adjustment events; and determine whether the window width of the browser where the webpage is located has changed based on the browser window width obtained in real time.

[0055] This specification provides an electronic device, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements the webpage zooming method when executing the program.

[0056] At least one of the above technical solutions adopted in this specification can achieve the following beneficial effects:

[0057] It can be seen from the web page zooming method provided in this specification that the method first determines the web page to be zoomed, and the size transformation function used to transform the elements in the web page. Then, the size that can be obtained by transforming the elements in the web page through the size transformation function is determined as the initial predicted size. According to the initial predicted size and the target size, the size transformation function is rewritten so that the size that can be obtained by transforming the elements in the web page according to the rewritten size transformation function is the target size. The web page zoom ratio of the web page is determined, and the web page is zoomed according to the web page zoom ratio and the rewritten size transformation function. By rewriting the size transformation function that is not compatible with the Zoom method so that the rewritten size transformation function can output the target size, the web page can adapt to various devices, display the web page content normally, and improve the user experience. BRIEF DESCRIPTION OF THE DRAWINGS

[0058] The drawings described herein are used to provide a further understanding of this specification and constitute a part of this specification. The exemplary embodiments and descriptions of this specification are used to explain this specification and do not constitute an improper limitation of this specification. In the drawings:

[0059] Figure 1 A flowchart of a web page zooming method provided in this specification;

[0060] Figure 2 Another web page zoom flow chart provided for this manual;

[0061] Figure 3 A schematic diagram of a webpage zooming device provided in this specification;

[0062] Figure 4 This manual provides a corresponding Figure 1 Schematic diagram of the structure of the electronic equipment. DETAILED DESCRIPTION

[0063] To make the objectives, technical solutions, and advantages of this specification more clear, the following will clearly and completely describe the technical solutions of this specification in conjunction with the specific embodiments of this specification and the corresponding drawings. Obviously, the embodiments described are only part of the embodiments of this specification, not all of the embodiments. Based on the embodiments in this specification, all other embodiments obtained by ordinary technicians in this field without making any creative efforts are within the scope of protection of this specification.

[0064] The technical solutions provided by the embodiments of this specification are described in detail below with reference to the accompanying drawings.

[0065] Figure 1 This is a flowchart of a web page zooming method provided in this specification, which includes the following steps:

[0066] S100: Determine a web page to be scaled and a size transformation function for transforming elements in the web page.

[0067] During the web page design process, in order to make the web page adaptable to various display devices, such as computers, tablets, mobile phones and other terminals, multiple versions of the web page are usually designed. However, due to the limitations of development time and resources, developers may only design one version of the web page. In order to provide users with a better experience, the elements of the web page can be scaled using the Zoom method so that the content of the web page can be displayed normally to the user. However, due to the incompatibility between the Zoom method and the getBoundingClientRect function (size conversion function), problems such as overlapping of web page elements displayed to the user occur, which reduces the user experience. Therefore, this manual provides a web page scaling method. The execution subject of this manual can be a computing device that can rewrite the size conversion function, such as a server, a personal computer (PC), etc., or other electronic devices with computing capabilities. This manual says that there is no limitation on this. For the sake of convenience, this manual uses the server as the execution subject for description.

[0068] Figure 2 Another web page zoom flow chart provided for this manual, such as Figure 2 shown.

[0069] Before scaling a web page, the server first determines whether the web page needs to be scaled, that is, determines the web page to be scaled.

[0070] Specifically, in response to a user's web page access operation, the uniform resource locator of the web page is obtained. Based on the uniform resource locator, it is determined whether the web page is a resizable web page. If so, the web page accessed by the user is determined to be a resizable web page. If not, the web page accessed by the user is determined to be a non-resizable web page, and a resizing function provided by the browser where the web page is located is invoked through a proxy.

[0071] Of course, you can also call the resize function without using a proxy. The default method used by the browser that hosts the webpage is used to call the resize function without any modifications. This is because the webpage does not require scaling. Therefore, when displaying the webpage, there is no need to use the Zoom method. Therefore, there is no incompatibility between the Zoom method and the resize function. Consequently, the position and size of various elements obtained by the resize function relative to the viewport are more accurate, and there is no overlap or other issues with the webpage elements displayed to the user.

[0072] Even if you don't scale a web page, you can still use the Proxy proxy to call the resizing function provided by the browser where the web page is located. This is because the Proxy proxy can unify and manage all calls to the resizing function in a single location, making the code clearer and easier to maintain. If the resizing function needs to be processed in the future, it can be modified in the Proxy proxy without having to modify all places where the method is called. In addition, if a web page runs in multiple browser environments, some browser compatibility issues may occur. The Proxy proxy can handle the differences between different browsers in the Proxy proxy, so that the web page maintains consistent behavior in different environments.

[0073] After obtaining the webpage that needs to be scaled, a size transformation function for transforming elements in the webpage can be obtained. The size transformation function can be used for subsequent rewriting operations, wherein the size transformation function includes a getBoundingClientRec function.

[0074] S102: Determine a size that can be obtained by transforming the element in the webpage using the size transformation function, and use the size as an initial predicted size.

[0075] Generally speaking, servers don't have the authority to directly modify the various functions included in the browser, and forcible modifications may undermine the security and stability of the browser environment. However, because the browser's built-in resizing function doesn't match the Zoom method, the element's size and position relative to the browser window obtained by the resizing function are inaccurate. Therefore, the resizing function can be rewritten to calculate the correct element's result.

[0076] The server can then first determine the size that can be obtained by transforming the element on the web page using the resizing function, and use this as the initial predicted size. That is, before rewriting the resizing function, the server first calls the resizing function normally, and then rewrites the resizing function based on the calculation result of the resizing function.

[0077] S104: rewriting the size transformation function according to the initial predicted size and the target size, so that the size obtained by transforming the element in the web page according to the rewritten size transformation function is the target size.

[0078] Specifically, the server can rewrite the getBoundingClientRect function through the Proxy agent according to the initial predicted size and the target size, and the initial predicted size is negatively correlated with the target size. For example, if the web page zoom ratio is 0.5 and the element size is 100*100, then the target size is 50*50, but the size obtained by the non-rewritten getBoundingClientRect function is 200*200. Therefore, it can be seen that the initial predicted size is negatively correlated with the target size. If y1 is =ax, y1 is the target size, it can be verified by calculation that y2 = (1 / a)x, y2 is the initial predicted size obtained by the non-rewritten getBoundingClientRect function. Therefore, the relationship between the target size and the initial predicted size is y1 = x 2 / y2.

[0079] The getBoundingClientRect function is rewritten using a proxy because the proxy provides the ability to dynamically modify function behavior. It can dynamically decide whether to rewrite a function, how to rewrite it, and when to rewrite it based on different conditions or contexts. This flexibility allows the function's behavior to be adjusted dynamically based on needs without modification. Furthermore, this maintains the integrity of the original function, avoiding the risks and side effects that may arise from directly modifying the original function.

[0080] S106: Determine a webpage zoom ratio of the webpage; and zoom the webpage according to the webpage zoom ratio and the rewritten size conversion function.

[0081] In one or more embodiments of the present specification, the web page zoom ratio is related to the browser window width. Therefore, when determining the web page zoom ratio, the window width of the browser where the web page is located can be obtained first. Thereafter, the web page zoom ratio is determined based on the window width. Generally speaking, when the browser window width is less than a first preset size, the web page zoom ratio is determined as a first zoom ratio. When the browser window width is greater than a second preset size, the web page zoom ratio is determined as a second zoom ratio. When the browser window width is not less than the first preset size and not greater than the second preset size, the web page zoom ratio is determined based on a preset proportional relationship and the browser window width, and the preset proportional relationship includes a positive correlation between the web page zoom ratio and the browser window width. Among them, the first preset size, the first zoom ratio, the second preset size, the second zoom ratio and the preset proportional relationship can be set as needed, but the web page zoom ratio must be positively correlated with the window width.

[0082] For example, if the first preset size is 1280 and the second preset size is 1370, then the first zoom ratio may be 0.8 and the second zoom ratio may be 1. That is, when the browser window width is less than 1280, the webpage zoom ratio is 0.8; when the browser window width is greater than 1370, the webpage zoom ratio is 1; and when the browser window width is not less than 1280 and not greater than 1370, the wider the window width, the larger the webpage zoom ratio.

[0083] Afterwards, the server can use CSS variables to call the Zoom method to scale the web page according to the zoom ratio of the web page and the rewritten size conversion function.

[0084] Specifically, the server first determines the initial size of each element in the webpage. For each element in the webpage, the server uses the size conversion function to determine a first predicted size of the element based on the initial size of the element and the zoom ratio of the webpage. The server uses the rewritten size conversion function to determine a second predicted size of the element based on the first predicted size and the zoom ratio of the webpage. The webpage is then scaled using the Zoom method based on the second predicted sizes of each element in the webpage.

[0085] For example, if the initial size of an element is 100*100 and the webpage zoom ratio is 0.5, the first predicted size is 200. Based on the rewritten size conversion function and the first predicted size, the second predicted size is determined to be 50. Then, the elements in the webpage can be scaled using the Zoom method based on the second predicted size of each element in the webpage to obtain the scaled elements, thus completing the scaling of the webpage.

[0086] based on Figure 1 The web page zooming method shown in the figure first determines the web page to be zoomed and the size transformation function used to transform the elements in the web page. Then, the size that can be obtained by transforming the elements in the web page through the size transformation function is determined as the initial predicted size. According to the initial predicted size and the target size, the size transformation function is rewritten so that the size that can be obtained by transforming the elements in the web page according to the rewritten size transformation function is the target size. The web page zoom ratio of the web page is determined, and the web page is zoomed according to the web page zoom ratio and the rewritten size transformation function. By rewriting the size transformation function that is not compatible with the Zoom method so that the rewritten size transformation function can output the target size, the web page can adapt to various devices and display the web page content normally, thereby improving the user experience.

[0087] For step S100, when determining the web page to be scaled, the server can determine whether the value of the preset flag in the uniform resource locator is a preset value. If so, the web page visited by the user is determined to be a web page to be scaled; if not, the web page visited by the user is determined to be a web page not to be scaled.

[0088] Because browsers always attach a user-agent string to Hypertext Transfer Protocol (HTTP) requests, which contains information about the browser and operating system, the server can parse the user-agent string in the HTTP request header to determine the device type, operating system, browser version, and other information displaying the webpage. Based on the device type, the server can determine whether the webpage is a zoomable webpage.

[0089] That is, in response to a user's web page access operation, the server receives an HTTP request sent by the browser containing the web page, determines a user agent string in the HTTP request, and determines whether the web page is a zoomable web page based on the user agent string. Specifically, it determines whether the user agent string includes a preset device type. If so, the web page accessed by the user is determined to be a zoomable web page. If not, the web page accessed by the user is determined to be a non-zoomable web page. The preset device types include Mobile (mobile phone), Tablet (tablet), etc., which can be set as needed.

[0090] It should be noted that the identifier of the preset device type may be related to the version of the webpage designed by the developer. For example, if the developer specifies that the webpage is suitable for desktops during design, then the preset device type may include other display devices besides desktops, such as mobile phones and tablets. This is because the webpage is initially designed for desktops. Therefore, when the webpage is displayed on a desktop, there is no issue with the Zoom and resize functions being incompatible, and there is no need to determine whether the webpage needs to be scaled.

[0091] A locator set can also be pre-set, which includes the uniform resource locators of all web pages that need to be scaled. Then, after obtaining the uniform resource locator of the web page clicked by the user, it is determined whether the uniform resource locator is in the preset locator set. If so, the web page visited by the user is determined to be a web page to be scaled. If not, the web page visited by the user is determined to be a web page not to be scaled. Scaling the web page in the current step means that the web page needs to be scaled, rather than directly scaling the web page. In other words, if it is determined that the network element needs to be scaled, steps S102 to S106 need to be executed to complete the scaling of the web page.

[0092] The window size of the browser where the webpage is located can also be obtained, and based on the window size, whether the webpage is a zoomable webpage is determined. Specifically, when the window size is not a preset window size, the webpage accessed by the user is determined to be a zoomable webpage. The preset window size can be set as needed and this manual does not impose any restrictions on this.

[0093] Regarding step S102, the initial predicted size determined during step S102 is not the actual size used. Step S102 is still preparing the parameters required by the rewriting function, rather than scaling using the unrewritten resizing function. For example, if the webpage scale is 0.5, the initial element size is 100*100, and the unrewritten resizing function is y1=ax, where a is the webpage scale and x is the side length of the element, then the initial predicted size is y1, rather than the 50 obtained by substituting a=0.5 and x=100 into y1.

[0094] Regarding step S104, the server can also create a wrapper function without using a proxy during the rewrite. This wrapper function calls the browser's native getBoundingClientRect function and rewrites it based on the initial predicted size and the target size. This method allows additional logic to be added to the wrapper function without directly modifying the original getBoundingClientRect function.

[0095] In addition, the server may first execute steps S102 to S104 and then execute step S100. In other words, the size conversion function is rewritten in advance, and then it is determined whether the webpage needs to be scaled. If so, step S106 is executed. By rewriting the function in advance, the scaling efficiency can be further improved, thereby enhancing the user experience.

[0096] After executing step S106, in order to scale the web page in time and improve the user experience, the server needs to determine the window width transformation in real time so that the web page content is displayed to the user in the best display manner.

[0097] Specifically, the server determines whether the window width of the browser containing the webpage has changed. If so, it re-determines the webpage zoom ratio and scales the webpage based on the re-determined webpage zoom ratio and the rewritten size conversion function. Because the size conversion function is rewritten by changing parameters in this specification, the rewritten size conversion function already knows the relationship between the target size and the initial predicted size. Therefore, after adjusting the webpage zoom ratio, rescaling does not require rewriting the size conversion function, thereby improving webpage scaling efficiency.

[0098] When determining whether the window width has changed, the server can monitor the browser's resize event in real time to determine whether the window width has changed. That is, by monitoring the resize event, the server can obtain the window width of the browser where the webpage is located in real time, and determine whether the window width of the browser where the webpage is located has changed based on the browser's window width obtained in real time.

[0099] Furthermore, the Zoom method is incompatible with the getBoundingClientRect function, which often manifests itself in the display of components in external libraries like element-ui. For example, the el-dropdown and el-tooltip components may appear misaligned when scrolling, as well as when not scrolling. When elements on a page are scaled using the Zoom method, their visual appearance changes, but their actual position and size may not be updated accordingly. Consequently, when the server calculates the position of components like el-dropdown and el-tooltip, it may use the actual position rather than the visual position, resulting in misalignment. The actual position refers to the actual position within the document flow, while the visual position refers to the position relative to the viewport as obtained using the getBoundingClientRect function. Similarly, when a page is scrolled, the server recalculates the position of elements, but these calculations typically do not account for the effects of zoom. Therefore, if a page scaled using the Zoom method exhibits misalignment when scrolling, it may be because the recalculation of the element's position failed to account for the effects of zoom, causing the misalignment.

[0100] In order to avoid display problems of components in external component libraries, when the server uses Proxy to rewrite the getBoundingClientRect function, it also needs to correct the display problems of components in the component library. For example, the server creates a proxy object getBoundingClientRectProxy through Proxy, and intercepts the call of the original getBoundingClientRect function in the apply method. In the interception function, it is determined whether the current element contains the component class name of the preset component library, where the component class name of the preset component library includes at least one of el-dropdown and el-tooltip. If so, the logic of misalignment correction is executed, including recalculating the position. Specifically, the server can obtain the width and height of the el-dropdown or el-tooltip component, and perform position correction based on the width and height. This ensures that the corrected position not only takes into account the position of the element, but also the size of the component itself, so as to achieve a more accurate misalignment correction effect.

[0101] It should be noted that this application does not limit the type of external component library. The type of external component library is related to the display problem of the component in the component library being corrected. For example, if the display problem of the component in component library A is being corrected, then when determining whether the current element includes the component class name in component library A, if the display problem of the component in component library B is being corrected, then when determining whether the current element includes the component class name in component library B,

[0102] In order to improve the efficiency of web page design for developers, the web page scaling method provided in this manual can also be integrated into an NPM (Node Package Manager packages, NPM) package, which can then be directly called to implement function rewriting for web page scaling.

[0103] The above is one or more implementation methods of this specification, based on Figure 1 The webpage zooming method shown in FIG. 1 is a flow chart, and this specification also provides a corresponding webpage zooming device, such as Figure 3 shown.

[0104] Figure 3 A schematic diagram of a webpage zooming device provided in this specification includes:

[0105] A web page determination module 300 is used to determine a web page to be scaled, and a size transformation function for transforming elements in the web page;

[0106] A size determination module 302 is configured to determine a size that can be obtained by transforming the element in the web page using the size transformation function, as an initial predicted size;

[0107] a rewriting module 304 configured to rewrite the size conversion function according to the initial predicted size and the target size, so that a size obtained by converting the element in the webpage according to the rewritten size conversion function is the target size;

[0108] The scaling module 306 is configured to determine a webpage scaling ratio of the webpage and scale the webpage according to the webpage scaling ratio and the rewritten size conversion function.

[0109] Optionally, the web page determination module 300 is specifically used to obtain the uniform resource locator of the web page in response to the user's web page access operation; determine whether the web page is a web page to be scaled based on the uniform resource locator; if so, determine the web page accessed by the user as a web page to be scaled; if not, determine the web page accessed by the user as a web page not to be scaled, and call the size conversion function provided by the browser where the web page is located through the Proxy agent.

[0110] Optionally, the web page determination module 300 is specifically used to determine whether the value of the preset flag in the uniform resource locator is a preset value; if so, determine the web page visited by the user as a zoomed web page; if not, determine the web page visited by the user as a non-zoomed web page.

[0111] Optionally, the size transformation function includes a getBoundingClientRec function; the rewriting module 304 is specifically used to rewrite the getBoundingClientRect function through a Proxy agent according to the initial predicted size and the target size, and the initial predicted size is negatively correlated with the target size.

[0112] Optionally, the zoom module 306 is specifically used to obtain the window width of the browser where the web page is located; when the window width of the browser is less than a first preset size, the web page zoom ratio is determined to be a first zoom ratio; when the window width of the browser is greater than a second preset size, the web page zoom ratio is determined to be a second zoom ratio; when the window width of the browser is not less than the first preset size and not greater than the second preset size, the web page zoom ratio is determined according to a preset proportional relationship and the window width of the browser, wherein the preset proportional relationship includes a positive correlation between the web page zoom ratio and the window width of the browser.

[0113] Optionally, the scaling module 306 is specifically configured to determine an initial size of each element in the web page; for each element in the web page, determine a first predicted size of the element according to the initial size of the element and the scaling ratio of the web page using the size conversion function; determine a second predicted size of the element according to the first predicted size and the scaling ratio of the web page using the rewritten size conversion function; and scale the web page using a Zoom method based on the second predicted sizes of each element in the web page.

[0114] Optionally, the device further comprises:

[0115] The monitoring module 308 is configured to determine whether the window width of the browser where the webpage is located has changed; if so, to redetermine the webpage zoom ratio; and to scale the webpage according to the redetermined webpage zoom ratio and the rewritten size conversion function.

[0116] Optionally, the monitoring module 308 is specifically configured to obtain the window width of the browser where the webpage is located in real time by monitoring size adjustment events; and determine whether the window width of the browser where the webpage is located has changed based on the browser window width obtained in real time.

[0117] This specification provides a computer-readable storage medium, which stores a computer program. When the computer program is executed by a processor, the webpage zooming method described above is implemented.

[0118] This specification also provides a computer-readable storage medium, which stores a computer program that can be used to execute the above Figure 1 Provides a web page zoom method.

[0119] This manual also provides Figure 4 The one shown corresponds to Figure 1 Schematic diagram of the structure of the electronic equipment. Figure 4 As shown, at the hardware level, the electronic device includes a processor, an internal bus, a network interface, a memory, and a non-volatile memory, and may also include other hardware required for the business. The processor reads the corresponding computer program from the non-volatile memory into the memory and then runs it to achieve the above Figure 1 The web page zoom method.

[0120] Of course, in addition to software implementation, this specification does not exclude other implementation methods, such as logic devices or a combination of software and hardware, etc. That is to say, the execution subject of the following processing flow is not limited to each logic unit, but can also be hardware or logic devices.

[0121] In the 1990s, technological improvements could be clearly distinguished as either hardware improvements (for example, improvements to circuit structures like diodes, transistors, and switches) or software improvements (improvements to process flows). However, with the advancement of technology, many process flow improvements today can now be considered direct improvements to hardware circuit structures. Designers almost always create the corresponding hardware circuit structure by programming the improved process flow into the hardware circuit. Therefore, it cannot be said that a process flow improvement cannot be implemented using hardware modules. For example, a programmable logic device (PLD), such as a field programmable gate array (FPGA), is an integrated circuit whose logical function is determined by user programming. Designers can "integrate" a digital system on a PLD through their own programming, without having to hire a chip manufacturer to design and manufacture a dedicated integrated circuit chip. Moreover, nowadays, instead of manually fabricating integrated circuit chips, this programming is mostly done using "logic compiler" software. This is similar to the software compiler used when developing programs. Before compilation, the original code must also be written in a specific programming language, called a hardware description language (HDL). There is not just one HDL, but many, such as ABEL (Advanced Boolean Expression Language), AHDL (Altera Hardware Description Language), Confluence, CUPL (Cornell University Programming Language), HDCal, JHDL (Java Hardware Description Language), Lava, Lola, MyHDL, PALASM, RHDL (Ruby Hardware Description Language), etc. The most commonly used ones are VHDL (Very-High-Speed ​​Integrated Circuit Hardware Description Language) and Verilog. Those skilled in the art will also understand that by simply programming the method flow in one of these hardware description languages ​​and then programming it into an integrated circuit, a hardware circuit that implements the logic method flow can be easily obtained.

[0122] The controller can be implemented in any suitable manner. For example, the controller can take the form of a microprocessor or processor and a computer-readable medium storing computer-readable program code (e.g., software or firmware) executable by the (micro)processor, logic gates, switches, application-specific integrated circuits (ASICs), programmable logic controllers, and embedded microcontrollers. Examples of controllers include, but are not limited to, the following microcontrollers: ARC 625D, Atmel AT91SAM, Microchip PIC18F26K20, and Silicone Labs C8051F320. The memory controller can also be implemented as part of the control logic of the memory. Those skilled in the art will also know that in addition to implementing the controller in a purely computer-readable program code format, the controller can be implemented in the form of logic gates, switches, application-specific integrated circuits, programmable logic controllers, and embedded microcontrollers by logically programming the method steps. Therefore, such a controller can be considered a hardware component, and the devices included therein for implementing various functions can also be considered as structures within the hardware component. Or even, the devices for implementing various functions can be considered as both software modules that implement the method and structures within the hardware component.

[0123] The systems, devices, modules, or units described in the above embodiments may be implemented by computer chips or entities, or by products having certain functions. A typical implementation device is a computer. Specifically, the computer may be, for example, a personal computer, a laptop computer, a cellular phone, a camera phone, a smartphone, a personal digital assistant, a media player, a navigation device, an email device, a game console, a tablet computer, a wearable device, or a combination of any of these devices.

[0124] For the convenience of description, the above devices are described as being divided into various units according to their functions. Of course, when implementing this specification, the functions of each unit can be implemented in the same or multiple software and / or hardware.

[0125] Those skilled in the art will appreciate that the embodiments of this specification may be provided as methods, systems, or computer program products. Therefore, this specification may take the form of a complete hardware embodiment, a complete software embodiment, or an embodiment combining software and hardware. Furthermore, this specification may take the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to magnetic disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0126] This specification is described with reference to the flowcharts and / or block diagrams of the methods, devices (systems), and computer program products according to the embodiments of this specification. It should be understood that each process and / or box in the flowchart and / or block diagram, as well as the combination of processes and / or boxes in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing device to produce a machine, so that the instructions executed by the processor of the computer or other programmable data processing device generate instructions for implementing the processes in the flowchart and / or block diagram. Figure 1 a process or multiple processes and / or boxes Figure 1 A device that provides the functions specified in a block or multiple blocks.

[0127] These computer program instructions may also be stored in a computer readable memory that can direct a computer or other programmable data processing device to work in a specific manner, so that the instructions stored in the computer readable memory produce an article of manufacture comprising an instruction device, which implements the process Figure 1 a process or multiple processes and / or boxes Figure 1 The function specified in one or more boxes.

[0128] These computer program instructions can also be loaded onto a computer or other programmable data processing device so that a series of operational steps are executed on the computer or other programmable device to produce a computer-implemented process, thereby providing the instructions executed on the computer or other programmable device for implementing the process. Figure 1 a process or multiple processes and / or boxes Figure 1 A step that specifies a function in one or more boxes.

[0129] In a typical configuration, a computing device includes one or more processors (first chiplets), input / output interfaces, network interfaces, and memory.

[0130] Memory may include non-permanent storage in a computer-readable medium, random access memory (RAM) and / or non-volatile memory in the form of read-only memory (ROM) or flash RAM. Memory is an example of a computer-readable medium.

[0131] Computer-readable media includes permanent and non-permanent, removable and non-removable media that can be implemented by any method or technology to store information. The information can be computer-readable instructions, data structures, program modules or other data. Examples of computer storage media include, but are not limited to, phase change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technology, compact disc read-only memory (CD-ROM), digital versatile disc (DVD) or other optical storage, magnetic cassettes, magnetic tape, magnetic disk storage or other magnetic storage devices or any other non-transmission media that can be used to store information that can be accessed by a computing device. As defined herein, computer-readable media does not include transitory computer-readable media (transitory media), such as modulated data signals and carrier waves.

[0132] It should also be noted that the terms "comprises," "includes," or any other variations thereof are intended to encompass non-exclusive inclusion, such that a process, method, commodity, or apparatus that includes a series of elements includes not only those elements but also other elements not explicitly listed, or includes elements inherent to such process, method, commodity, or apparatus. In the absence of further limitations, an element defined by the phrase "comprises a ..." does not exclude the presence of other identical elements in the process, method, commodity, or apparatus that includes the element.

[0133] Those skilled in the art will appreciate that the embodiments of this specification may be provided as methods, systems, or computer program products. Thus, this specification may take the form of an entirely hardware embodiment, an entirely software embodiment, or an embodiment combining software and hardware. Furthermore, this specification may take the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to magnetic disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0134] This specification may be described in the general context of computer-executable instructions, such as program modules, executed by a computer. Generally, program modules include routines, programs, objects, components, data structures, and the like that perform specific tasks or implement specific abstract data types. This specification may also be practiced in distributed computing environments where tasks are performed by remote processing devices connected through a communications network. In a distributed computing environment, program modules may be located in both local and remote computer storage media, including storage devices.

[0135] The various embodiments in this specification are described in a progressive manner. Similar parts between the various embodiments can be referred to in conjunction with each other. Each embodiment focuses on the differences between the other embodiments. In particular, the system embodiments are generally similar to the method embodiments, so the description is relatively simple. For relevant parts, refer to the description of the method embodiments.

[0136] The foregoing is merely an example of the present invention and is not intended to limit the present invention. Various modifications and variations are possible for those skilled in the art. Any modifications, equivalent substitutions, or improvements made within the spirit and principles of the present invention are intended to be included within the scope of the claims of the present invention.

Claims

1. A webpage zooming method, characterized in that: The method comprises: Determining a web page to be scaled, and a size transformation function for transforming elements in the web page, wherein the size transformation function is incompatible with the Zoom method; Determining a size that can be obtained by transforming the element in the webpage using the size transformation function as an initial predicted size; rewriting the size conversion function according to the initial predicted size and the target size so that a size obtained by converting the element in the webpage according to the rewritten size conversion function is the target size; Determining a webpage zoom ratio of the webpage; and scaling the webpage according to the webpage zoom ratio and the rewritten size conversion function; The step of scaling the webpage according to the webpage scaling ratio and the rewritten size conversion function specifically includes: determining an initial size of each element in the web page; For each element in the webpage, determining a first predicted size of the element according to the initial size of the element and the webpage zoom ratio by using the size conversion function; Determining a second predicted size of the element according to the first predicted size and the webpage zoom ratio using the rewritten size conversion function; The webpage is scaled using a Zoom method according to the second predicted size of each element in the webpage.

2. The method according to claim 1, wherein Determine the web pages to be scaled, including: In response to a user's web page access operation, obtaining a uniform resource locator of the web page; determining, according to the uniform resource locator, whether the webpage is a webpage to be scaled; If yes, determining the webpage accessed by the user as the webpage to be zoomed; If not, the webpage accessed by the user is determined as a webpage that is not to be scaled, and a size conversion function provided by the browser where the webpage is located is called through a Proxy agent.

3. The method according to claim 2, wherein Determining whether the webpage is a webpage to be scaled according to the uniform resource locator specifically includes: Determining whether the value of the preset flag in the uniform resource locator is a preset value; If yes, determining the webpage accessed by the user as the webpage to be zoomed; If not, the webpage accessed by the user is determined as a webpage that is not to be scaled.

4. The method according to claim 1, wherein The size conversion function includes a getBoundingClientRect function; Rewriting the size conversion function according to the initial predicted size and the target size specifically includes: The getBoundingClientRect function is rewritten by a Proxy agent according to the initial predicted size and the target size, and the initial predicted size is negatively correlated with the target size.

5. The method according to claim 1, wherein Determining a webpage zoom ratio of the webpage specifically includes: Obtaining the window width of the browser where the webpage is located; When the browser window width is smaller than a first preset size, determining the webpage zoom ratio to be a first zoom ratio; When the browser window width is greater than a second preset size, determining the webpage zoom ratio to be a second zoom ratio; When the browser window width is not less than the first preset size and not greater than the second preset size, the webpage zoom ratio is determined according to a preset proportional relationship and the browser window width, wherein the preset proportional relationship includes a positive correlation between the webpage zoom ratio and the browser window width.

6. The method according to claim 1, wherein The method further comprises: Determining whether the window width of the browser where the webpage is located has changed; If yes, re-determine the zoom ratio of the web page; The webpage is scaled according to the re-determined webpage scaling ratio and the rewritten size conversion function.

7. The method according to claim 6, wherein Determining whether the window width of the browser where the webpage is located has changed specifically includes: By monitoring the size adjustment event, the window width of the browser where the web page is located is obtained in real time; According to the browser window width obtained in real time, it is determined whether the window width of the browser where the webpage is located has changed.

8. A computer-readable storage medium, characterized in that The storage medium stores a computer program, and when the computer program is executed by a processor, the method according to any one of claims 1 to 7 is implemented.

9. An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein: When the processor executes the program, the method according to any one of claims 1 to 7 is implemented.

Images