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

By creating inline frames between the browser and the webpage, it automatically adjusts the viewport size to resolve inconsistent page display issues, ensuring that elements are not misaligned, and providing a convenient cross-device page display solution.

CN115221441BActive Publication Date: 2026-07-21BEIJING ZITIAO NETWORK TECH CO LTD
View PDF 1 Cites 0 Cited by

Patent Information

Authority / Receiving Office
CN · China
Patent Type
Patents(China)
Current Assignee / Owner
BEIJING ZITIAO NETWORK TECH CO LTD
Filing Date
2022-07-27
Publication Date
2026-07-21

AI Technical Summary

Technical Problem

When viewing a page on different devices, the page may not be fully displayed due to differences in device size and resolution. Users need to manually zoom in and out, and elements may be misaligned, making the process cumbersome.

Method used

By obtaining the viewport size information of the current browser and the target webpage, an inline frame is created, and its physical address is changed to the physical address of the target webpage. The viewport size information of the inline frame is adjusted to generate the target viewport, and the page data display is automatically adjusted.

Benefits of technology

It enables automatic adjustment of page proportions on different devices without requiring manual user operation, avoiding element misalignment and improving operational efficiency and consistency.

✦ Generated by Eureka AI based on patent content.

Smart Images

  • Figure CN115221441B_ABST
    Figure CN115221441B_ABST
Patent Text Reader

Abstract

The application provides a page display adjustment method and device, an electronic device and a storage medium, wherein the method comprises: obtaining first viewport size information of a current browser, wherein the first viewport size information is used to represent a displayable area corresponding to the current browser when displaying a target webpage; creating and calling an inline frame in a case where it is determined that the viewport height of the first viewport size information is inconsistent with the viewport height of the target webpage; changing the physical address of the inline frame to the physical address of the target webpage, so that the page data of the target webpage is displayed in the inline frame; adjusting the viewport size information of the inline frame by a preset multiple, generating a target viewport, and displaying the page data of the target webpage in the target viewport. Through the application, the problem that manual adjustment of page display content is prone to element misplacement and is complicated in the related art is solved.
Need to check novelty before this filing date? Find Prior Art

Description

Technical Field

[0001] This application relates to the field of computer technology, and in particular to a method and apparatus for adjusting page display, electronic devices, and storage media. Background Technology

[0002] Currently, when viewing information on web pages, such as recruitment systems, different users experience variations in the amount of information displayed on the same screen due to differences in device size and resolution. This is especially true when the device screen and browser window size are not identical, leading to situations where the information cannot be fully viewed. For example, when the device screen is smaller than the browser window, the usual solution is for the user to manually zoom in and out of the browser. This is cumbersome, prone to element misalignment, and not all users know how to perform the zooming operation.

[0003] Therefore, the relevant technologies suffer from the problem that manually adjusting the page display can easily lead to element misalignment and is cumbersome. Summary of the Invention

[0004] This application provides a method, apparatus, electronic device, and storage medium for adjusting page display, to at least solve the problems in the related art where manual adjustment of page display easily leads to element misalignment and is cumbersome.

[0005] According to one aspect of the embodiments of this application, a method for adjusting page display is provided, the method comprising:

[0006] Obtain the first viewport size information of the current browser, wherein the first viewport size information is used to characterize the displayable area corresponding to the current browser when displaying the target webpage;

[0007] If the viewport height of the first viewport size information is inconsistent with the viewport height of the target webpage, an inline frame is created and invoked.

[0008] Change the physical address of the inline frame to the physical address of the target webpage, so that the page data of the target webpage is displayed in the inline frame;

[0009] The viewport size information of the inline frame is adjusted proportionally by a preset multiple to generate a target viewport, and the page data of the target webpage is displayed within the target viewport.

[0010] According to another aspect of the embodiments of this application, a page display adjustment device is also provided, the device comprising:

[0011] The first acquisition module is used to acquire the first viewport size information of the current browser, wherein the first viewport size information is used to characterize the displayable area corresponding to the current browser when displaying the target webpage;

[0012] The calling module is used to create and call an inline frame when the viewport height of the first viewport size information is inconsistent with the viewport height of the target webpage.

[0013] The modification module is used to change the physical address of the inline frame to the physical address of the target webpage, so that the page data of the target webpage is displayed in the inline frame;

[0014] The first generation module is used to proportionally adjust the viewport size information of the inline frame by a preset multiple to generate a target viewport, and display the page data of the target webpage within the target viewport.

[0015] Optionally, the device further includes:

[0016] The second acquisition module is used to acquire multiple preset requirement schemes before the viewport size information of the inline frame is proportionally adjusted by a preset multiple.

[0017] The second generation module is used to generate the corresponding preset multiple when the preset conditions set by the preset requirement scheme are met, so that after the viewport size information of the inline frame is adjusted proportionally by the preset multiple, the viewport size information of the inline frame can cover the page data of the target webpage.

[0018] Optionally, the calling module includes:

[0019] The calling unit is used to create and call the inline frame when the viewport height of the first viewport size information is determined to be less than or greater than a preset threshold, wherein the preset threshold is the value corresponding to when the viewport height of the target webpage is greater than or equal to a preset height.

[0020] Optionally, if the viewport height of the first viewport size information is determined to be less than a preset threshold, the first generation module includes:

[0021] The first obtaining unit is used to set the viewport size information of the inline frame to a first preset multiple of the first viewport size information to obtain the first viewport size information to be adjusted, wherein the displayable area of ​​the target webpage displayed by the first viewport size information to be adjusted is larger than the displayable area displayed by the current browser.

[0022] The second obtaining unit is used to reduce the first viewport size information to be adjusted by a second preset factor by a proportional ratio using webpage transformation technology to obtain the second viewport size information, determine the second viewport, and display the page data of the target webpage in the second viewport, wherein the second viewport size information coincides with the first viewport size information.

[0023] Optionally, if the viewport height of the first viewport size information is determined to be greater than a preset threshold, the first generation module includes:

[0024] The third obtaining unit is used to set the viewport size information of the inline frame to a third preset multiple of the first viewport size information to obtain the second viewport size information to be adjusted, wherein the displayable area of ​​the target webpage displayed by the second viewport size information to be adjusted is smaller than the displayable area displayed by the current browser.

[0025] The fourth obtaining unit is used to enlarge the second viewport size information to be adjusted by a fourth preset factor using web page transformation technology to obtain the third viewport size information, determine the third viewport, and display the page data of the target web page in the third viewport, wherein the third viewport size information coincides with the first viewport size information.

[0026] Optionally, the device further includes:

[0027] An insertion module is used to insert the inline frame into the target webpage before changing the physical address of the inline frame to the physical address of the target webpage currently being viewed by the browser;

[0028] The third acquisition module is used to acquire the physical address of the target webpage.

[0029] Optionally, the device further includes:

[0030] The monitoring module is used to monitor object change commands using the inline framework;

[0031] The update module is used to update the object in the target viewport when it receives the object change instruction sent by the inline frame through the target communication mechanism.

[0032] According to another aspect of the embodiments of this application, an electronic device is also provided, including a processor, a communication interface, a memory, and a communication bus, wherein the processor, the communication interface, and the memory communicate with each other through the communication bus; wherein the memory is used to store a computer program; and the processor is used to execute the method steps of any of the above embodiments by running the computer program stored in the memory.

[0033] According to another aspect of the embodiments of this application, a computer-readable storage medium is also provided, wherein a computer program is stored therein, wherein the computer program is configured to execute the method steps of any of the above embodiments when running.

[0034] In this embodiment, an inline frame is used to adjust the displayed content of the page. This is achieved by obtaining the first viewport size information of the current browser, which represents the displayable area corresponding to the target webpage displayed by the current browser. If the viewport height of the first viewport size information is inconsistent with the viewport height of the target webpage, an inline frame is created and invoked. The physical address of the inline frame is changed to the physical address of the target webpage, so that the page data of the target webpage is displayed within the inline frame. The viewport size information of the inline frame is proportionally adjusted by a preset multiple to generate a target viewport, and the page data of the target webpage is displayed within the target viewport. Because this application compares the viewport height of the current browser's first viewport size information with the viewport height of the target webpage, and if they are inconsistent, creates and calls an inline frame, setting the physical address of the inline frame to be the same as the physical address of the target webpage, so that the inline frame can obtain the complete webpage data of the target webpage, and then proportionally adjusts the viewport size information of the inline frame to obtain the target viewport generated by the adjusted inline frame, the page data of the target webpage is displayed in this target viewport. In this way, the page data adjustment of the target webpage in the inline frame is independent of the original target webpage adjustment, ensuring that the elements are not misaligned during the page adjustment process. At the same time, every time the user starts the application, a comparison between the browser window resolution and the screen display is initiated, and the ratio is automatically adjusted to a suitable one without the need for manual operation by the user, saving operation process, and ensuring that users can view and operate the same content on different devices as much as possible. Thus, it solves the problems of element misalignment and cumbersome operation that easily occur when manually adjusting the page display in related technologies. Attached Figure Description

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

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

[0037] Figure 1 This is a schematic diagram of the hardware environment for an optional page display adjustment method according to an embodiment of the present invention;

[0038] Figure 2 This is a flowchart illustrating an optional page display adjustment method according to an embodiment of this application;

[0039] Figure 3 This is a schematic diagram of an optional preset requirement scheme according to an embodiment of this application;

[0040] Figure 4 This is a structural block diagram of an optional page display adjustment device according to an embodiment of this application;

[0041] Figure 5 This is a structural block diagram of an optional electronic device according to an embodiment of this application. Detailed Implementation

[0042] To enable those skilled in the art to better understand the present application, the technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present application, and not all embodiments. Based on the embodiments in the present application, all other embodiments obtained by those of ordinary skill in the art without creative effort should fall within the scope of protection of the present application.

[0043] It should be noted that the terms "first," "second," etc., in the specification, claims, and accompanying drawings of this application are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence. It should be understood that such data can be interchanged where appropriate so that the embodiments of this application described herein can be implemented in orders other than those illustrated or described herein. Furthermore, the terms "comprising" and "having," and any variations thereof, are intended to cover non-exclusive inclusion; for example, a process, method, system, product, or apparatus that comprises a series of steps or units is not necessarily limited to those steps or units explicitly listed, but may include other steps or units not explicitly listed or inherent to such processes, methods, products, or apparatus.

[0044] According to one aspect of the embodiments of this application, a method for adjusting page display is provided. Optionally, in this embodiment, the above-described method for adjusting page display can be applied to, for example... Figure 1 In the hardware environment shown. For example... Figure 1As shown, terminal 102 may include memory 104, processor 106, and display 108 (optional component). Terminal 102 can communicate with server 112 via network 110. Server 112 can provide services (such as application services) to the terminal or clients installed on the terminal. Database 114 can be set up on or independently of server 112 to provide data storage services to server 112. In addition, server 112 may run a processing engine 116, which can be used to execute the steps performed by server 112.

[0045] Optionally, terminal 102 may be, but is not limited to, a terminal capable of computing data, such as a mobile terminal (e.g., mobile phone, tablet computer), laptop computer, PC (Personal Computer), etc. The aforementioned network may include, but is not limited to, a wireless network or a wired network. The wireless network includes Bluetooth, Wi-Fi (Wireless Fidelity), and other networks that enable wireless communication. The aforementioned wired network may include, but is not limited to, a wide area network (WAN), a metropolitan area network (MAN), and a local area network (LAN). The aforementioned server 112 may include, but is not limited to, any hardware device capable of computing.

[0046] Furthermore, in this embodiment, the adjustment method shown on the page can also be applied to, but is not limited to, a powerful independent processing device without data interaction. For example, the processing device can be, but is not limited to, a powerful terminal device; that is, the various operations in the adjustment method shown on the page can be integrated into a single independent processing device. The above is merely an example, and this embodiment does not impose any limitations on it.

[0047] Optionally, in this embodiment, the page display adjustment method described above can be executed by server 112, by terminal 102, or by both server 112 and terminal 102. The page display adjustment method of this embodiment executed by terminal 102 can also be executed by a client installed on it.

[0048] Taking running on a server as an example, Figure 2 This is a flowchart illustrating an optional page display adjustment method according to an embodiment of this application, such as... Figure 2 As shown, the process of this method may include the following steps:

[0049] Step S201: Obtain the first viewport size information of the current browser, wherein the first viewport size information is used to represent the displayable area corresponding to the current browser when displaying the target webpage.

[0050] Optionally, in this embodiment, each application has a display webpage, referred to here as the target webpage. When the user terminal (e.g., a computer) launches the application, it first obtains the first viewport size information of the browser currently displaying the application through code. This first viewport size information is the size of the displayable area of ​​the target webpage where the application is located, that is, the target webpage corresponding to the application is displayed in the first viewport size information of the current browser.

[0051] Step S202: If the viewport height of the first viewport size information is inconsistent with the viewport height of the target webpage, create and invoke an inline frame.

[0052] Optionally, the viewport height of the first viewport size information is determined, and then compared with the viewport height of the target webpage. Here, the viewport height can be represented in pixels. If the viewport height of the first viewport size information does not match the viewport height of the target webpage, the rendering of the current page is stopped, an inline frame is dynamically created, and then the inline frame is inserted into the target webpage. The inline frame is used to embed another document within the current HTML document.

[0053] Step S203: Change the physical address of the inline frame to the physical address of the target webpage, so that the page data of the target webpage is displayed in the inline frame.

[0054] Optionally, after inserting the target webpage into an inline frame, change the physical address of the inline frame to the physical address of the target webpage. This allows the target webpage's page data to be displayed within the inline frame. It's important to note that the inline frame displays the complete page data of the target webpage.

[0055] Step S204: Adjust the viewport size information of the inline frame proportionally by a preset multiple to generate the target viewport, and display the page data of the target webpage within the target viewport.

[0056] Optionally, since the inline frame displays the complete page data of the target webpage, the viewport size information of the inline frame is scaled proportionally by a preset factor to obtain the adjusted target viewport. The page data of the target webpage is then displayed in this target viewport, where the complete page data of the target webpage is also displayed.

[0057] In this embodiment, an inline frame is used to adjust the displayed content of the page. This is achieved by obtaining the first viewport size information of the current browser, which represents the displayable area corresponding to the target webpage displayed by the current browser. If the viewport height of the first viewport size information is inconsistent with the viewport height of the target webpage, an inline frame is created and invoked. The physical address of the inline frame is changed to the physical address of the target webpage, so that the page data of the target webpage is displayed within the inline frame. The viewport size information of the inline frame is proportionally adjusted by a preset multiple to generate a target viewport, and the page data of the target webpage is displayed within the target viewport. Because this application compares the viewport height of the current browser's first viewport size information with the viewport height of the target webpage, and if they are inconsistent, creates and calls an inline frame, setting the physical address of the inline frame to be the same as the physical address of the target webpage, so that the inline frame can obtain the complete webpage data of the target webpage, and then proportionally adjusts the viewport size information of the inline frame to obtain the target viewport generated by the adjusted inline frame, the page data of the target webpage is displayed in this target viewport. In this way, the page data adjustment of the target webpage in the inline frame is independent of the original target webpage adjustment, ensuring that the elements are not misaligned during the page adjustment process. At the same time, every time the user starts the application, a comparison between the browser window resolution and the screen display is initiated, and the ratio is automatically adjusted to a suitable one without the need for manual operation by the user, saving operation process, and ensuring that users can view and operate the same content on different devices as much as possible. Thus, it solves the problems of element misalignment and cumbersome operation that easily occur when manually adjusting the page display in related technologies.

[0058] Based on the above embodiments, as an optional embodiment, before proportionally adjusting the viewport size information of the inline frame by a preset multiple, the method includes:

[0059] Obtain multiple preset requirement solutions;

[0060] Under the premise of meeting the preset conditions of the preset requirements scheme, a corresponding preset multiplier is generated so that after the viewport size information of the inline frame is adjusted proportionally by the preset multiplier, the viewport size information of the inline frame can cover the page data of the target webpage.

[0061] Optionally, embodiments of this application can reasonably set a preset multiple based on various preset requirement schemes. Further, such as... Figure 3As shown, if the preset requirement scheme is an usability requirement scheme, to ensure that all content can be operated on the terminal, taking the reduction of the viewport size of the inline frame as an example, the preset factor can be set to any value within the range of 85%-89.76%. This ensures that after the viewport size of the inline frame is adjusted proportionally by the preset factor, the viewport size of the inline frame can both cover the page data of the target webpage and meet the preset conditions of the preset requirement scheme. The preset condition here is that the viewport size, after being reduced, ensures that all content can be operated on the terminal.

[0062] If the preset requirement is for ease of use, to ensure reading comfort, let's take reducing the viewport size of inline frames as an example. For instance, the body text size is 14px, while many systems use 12px. Since 12px also ensures comfortable reading, the preset multiplier can be set to 85%. 14px * 85% = 12px. This ensures that after proportionally adjusting the inline frame's viewport size, it both covers the target webpage's data and meets the preset requirements. The preset condition here is that the reduced text size ensures comfortable reading.

[0063] In this embodiment, the preset multiplier value can be flexibly set according to actual needs, which improves the user experience.

[0064] Based on the above embodiments, as an optional embodiment, when the viewport height of the first viewport size information is inconsistent with the viewport height of the target webpage, creating and invoking an inline frame includes:

[0065] If the viewport height of the first viewport size information is less than or greater than a preset threshold, an inline frame is created and invoked. The preset threshold is the value corresponding to when the viewport height of the target webpage is greater than or equal to a preset height.

[0066] Optionally, in this embodiment of the application, a preset threshold is set. The preset threshold is the value corresponding to when the viewport height of the target webpage is greater than or equal to the preset height. Here, the preset height can be the viewport height corresponding to when the page data of the target webpage is 100% displayed. Then, the preset threshold is set to the value set when it is greater than or equal to the preset height. This ensures that as long as the viewport height of the browser's viewport size is equal to the preset threshold, the page data of the target webpage can be fully displayed.

[0067] Then, in this embodiment of the application, the preset threshold can be used as the ideal viewport height for displaying the target webpage in the viewport corresponding to the viewport size information, such as 700px. Therefore, if the viewport height of the first viewport size information is less than or greater than the preset threshold, it is necessary to stop the rendering of the current page, dynamically create an inline frame, and call the inline frame.

[0068] In this embodiment of the application, a preset threshold is set to determine whether an inline frame needs to be created, so as to avoid the situation of repeated creation.

[0069] Based on the above embodiments, as an optional embodiment, when the viewport height of the first viewport size information is determined to be less than a preset threshold, the viewport size information of the inline frame is proportionally adjusted by a preset multiple to generate a target viewport, and the page data of the target webpage is displayed within the target viewport, including:

[0070] Set the viewport size information of the inline frame to a first preset multiple of the first viewport size information to obtain the first viewport size information to be adjusted, wherein the displayable area of ​​the target webpage displayed by the first viewport size information to be adjusted is larger than the displayable area of ​​the current browser.

[0071] By using webpage transformation technology, the size information of the first viewport to be adjusted is proportionally reduced by a second preset factor to obtain the size information of the second viewport. The second viewport is then determined, and the page data of the target webpage is displayed within the second viewport. The size information of the second viewport overlaps with the size information of the first viewport.

[0072] Optionally, CSS (Cascading Style Sheets) is used to set the viewport size information of the inline frame to a first preset multiple of the first viewport size information, such as increasing it to 1.15 times, to obtain the first viewport size information to be adjusted. This results in a larger viewport in the inline frame, which can display more content, and the browser will display scrollbars. In order to make the current inline frame viewport coincide with the browser viewport, the CSS transform technique is used to proportionally reduce the first viewport size information to be adjusted by a second preset multiple, such as reducing it to 0.85 times, to obtain the second viewport size information. The page data of the target webpage is then displayed in the second viewport.

[0073] The CSS transform technique scales down all elements (text, images, etc.) within an inline frame proportionally. This is similar to viewing a large image on a mobile phone; to display it fully, it needs to be scaled down. In this case, the inline frame viewport overlaps with the browser viewport, and the original web page elements become smaller, thus displaying more content.

[0074] It should be noted that the values ​​of the first preset multiple and the second preset multiple mentioned above are merely examples, and this application does not limit their specific values.

[0075] Based on the above embodiments, as an optional embodiment, when the viewport height of the first viewport size information is determined to be greater than a preset threshold, the viewport size information of the inline frame is proportionally adjusted by a preset multiple to generate a target viewport, and the page data of the target webpage is displayed within the target viewport, including:

[0076] Set the viewport size information of the inline frame to a third preset multiple of the first viewport size information to obtain the second viewport size information to be adjusted, wherein the displayable area of ​​the target webpage displayed by the second viewport size information to be adjusted is smaller than the displayable area of ​​the current browser.

[0077] Using webpage transformation technology, the size information of the second viewport to be adjusted is proportionally enlarged by a fourth preset factor to obtain the size information of the third viewport. The third viewport is determined, and the page data of the target webpage is displayed in the third viewport. The size information of the third viewport coincides with the size information of the first viewport.

[0078] Optionally, CSS can be used to set the viewport size information of the inline frame to a third preset multiple of the first viewport size information, such as 0.87 times, to obtain the second viewport size information to be adjusted. This results in a smaller viewport within the inline frame, which can cover all the page data of the target webpage. In order to make the current inline frame viewport coincide with the browser viewport, the CSS transform technique is used to proportionally enlarge the second viewport size information to be adjusted by a fourth preset multiple, such as 1.176 times, to obtain the third viewport size information. The page data of the target webpage is then displayed within the third viewport.

[0079] It should be noted that the values ​​of the third and fourth preset multiples mentioned above are merely examples, and this application does not limit their specific values.

[0080] In this embodiment, every time the user adjusts the browser resolution and refreshes the page, the server compares the viewport height and readjusts the ratio, thereby intelligently solving the problem of insufficient screen-to-body ratio on the terminal.

[0081] Based on the content of the above embodiments, as an optional embodiment, the method further includes:

[0082] Use inline frames to listen for object change commands;

[0083] Upon receiving an object change instruction sent by the inline frame through the target communication mechanism, update the object in the target viewport.

[0084] Optionally, since the URL (Uniform Resource Locator) of the webpage embedded in the inline frame will not be updated when the user switches pages in the inline frame because the embedded webpage and the target webpage are independent, it is necessary to use the inline frame to listen for object change instructions, such as listening for changes in the URL or the title. After the inline frame detects the object change, it notifies the embedded webpage to update the object through a target communication mechanism, such as postMessage. At this time, the embedded webpage uses the browser to update the URL or title and other information.

[0085] In this embodiment of the application, an inline frame is used to monitor changes in objects in real time, so as to update the data in a timely manner.

[0086] It should be noted that, for the sake of simplicity, the foregoing method embodiments are all described as a series of actions. However, those skilled in the art should understand that this application is not limited to the described order of actions, as some steps may be performed in other orders or simultaneously according to this application. Furthermore, those skilled in the art should also understand that the embodiments described in the specification are preferred embodiments, and the actions and modules involved are not necessarily essential to this application.

[0087] Through the above description of the embodiments, those skilled in the art can clearly understand that the methods according to the above embodiments can be implemented by means of software plus necessary general-purpose hardware platforms. Of course, they can also be implemented by hardware, but in many cases the former is a better implementation method. Based on this understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, can be embodied in the form of a software product. This computer software product is stored in a storage medium (such as ROM (Read-Only Memory) / RAM (Random Access Memory), magnetic disk, optical disk), and includes several instructions to cause a terminal device (which may be a mobile phone, computer, server, or network device, etc.) to execute the methods of the various embodiments of this application.

[0088] According to another aspect of the embodiments of this application, a page display adjustment device for implementing the above-described page display adjustment method is also provided. Figure 4 This is a structural block diagram of an optional page display adjustment device according to an embodiment of this application, such as... Figure 4 As shown, the device may include:

[0089] The first acquisition module 401 is used to acquire the first viewport size information of the current browser, wherein the first viewport size information is used to characterize the displayable area corresponding to the current browser when displaying the target webpage;

[0090] Module 402 is invoked to create and invoke an inline frame when the viewport height of the first viewport size information is inconsistent with the viewport height of the target webpage.

[0091] Modify module 403 to change the physical address of the inline frame to the physical address of the target webpage, so that the page data of the target webpage is displayed in the inline frame;

[0092] The first generation module 404 is used to proportionally adjust the viewport size information of the inline frame by a preset multiple to generate the target viewport and display the page data of the target webpage within the target viewport.

[0093] It should be noted that the first acquisition module 401 in this embodiment can be used to execute the above step S201, the calling module 402 in this embodiment can be used to execute the above step S202, the modification module 403 in this embodiment can be used to execute the above step S203, and the first generation module 404 in this embodiment can be used to execute the above step S204.

[0094] Through the aforementioned modules, the viewport height of the current browser's first viewport is compared with the viewport height of the target webpage. If they are inconsistent, an inline frame is created and invoked, and its physical address is set to be the same as that of the target webpage. This ensures that the inline frame obtains complete webpage data from the target webpage. The viewport size of the inline frame is then proportionally adjusted to obtain the adjusted target viewport. The target webpage data is displayed within this target viewport. Thus, the page data adjustment of the target webpage within the inline frame is independent of the original target webpage adjustment, ensuring that elements are not misaligned during the page adjustment process. Furthermore, each time the user launches the application, a comparison between the browser window resolution and the screen display is initiated, automatically adjusting to a suitable ratio without manual user intervention, saving time and effort. This also maximizes the possibility that users can view and operate the same content on different devices, thereby solving the problems of element misalignment and cumbersome operations that easily occur when manually adjusting the page display in related technologies.

[0095] As an optional embodiment, the device further includes:

[0096] The second acquisition module is used to acquire multiple preset requirement schemes before adjusting the viewport size information of the inline frame by a preset multiple.

[0097] The second generation module is used to generate a corresponding preset multiplier when the preset conditions of the preset requirement scheme are met, so that after the viewport size information of the inline frame is adjusted proportionally by the preset multiplier, the viewport size information of the inline frame can cover the page data of the target webpage.

[0098] Optionally, the calling module includes:

[0099] The calling unit is used to create and call an inline frame when the viewport height of the first viewport size information is less than or greater than a preset threshold. The preset threshold is the value corresponding to when the viewport height of the target webpage is greater than or equal to a preset height.

[0100] Optionally, if the viewport height of the first viewport size information is determined to be less than a preset threshold, the first generation module includes:

[0101] The first obtaining unit is used to set the viewport size information of the inline frame to a first preset multiple of the first viewport size information to obtain the first viewport size information to be adjusted, wherein the displayable area of ​​the target webpage displayed by the first viewport size information to be adjusted is larger than the displayable area displayed by the current browser.

[0102] The second obtaining unit is used to proportionally reduce the size information of the first viewport to be adjusted by a second preset factor using web page transformation technology to obtain the size information of the second viewport, determine the second viewport, and display the page data of the target webpage in the second viewport, wherein the size information of the second viewport coincides with the size information of the first viewport.

[0103] Optionally, if the viewport height of the first viewport size information is determined to be greater than a preset threshold, the first generation module includes:

[0104] The third obtaining unit is used to set the viewport size information of the inline frame to a third preset multiple of the first viewport size information to obtain the second viewport size information to be adjusted, wherein the displayable area of ​​the target webpage displayed by the second viewport size information to be adjusted is smaller than the displayable area displayed by the current browser.

[0105] The fourth obtaining unit is used to enlarge the second viewport size information to be adjusted by a fourth preset factor using web page transformation technology to obtain the third viewport size information, determine the third viewport, and display the page data of the target web page in the third viewport, wherein the third viewport size information coincides with the first viewport size information.

[0106] Optionally, the device further includes:

[0107] The insert module is used to insert inline frames into the target webpage before changing the physical address of the inline frame to the physical address of the target webpage currently being viewed by the browser.

[0108] The third acquisition module is used to obtain the physical address of the target webpage.

[0109] Optionally, the device further includes:

[0110] The listener module is used to listen for object change commands using inline frames;

[0111] The update module is used to update objects in the target viewport when it receives an object change instruction sent by the inline frame through the target communication mechanism.

[0112] It should be noted that the examples and application scenarios implemented by the above modules and corresponding steps are the same, but are not limited to the content disclosed in the above embodiments. It should also be noted that the above modules, as part of a device, can operate in situations such as... Figure 1 The hardware environment shown can be implemented through software or hardware, and the hardware environment includes the network environment.

[0113] According to another aspect of the embodiments of this application, an electronic device for implementing the above-described page display adjustment method is also provided. The electronic device may be a server, a terminal, or a combination thereof.

[0114] Figure 5 This is a structural block diagram of an optional electronic device according to an embodiment of this application, such as... Figure 5 As shown, it includes a processor 501, a communication interface 502, a memory 503, and a communication bus 504. The processor 501, communication interface 502, and memory 503 communicate with each other via the communication bus 504.

[0115] Memory 503 is used to store computer programs;

[0116] When processor 501 executes a computer program stored in memory 503, it performs the following steps:

[0117] Obtain the first viewport size information of the current browser, where the first viewport size information is used to represent the displayable area corresponding to the current browser when displaying the target webpage;

[0118] If the viewport height of the first viewport size information is inconsistent with the viewport height of the target webpage, create and invoke an inline frame;

[0119] Change the physical address of the inline frame to the physical address of the target webpage, so that the page data of the target webpage is displayed in the inline frame;

[0120] The viewport size information of the inline frame is adjusted proportionally by a preset factor to generate the target viewport, and the page data of the target webpage is displayed within the target viewport.

[0121] Optionally, in this embodiment, the communication bus can be a PCI (Peripheral Component Interconnect) bus or an EISA (Extended Industry Standard Architecture) bus, etc. This communication bus can be divided into an address bus, a data bus, a control bus, etc. For ease of representation, Figure 5 The bus is represented by a single thick line, but this does not mean that there is only one bus or one type of bus.

[0122] The communication interface is used for communication between the aforementioned electronic devices and other devices.

[0123] The memory may include RAM, or non-volatile memory, such as at least one disk storage device. Optionally, the memory may also be at least one storage device located remotely from the aforementioned processor.

[0124] As an example, such as Figure 5 As shown, the memory 503 may include, but is not limited to, the first acquisition module 401, the call module 402, the change module 403, and the first generation module 404 in the adjustment device shown on the page above. Furthermore, it may include, but is not limited to, other module units in the adjustment device shown on the page above, which will not be elaborated upon in this example.

[0125] The processors mentioned above can be general-purpose processors, including but not limited to: CPU (Central Processing Unit), NP (Network Processor), etc.; they can also be DSP (Digital Signal Processor), ASIC (Application Specific Integrated Circuit), FPGA (Field-Programmable Gate Array), or other programmable logic devices, discrete gate or transistor logic devices, or discrete hardware components.

[0126] In addition, the aforementioned electronic device also includes a display for showing the adjusted results of the page display.

[0127] Optionally, specific examples in this embodiment can refer to the examples described in the above embodiments, and will not be repeated here.

[0128] Those skilled in the art will understand that Figure 5The structure shown is for illustrative purposes only. The device that implements the adjustment method shown on the page can be a terminal device, such as a smartphone (e.g., Android phone, iOS phone), tablet computer, PDA, mobile Internet Device (MID), PAD, etc. Figure 5 This does not limit the structure of the aforementioned electronic devices. For example, the terminal device may also include components that are more advanced than those described above. Figure 5 The more or fewer components shown (such as network interfaces, display devices, etc.), or having the same Figure 5 The different configurations shown.

[0129] Those skilled in the art will understand that all or part of the steps in the various methods of the above embodiments can be implemented by a program instructing the hardware related to the terminal device. The program can be stored in a computer-readable storage medium, which may include: flash drive, ROM, RAM, disk or optical disk, etc.

[0130] According to another aspect of the embodiments of this application, a storage medium is also provided. Optionally, in this embodiment, the storage medium can be used to execute program code for a page display adjustment method.

[0131] Optionally, in this embodiment, the storage medium may be located on at least one of the network devices in the network shown in the above embodiment.

[0132] Optionally, in this embodiment, the storage medium is configured to store program code for performing the following steps:

[0133] Obtain the first viewport size information of the current browser, where the first viewport size information is used to represent the displayable area corresponding to the current browser when displaying the target webpage;

[0134] If the viewport height of the first viewport size information is inconsistent with the viewport height of the target webpage, create and invoke an inline frame;

[0135] Change the physical address of the inline frame to the physical address of the target webpage, so that the page data of the target webpage is displayed in the inline frame;

[0136] The viewport size information of the inline frame is adjusted proportionally by a preset factor to generate the target viewport, and the page data of the target webpage is displayed within the target viewport.

[0137] Optionally, specific examples in this embodiment can refer to the examples described in the above embodiments, and will not be repeated in this embodiment.

[0138] Optionally, in this embodiment, the storage medium may include, but is not limited to, various media capable of storing program code, such as USB flash drives, ROMs, RAMs, portable hard drives, magnetic disks, or optical disks.

[0139] According to another aspect of the embodiments of this application, a computer program product or computer program is also provided, the computer program product or computer program including computer instructions stored in a computer-readable storage medium; a processor of a computer device reads the computer instructions from the computer-readable storage medium, and the processor executes the computer instructions, causing the computer device to perform the page display adjustment method steps in any of the above embodiments.

[0140] The sequence numbers of the embodiments in this application are for descriptive purposes only and do not represent the superiority or inferiority of the embodiments.

[0141] If the integrated units in the above embodiments are implemented as software functional units and sold or used as independent products, they can be stored in the aforementioned computer-readable storage medium. Based on this understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, or all or part of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to cause one or more computer devices (which may be personal computers, servers, or network devices, etc.) to execute all or part of the steps of the adjustment methods shown on the various embodiments of this application.

[0142] In the above embodiments of this application, the descriptions of each embodiment have different focuses. For parts not described in detail in a certain embodiment, please refer to the relevant descriptions of other embodiments.

[0143] In the several embodiments provided in this application, it should be understood that the disclosed client can be implemented in other ways. The device embodiments described above are merely illustrative; for example, the division of units is only a logical functional division, and in actual implementation, there may be other division methods. For example, multiple units or components may be combined or integrated into another system, or some features may be ignored or not executed. Furthermore, the coupling or direct coupling or communication connection shown or discussed may be through some interfaces, or the indirect coupling or communication connection of units or modules may be electrical or other forms.

[0144] The units described as separate components may or may not be physically separate. The components shown as units may or may not be physical units; that is, they may be located in one place or distributed across multiple network units. Some or all of the units can be selected to achieve the purpose of the solution provided in this embodiment, depending on actual needs.

[0145] Furthermore, the functional units in the various embodiments of this application can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit. The integrated unit can be implemented in hardware or as a software functional unit.

[0146] The above description is only a preferred 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 adjusting page display, characterized in that, The method includes: Obtain the first viewport size information of the current browser, wherein the first viewport size information is used to characterize the displayable area corresponding to the current browser when displaying the target webpage; If the viewport height of the first viewport size information is inconsistent with the viewport height of the target webpage, an inline frame is created and invoked. Change the physical address of the inline frame to the physical address of the target webpage, so that the page data of the target webpage is displayed in the inline frame; Obtain multiple preset requirement solutions; Under the condition that the preset requirements are met, a corresponding preset multiplier is generated so that after the viewport size information of the inline frame is adjusted proportionally by the preset multiplier, the viewport size information of the inline frame can cover the page data of the target webpage. The viewport size information of the inline frame is adjusted proportionally by a preset multiple to generate a target viewport, and the page data of the target webpage is displayed within the target viewport.

2. The method according to claim 1, characterized in that, The step of creating and invoking an inline frame when the viewport height of the first viewport size information is inconsistent with the viewport height of the target webpage includes: If the viewport height of the first viewport size information is determined to be less than or greater than a preset threshold, the inline frame is created and invoked, wherein the preset threshold is the value corresponding to when the viewport height of the target webpage is greater than or equal to a preset height.

3. The method according to claim 2, characterized in that, If the viewport height of the first viewport size information is determined to be less than a preset threshold, the step of proportionally adjusting the viewport size information of the inline frame by a preset multiple to generate a target viewport, and displaying the page data of the target webpage within the target viewport includes: The viewport size information of the inline frame is set to a first preset multiple of the first viewport size information to obtain the first viewport size information to be adjusted, wherein the displayable area of ​​the target webpage displayed by the first viewport size information to be adjusted is larger than the displayable area displayed by the current browser. By using webpage transformation technology, the first viewport size information to be adjusted is proportionally reduced by a second preset factor to obtain the second viewport size information. The second viewport is determined, and the page data of the target webpage is displayed in the second viewport, wherein the second viewport size information coincides with the first viewport size information.

4. The method according to claim 2, characterized in that, If the viewport height of the first viewport size information is determined to be greater than a preset threshold, the step of proportionally adjusting the viewport size information of the inline frame by a preset multiple to generate a target viewport, and displaying the page data of the target webpage within the target viewport includes: The viewport size information of the inline frame is set to a third preset multiple of the first viewport size information to obtain the second viewport size information to be adjusted, wherein the displayable area of ​​the target webpage displayed by the second viewport size information to be adjusted is smaller than the displayable area displayed by the current browser. The second viewport size information to be adjusted is enlarged proportionally by a fourth preset factor using webpage transformation technology to obtain the third viewport size information. The third viewport is determined, and the page data of the target webpage is displayed in the third viewport, wherein the third viewport size information coincides with the first viewport size information.

5. The method according to claim 1, characterized in that, Before changing the physical address of the inline frame to the physical address of the target webpage currently being viewed by the browser, the method further includes: Insert the inline frame into the target webpage; Obtain the physical address of the target webpage.

6. The method according to any one of claims 1 to 5, characterized in that, The method further includes: Use the inline framework to listen for object change commands; Upon receiving the object change instruction sent by the inline frame through the target communication mechanism, the target viewport updates the object.

7. A page display adjustment device, characterized in that, The device includes: The first acquisition module is used to acquire the first viewport size information of the current browser, wherein the first viewport size information is used to characterize the displayable area corresponding to the current browser when displaying the target webpage; The calling module is used to create and call an inline frame when the viewport height of the first viewport size information is inconsistent with the viewport height of the target webpage. The modification module is used to change the physical address of the inline frame to the physical address of the target webpage, so that the page data of the target webpage is displayed in the inline frame; The second acquisition module is used to acquire multiple preset requirement schemes before adjusting the viewport size information of the inline frame by a preset multiple. The second generation module is used to generate a corresponding preset multiple when the preset conditions of the preset requirement scheme are met, so that after the viewport size information of the inline frame is adjusted proportionally by the preset multiple, the viewport size information of the inline frame can cover the page data of the target webpage. The first generation module is used to proportionally adjust the viewport size information of the inline frame by a preset multiple to generate a target viewport, and display the page data of the target webpage within the target viewport.

8. An electronic device comprising a processor, a communication interface, a memory, and a communication bus, wherein, The processor, the communication interface, and the memory communicate with each other via the communication bus, characterized in that... The memory is used to store computer programs; The processor is configured to perform the method steps of any one of claims 1 to 6 by running the computer program stored in the memory.

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