Page display method and device, electronic equipment and storage medium

By configuring active fragments for webpage view components, obtaining and updating their target screen state, adjusting the transparency of the status bar and navigation bar, and obtaining the status bar height to adapt to the H5 page display content, the problem of not being able to dynamically adjust the page size in existing technologies is solved, improving user experience and device compatibility.

CN117312697BActive Publication Date: 2026-07-21CHINA CONSTRUCTION BANK +1

Patent Information

Authority / Receiving Office
CN · China
Patent Type
Patents(China)
Current Assignee / Owner
CHINA CONSTRUCTION BANK
Filing Date
2023-09-21
Publication Date
2026-07-21

AI Technical Summary

Technical Problem

Existing technologies cannot dynamically change the size of an activity, which in turn prevents the dynamic adjustment of the size and layout of the front-end display page, impacting user experience and device compatibility.

Method used

By configuring activity fragments for web view components, obtaining their target screen state, updating the target screen state of the web view components, configuring the status bar to be transparent based on the target state, and obtaining the status bar height to adapt to the display content of the H5 page.

Benefits of technology

It enables dynamic adjustment of page display based on screen status, improving user experience and device compatibility, and providing an immersive full-screen experience and better compatibility.

✦ Generated by Eureka AI based on patent content.

Smart Images

  • Figure CN117312697B_ABST
    Figure CN117312697B_ABST
Patent Text Reader

Abstract

The present disclosure provides a page display method and device, electronic equipment and storage medium, and relates to the technical field of screen display. The method comprises the following steps: configuring an associated active fragment for a webpage view component, and obtaining a first target screen state of the active fragment; updating a target screen state of the webpage view component according to the first target screen state, determining a target state of a status bar on a display interface corresponding to a front-end H5 page based on the target screen state of the webpage view component, and performing transparent configuration on the status bar based on the target state; obtaining the height of the status bar, and feeding back the height of the status bar to the front end to perform screen adaptation on the display content of the H5 page. Thus, the present scheme determines the target state of the status bar based on the first target screen state, and performs transparent configuration on the status bar. The height of the status bar is fed back to the front end, and real-time interaction is performed with the front end, so that the display content of the H5 page can be adapted, and the user experience is improved.
Need to check novelty before this filing date? Find Prior Art

Description

Technical Field

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

[0002] Currently, various applications adapt activities to full-screen display on electronic devices, but they cannot dynamically change the size of the activities, and therefore cannot dynamically change the size and layout of the front-end display page. Summary of the Invention

[0003] This disclosure provides a page display method, apparatus, electronic device, and storage medium to solve the problem.

[0004] Therefore, one objective of this disclosure is to provide a method for displaying a page.

[0005] The second objective of this disclosure is to provide a page display device.

[0006] The third objective of this disclosure is to propose an electronic device.

[0007] The fourth objective of this disclosure is to provide a non-transitory computer-readable storage medium.

[0008] The fifth objective of this disclosure is to provide a computer program product.

[0009] To achieve the above objectives, a first aspect of this disclosure provides a page display method, comprising: configuring an associated activity fragment for a webpage view component and obtaining a first target screen state of the activity fragment; updating the target screen state of the webpage view component according to the first target screen state, and determining a target state of the status bar on the display interface corresponding to the front-end H5 page based on the target screen state of the webpage view component, and configuring the status bar to be transparent based on the target state; obtaining the height of the status bar and feeding back the height of the status bar to the front end to adapt to the display content of the H5 page.

[0010] According to one embodiment of this disclosure, determining the target state of the status bar on the display interface corresponding to the front-end H5 page based on the target screen state of the webpage view component includes: identifying the target screen state of the webpage view component; if the target screen state of the webpage view component is full-screen, determining the target state of the status bar as occupied; if the target screen state of the webpage view component is non-full-screen, determining the target state of the status bar as released.

[0011] According to one embodiment of this disclosure, configuring the status bar transparently based on the target state includes: if the target state is an occupied state, determining the current background color of the status bar; if the current background color is a non-transparent color, configuring the background color of the status bar to a transparent color to obtain a transparent status bar; or, if the target state is a released state, determining the current background color of the status bar; if the current background color is a transparent color, configuring the background color of the status bar to a non-transparent color to obtain a non-transparent status bar.

[0012] According to one embodiment of this disclosure, determining the first target screen state of an activity fragment associated with a webpage view component includes: receiving screen state configuration information sent by the front end; updating the screen state of the activity fragment according to the screen state configuration information to obtain the first target screen state.

[0013] According to one embodiment of this disclosure, the method further includes: if the target screen is in full-screen mode, configuring the background color of the navigation bar on the display interface to be transparent to obtain a transparent navigation bar.

[0014] According to one embodiment of this disclosure, after feeding back the height of the status bar to the front end for screen adaptation of the H5 page display content, the method further includes: receiving a screen state switching instruction sent by the front end, the screen state switching instruction including a second target screen state of the activity fragment; if the first target screen state is full-screen and the second target screen state is non-full-screen, then configure the status bar as a non-transparent status bar, the navigation bar as a non-transparent navigation bar, and / or feed back the height of the status bar to the front end; if the first target screen state is non-full-screen and the second target screen state is full-screen, configure the status bar as a transparent status bar, the navigation bar as a transparent navigation bar, and / or feed back the height of the status bar to the front end.

[0015] To achieve the above objectives, the first aspect of this disclosure proposes another page display method, comprising: sending screen state configuration information to a client, the screen state configuration information including a target screen state of the display interface, used to determine a first target screen state of an activity fragment associated with a webpage view component; receiving the height of a status bar on the display interface fed back by the client; adjusting the size of the webpage view component based on the height of the status bar and the target screen state, and performing screen adaptation on the display content of the H5 page.

[0016] According to one embodiment of this disclosure, adjusting the size of the webpage view component based on the height of the status bar and the target screen state includes: determining the adjustment direction of the webpage view component according to the target screen state; and adjusting the size of the webpage view component according to the adjustment direction and the height of the status bar.

[0017] According to one embodiment of this disclosure, the method further includes: if the target screen state is full-screen, determining the full-screen height of the display interface and the current height of the webpage view component; if the current height of the webpage view component is inconsistent with the full-screen height, determining the adjustment direction to be expansion; using the status bar height as the height increment of the webpage view component, performing an expansion operation on the webpage view component so that the webpage view component occupies the status bar.

[0018] According to one embodiment of this disclosure, the method further includes: if the target screen state is a non-full-screen state, determining the default height of the non-full-screen display interface and the current height of the web page view component; if the current height of the web page view component is inconsistent with the default height, determining that the adjustment direction is to shrink; using the status bar height as the height reduction amount of the web page view component, performing a shrink operation on the web page view component to make the web page view component release the status bar.

[0019] According to one embodiment of this disclosure, the method further includes: if the target screen state is full-screen, rendering the status bar as a transparent status bar; or, if the target screen state is not full-screen, rendering the status bar as a non-transparent status bar.

[0020] According to one embodiment of this disclosure, the method further includes: if the target screen is in full-screen mode, rendering the navigation bar on the display interface as a transparent navigation bar.

[0021] To achieve the above objectives, a second aspect of this disclosure provides a page display device, comprising: an acquisition module, configured to configure an associated activity fragment for a webpage view component and acquire a first target screen state of the activity fragment; a configuration module, configured to update the target screen state of the webpage view component according to the first target screen state, and based on the target screen state of the webpage view component, determine the target state of the status bar on the display interface corresponding to the front-end H5 page, and configure the status bar to be transparent based on the target state; and an adaptation module, configured to acquire the height of the status bar and feed back the height of the status bar to the front-end for screen adaptation of the display content of the H5 page.

[0022] According to one embodiment of this disclosure, the configuration module is further configured to: identify the target screen state of the webpage view component; if the target screen state of the webpage view component is full-screen, determine that the target state of the status bar is occupied; if the target screen state of the webpage view component is non-full-screen, determine that the target state of the status bar is released.

[0023] According to one embodiment of this disclosure, the configuration module is further configured to: if the target state is an occupied state, determine the current background color of the status bar; if the current background color is a non-transparent color, configure the background color of the status bar to a transparent color to obtain a transparent status bar; or, if the target state is a released state, determine the current background color of the status bar; if the current background color is a transparent color, configure the background color of the status bar to a non-transparent color to obtain a non-transparent status bar.

[0024] According to one embodiment of this disclosure, the acquisition module is further configured to: receive screen state configuration information sent by the front end; update the screen state of the active fragment according to the screen state configuration information to obtain the first target screen state.

[0025] According to one embodiment of this disclosure, the apparatus further includes: if the target screen is in full-screen mode, configuring the background color of the navigation bar on the display interface to be transparent to obtain a transparent navigation bar.

[0026] According to one embodiment of this disclosure, the adaptation module is further configured to: receive a screen state switching instruction sent by the front end, the screen state switching instruction including a second target screen state of the active fragment; if the first target screen state is a full-screen state and the second target screen state is a non-full-screen state, then configure the status bar as a non-transparent status bar, the navigation bar as a non-transparent navigation bar, and / or provide feedback on the height of the status bar to the front end; if the first target screen state is a non-full-screen state and the second target screen state is a full-screen state, configure the status bar as a transparent status bar, the navigation bar as a transparent navigation bar, and / or provide feedback on the height of the status bar to the front end.

[0027] To achieve the above objectives, a second aspect of this disclosure provides another page display device, comprising: a sending module for sending screen state configuration information to a client, the screen state configuration information including a target screen state of the display interface, used to determine a first target screen state of an activity fragment associated with a webpage view component; a receiving module for receiving the height of the status bar on the display interface fed back by the client; and an adaptation module for adjusting the size of the webpage view component based on the height of the status bar and the target screen state, and performing screen adaptation on the display content of the H5 page.

[0028] According to one embodiment of this disclosure, the adaptation module is further configured to: determine the adjustment direction of the webpage view component based on the target screen state; and adjust the size of the webpage view component according to the adjustment direction and the height of the status bar.

[0029] According to one embodiment of this disclosure, the apparatus further includes: if the target screen state is full-screen, determining the full-screen height of the display interface and the current height of the webpage view component; if the current height of the webpage view component is inconsistent with the full-screen height, determining the adjustment direction to be expansion; using the status bar height as the height increment of the webpage view component, performing an expansion operation on the webpage view component so that the webpage view component occupies the status bar.

[0030] According to one embodiment of this disclosure, the apparatus further includes: if the target screen state is a non-full-screen state, determining the default height of the non-full-screen display interface and the current height of the webpage view component; if the current height of the webpage view component is inconsistent with the default height, determining the adjustment direction to be shrinking; using the status bar height as the height reduction amount of the webpage view component, performing a shrinking operation on the webpage view component to cause the webpage view component to release the status bar.

[0031] According to one embodiment of this disclosure, the apparatus further includes: rendering the status bar as a transparent status bar if the target screen state is full-screen; or rendering the status bar as a non-transparent status bar if the target screen state is not full-screen.

[0032] According to one embodiment of this disclosure, the apparatus further includes: if the target screen is in full-screen mode, rendering the navigation bar on the display interface as a transparent navigation bar.

[0033] To achieve the above objectives, a third aspect of this disclosure provides an electronic device, comprising: at least one processor; and a memory communicatively connected to the at least one processor; wherein the memory stores instructions executable by the at least one processor to implement the page display method as described in the first aspect of this disclosure.

[0034] To achieve the above objectives, a fourth aspect of this disclosure provides a non-transitory computer-readable storage medium storing computer instructions, wherein the computer instructions are used to implement the page display method as described in the first aspect of this disclosure.

[0035] To achieve the above objectives, a fifth aspect of this disclosure provides a computer program product, including a computer program that, when executed by a processor, implements the page display method as described in the first aspect of this disclosure. Attached Figure Description

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

[0037] Figure 1 A flowchart illustrating a page display method provided in an embodiment of this disclosure;

[0038] Figure 2 A flowchart illustrating another page display method provided in an embodiment of this disclosure;

[0039] Figure 3 A flowchart illustrating another page display method provided in an embodiment of this disclosure;

[0040] Figure 4 The flowchart shown is an example of a settings page displayed in full screen.

[0041] Figure 5 The diagram shown is a sample flowchart of the settings page not displayed in full screen.

[0042] Figure 6 A flowchart illustrating another page display method provided in an embodiment of this disclosure;

[0043] Figure 7 Example diagrams showing the adaptation of the displayed content on an H5 page, provided as an embodiment of this disclosure;

[0044] Figure 8 A flowchart illustrating another page display method provided in an embodiment of this disclosure;

[0045] Figure 9This is an example diagram illustrating the structure of the client and front-end in the page display method provided in this embodiment of the disclosure;

[0046] Figure 10 An interactive example diagram of a page display method provided in an embodiment of this disclosure;

[0047] Figure 11 An interactive example diagram of another page display method provided in this disclosure embodiment;

[0048] Figure 12 A structural example diagram of a page display device provided in an embodiment of this disclosure;

[0049] Figure 13 A structural example diagram of another page display device provided in an embodiment of this disclosure;

[0050] Figure 14 This is a structural example diagram of an electronic device provided in an embodiment of this disclosure.

[0051] The accompanying drawings have illustrated specific embodiments of this disclosure, which will be described in more detail below. These drawings and descriptions are not intended to limit the scope of the concept in any way, but rather to illustrate the concepts of this disclosure to those skilled in the art through reference to particular embodiments. Detailed Implementation

[0052] To enable those skilled in the art to better understand the technical solutions of this disclosure, the technical solutions in the embodiments of this disclosure will be clearly and completely described below with reference to the accompanying drawings.

[0053] It should be noted that the terms "first," "second," etc., used in the specification, claims, and accompanying drawings of this disclosure 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 disclosure described herein can be implemented in orders other than those illustrated or described herein. The embodiments described in the following exemplary embodiments do not represent all embodiments consistent with this disclosure. Rather, they are merely examples of apparatuses and methods consistent with some aspects of this disclosure as detailed in the appended claims.

[0054] The acquisition, storage, use, and processing of data in this disclosed technical solution all comply with the relevant provisions of national laws and regulations.

[0055] Figure 1 This is a flowchart illustrating a page display method provided in an embodiment of this disclosure. Figure 1 As shown, the methods for displaying this page include:

[0056] S101, configure the associated active fragment for the web page view component, and obtain the first target screen state of the active fragment.

[0057] It should be noted that the execution subject of the page display method provided in this application embodiment is an electronic device, which can be a terminal device. Optionally, the terminal device can be a mobile electronic device or a non-mobile electronic device. For example, mobile electronic devices can be mobile phones, tablets, laptops, PDAs, in-vehicle electronic devices, wearable devices, ultra-mobile personal computers (UMPCs), netbooks, or personal digital assistants (PDAs), etc., while non-mobile electronic devices can be network attached storage (NAS), personal computers (PCs), televisions (TVs), ATMs, or self-service machines, etc. This application embodiment does not impose specific limitations.

[0058] As you can understand, a WebView component is used to display a webpage. An Activity refers to a visual user interface used to create a screen window and place the user interface for user interaction. A Fragment is a flexible, usable piece of an Activity attached to it, possessing some of the Activity's characteristics but with higher scalability.

[0059] Optionally, you can define an associated Activity Fragment for the web view component and add the associated Activity Fragment to the web view component.

[0060] In some implementations, the client can determine the target screen state of the current screen display interface by receiving screen configuration information sent by the front end; that is, it can determine the first target screen state of the active fragment associated with the webpage view component. The first target screen state includes full-screen and non-full-screen states.

[0061] Understandably, the front-end can listen for user actions, such as entering or exiting full-screen mode, and then determine screen configuration information based on these actions. User actions can include clicking, swiping, dragging, etc.

[0062] In some implementations, screen configuration information may include, but is not limited to, information such as screen resolution, interface elements, and screen state parameters. Based on the screen configuration information, the first target screen state of the active fragment associated with the web page view component can be determined.

[0063] Optionally, the first target screen state of the active fragment associated with the webpage view component can be determined based on screen state parameters. For example, if the screen state parameter is 1, it indicates that the first target screen state is full-screen. If the screen state parameter is 0, it indicates that the first target screen state is not full-screen.

[0064] Optionally, the first target screen state of the active fragment associated with the webpage view component can be determined based on the resolution of the current screen interface. The resolution of the current screen interface can be compared with the maximum resolution of the electronic device. If the resolution of the current screen interface equals the maximum resolution, the first target screen state is determined to be full-screen; if the resolution of the current screen interface does not equal the maximum resolution, the first target screen state is determined to be non-full-screen.

[0065] S102, based on the first target screen state, update the target screen state of the web page view component, and based on the target screen state of the web page view component, determine the target state of the status bar on the display interface corresponding to the front-end H5 page, and configure the status bar to be transparent based on the target state.

[0066] As we can understand, the front-end refers to the part of an electronic device that directly interacts with the user, i.e., the user interface. An H5 page refers to a webpage developed using Hyper Text Markup Language 5 (HTML5) technology, a standard language for creating webpages. H5 pages can be displayed and interacted with on various devices. The display interface corresponding to the front-end H5 page refers to the screen interface currently displayed on the electronic device.

[0067] In some implementations, the target screen state of the web view component can be updated to match the first target screen state of the activity fragment. If the first target screen state is full-screen, the target screen state of the web view component is updated to full-screen. If the first target screen state is not full-screen, the target screen state of the web view component is updated to not full-screen.

[0068] Furthermore, the target state of the status bar on the corresponding display interface of the front-end H5 page can be determined based on the target screen state of the webpage view component. The target state of the status bar is divided into an occupied state and a released state. Optionally, a webpage view component in full-screen mode needs to occupy the status bar on the display interface, so the target state of the status bar is the occupied state. A webpage view component in non-full-screen mode does not need to occupy the status bar on the display interface, so the target state of the status bar is the released state.

[0069] Understandably, the status bar is located at the top of the display page and is used to display information such as time, signal strength, battery level, and application notifications.

[0070] In some implementations, the status bar of an activity fragment in full-screen mode is in an occupied state. To avoid affecting the user's visual experience, the status bar can be configured as a transparent status bar. Optionally, the background color of the status bar can be configured as transparent, allowing the status bar to form a unified whole with the displayed content of the H5 page, providing the user with an immersive full-screen experience.

[0071] In some implementations, the status bar state corresponding to an activity fragment in a non-full-screen state is "released." To improve the user's visual experience, the status bar can be configured to be opaque. Optionally, the background color of the status bar can be configured to be opaque, such as white or black, so that only the content of the status bar is displayed.

[0072] S103, obtain the height of the status bar and report the height of the status bar to the front end to adapt the display content of the H5 page to the screen.

[0073] In some implementations, the height of the status bar can be determined based on the version of the electronic device's system. Alternatively, a status bar height module can be created to obtain the status bar height. Furthermore, the status bar height can be sent to the front end, allowing the front end to adapt the H5 page's display content based on the target screen state, according to the status bar height.

[0074] Optionally, if the first target screen is in full-screen mode, the display content of the web page view component is expanded according to the height of the status bar; if the first target screen is in non-full-screen mode, the display content of the web page view component is reduced according to the height of the status bar.

[0075] In the page display method provided in this embodiment, the target state of the status bar corresponding to the H5 page is determined by determining the first target screen state of the activity fragment, and then the status bar is transparently configured based on the target state of the status bar. By feeding back the height of the obtained status bar to the front end, the front end and the client interact in real time to adapt the display content of the H5 page, thereby improving the user experience. Adapting the display content based on the client and the front end can be compatible with different types of electronic devices, and has better compatibility and reusability.

[0076] Figure 2 This is a flowchart illustrating a page display method provided in an embodiment of this disclosure. Figure 2 As shown, the methods for displaying this page include:

[0077] S201, Configure the associated active fragment for the web page view component, and obtain the first target screen state of the active fragment.

[0078] The details of step S201 can be found in the above embodiments and will not be repeated here.

[0079] S202, Identify the target screen state of the webpage view component.

[0080] In some implementations, the target screen state of a webpage view component can be identified based on the first target screen state of the activity fragment. The target screen state of the webpage view component is the same as the first target screen state.

[0081] In some implementations, the length and width of the web page view component can also be identified. If the length and width of the web page view component are the same as the length and width of the display screen, the target screen state is determined to be full screen; otherwise, the target screen state is non-full screen.

[0082] S203, if the target screen state of the web page view component is full screen, determine that the target state of the status bar is occupied.

[0083] Understandably, when the webpage view component is displayed in full-screen mode, the content of the H5 page occupies the entire screen, including the status bar area. In other words, the status bar is not displayed above the page's content; rather, it is "occupied" by the page's content. Therefore, in full-screen mode, the target state of the status bar is an occupied state.

[0084] S204, if the target screen state of the web page view component is a non-fullscreen state, determine the target state of the state as the released state.

[0085] Understandably, when the webpage view component is not displayed in fullscreen mode, the content displayed on the H5 page is no longer occupied by the status bar area, leaving the status bar area free. In other words, the top of the page's displayed content is not affected by the status bar, and the page's content will begin to appear from below the status bar. Therefore, in fullscreen mode, the target state for the status bar is the released state.

[0086] S205, configures the status bar transparently based on the target status.

[0087] In some implementations, if the target state is occupied, the current background color of the status bar is determined. If the current background color is opaque, it is set to transparent, resulting in a transparent status bar to create a consistent visual effect and expand the visual space. If the target state is released, the current background color of the status bar is determined. If the current background color is transparent, it is set to opaque, resulting in an opaque status bar to enhance the contrast between the status bar and the displayed content, making it easier for users to read.

[0088] Optionally, the status bar can be configured to be transparent by setting the transparency of its background color. For example, if the target state of the status bar is determined to be the occupied state, configuring the status bar's transparency to 100% means that the background color of the status bar is transparent. As another example, configuring the status bar's transparency to 10% means that the background color of the status bar is opaque.

[0089] S206: Obtain the height of the status bar and report the status bar height to the front end to adapt the display content of the H5 page to the screen.

[0090] The details of step S206 can be found in the above embodiments and will not be repeated here.

[0091] In the page display method provided in this disclosure, by determining the first target screen state of the activity fragment, the target state of the status bar corresponding to the H5 page can be determined, and the status bar can be transparently configured based on the target state of the status bar. By feeding back the height of the obtained status bar to the front end, the front end and the client interact in real time to adapt the display content of the H5 page, thereby improving the user experience. Adapting the display content based on the client and the front end can be compatible with different types of electronic devices, and has better compatibility and reusability.

[0092] Figure 3 This is a flowchart illustrating a page display method provided in an embodiment of this disclosure. Figure 3 As shown, the methods for displaying this page include:

[0093] S301 receives screen status configuration information sent by the front end.

[0094] S302, based on the screen state configuration information, update the screen state of the active fragment to obtain the first target screen state.

[0095] In some implementations, the client determines the first target screen state of the active fragment associated with the webpage view component by receiving screen state configuration information sent by the frontend.

[0096] In some implementations, the target screen state of the active fragment associated with the webpage view component can be updated based on screen state configuration information. The updated screen state is then considered the first target screen state. This screen state configuration information includes the target screen state of the displayed interface.

[0097] Optionally, if the target screen state is not full-screen, the screen state of the active fragment is updated to be non-full-screen, meaning the first target screen state is non-full-screen. If the target screen state is full-screen, the screen state of the active fragment is updated to be full-screen, meaning the first target screen state is full-screen.

[0098] S303, based on the first target screen state, determine the target state of the status bar on the corresponding display interface of the front-end H5 page.

[0099] S304, Configure the status bar transparently based on the target status.

[0100] The relevant content of steps S303-S304 can be found in the above embodiments, and will not be repeated here.

[0101] S305 retrieves the height of the status bar and sends the status bar height back to the front end to adapt the display content of the H5 page to the screen.

[0102] In some implementations, after configuring the status bar to be transparent, the navigation bar can also be configured to be transparent based on the state of the first target screen. Optionally, if the target screen is in full-screen mode, the background color of the navigation bar on the display interface will be configured to be transparent, resulting in a transparent navigation bar. This allows the navigation bar to blend seamlessly with the page content, maximizing the use of the display space and creating an immersive experience for the user.

[0103] Furthermore, the client sends the height of the status bar to the front end, allowing the front end to adapt the display content of the H5 page based on the status bar height and the state of the first target screen.

[0104] In some implementations, if a screen state changes, the client can receive a screen state switching instruction sent by the front end. The screen state switching instruction includes the second target screen state of the activity fragment. Then, the status bar is reconfigured according to the second target screen state, and the status bar height is fed back to the front end to adapt to the display content of the H5 page.

[0105] Optionally, if the first target screen is in full-screen mode and the second target screen is in non-full-screen mode, then configure the status bar to be opaque, configure the navigation bar to be opaque, and / or provide feedback on the status bar height to the front end, indicating that the activity fragment has switched from full-screen to non-full-screen mode. If the first target screen is in non-full-screen mode and the second target screen is in full-screen mode, configure the status bar to be transparent, configure the navigation bar to be transparent, and / or provide feedback on the status bar height to the front end, indicating that the activity fragment has switched from non-full-screen to full-screen mode.

[0106] In the page display method provided in this embodiment, the first target screen state of the activity fragment is determined based on screen state configuration information, thereby determining the target state of the status bar corresponding to the H5 page, and the status bar is transparently configured based on the target state of the status bar. By feeding back the height of the obtained status bar to the front end, the front end and the client interact in real time to adapt the display content of the H5 page, thus improving the user experience. Adapting the display content based on the client and the front end can be compatible with different types of electronic devices, and has better compatibility and reusability.

[0107] Figure 4 The flowchart shown illustrates the process of setting the page to full-screen display. It determines whether the first target screen state of the active fragment of the web view component is full-screen. If it is, the target screen state of the web view component is updated to full-screen. Then, the target state of the status bar is determined to be occupied, and both the status bar and navigation bar are set to transparent. Furthermore, the height of the status bar is obtained and fed back to the front-end. The front-end H5 page then adaptively expands its content based on the status bar height, displaying the content in full-screen mode.

[0108] Figure 5 The flowchart shown illustrates the process of setting the page to non-fullscreen display. It determines whether the first target screen state of the active fragment of the web view component is non-fullscreen. If it is, the target screen state of the web view component is updated to non-fullscreen. Then, the target state of the status bar is determined to be released, and both the status bar and navigation bar are set to opaque. Furthermore, the height of the status bar is obtained and fed back to the front-end. The front-end H5 page then adaptively shrinks the displayed content based on the status bar height, displaying the content in a non-fullscreen format.

[0109] Figure 6 This is a flowchart illustrating a page display method provided in an embodiment of this disclosure. Figure 6 As shown, the methods for displaying this page include:

[0110] S601, send screen state configuration information to the client. The screen state configuration information includes the target screen state of the display interface, which is used to determine the first target screen state of the active fragment associated with the web page view component.

[0111] In some implementations, the front-end can determine screen state configuration information based on the user's electronic device configuration and send this information to the client via an API call. This screen state configuration information includes the target screen state of the displayed interface. The target screen state is used to determine the first target screen state of the active fragment associated with the webpage view component.

[0112] S602 receives feedback from the client regarding the height of the status bar on the display interface.

[0113] S603 adjusts the size of webpage view components based on the height of the status bar and the target screen state, and adapts the content displayed on the H5 page to the screen.

[0114] In some implementations, the front-end receives the status bar height sent by the client, determines the status bar height on the display interface, and determines the adjustment direction of the web page view component size based on the target screen state, such as enlarging or shrinking. Then, the status bar height and adjustment direction are used to adapt the displayed content on the H5 page to provide users with an immersive experience and improve the user experience.

[0115] Optionally, if the target screen state is full-screen and the target state of the status bar is occupied, the web page view component is expanded to occupy the status bar according to the height of the status bar, and the displayed content is adaptively expanded.

[0116] Optionally, if the target screen state is not full-screen and the target state of the status bar is released, the web page view component is shrunk to release the status bar based on the height of the status bar, and the displayed content is adaptively shrunk.

[0117] Figure 7 The image shown is an example of the content displayed on an H5 page after adaptation. Figure 7 a adapts the content displayed on the H5 page based on full-screen mode. Figure 7 b adapts the content displayed on the H5 page based on the non-full-screen state. Figure 7 In diagram 'a', the dotted line represents the status bar, and the diagonal line indicates the position of the displayed content, which expands to occupy the status bar. Figure 7 In b, the dotted line represents the status bar, and the diagonal line indicates the position of the displayed content. The displayed content is minimized to the point where the status bar is released.

[0118] In some implementations, the status bar and navigation bar can also be rendered based on the state of the first target screen. Optionally, if the target screen state is full-screen, the status bar is rendered as a transparent status bar, expanding the displayed content of the H5 page into the status bar, enhancing the visual effect of the H5 page and improving the user's immersive experience.

[0119] Optionally, if the target screen is not in full-screen mode, the status bar is rendered as a non-transparent status bar to enhance the contrast between the status bar and the displayed content, making it easier for users to read.

[0120] Optionally, if the target screen is in full-screen mode, rendering the navigation bar on the display interface as a transparent navigation bar can make the navigation bar blend seamlessly with the page content, maximizing the use of the display interface space and creating an immersive experience for the user.

[0121] In the page display method provided in this disclosure, the first target screen state of the activity fragment is determined by sending screen state configuration information to the client. By receiving the status bar height feedback from the client, and based on the status bar height and the first target screen state, screen adaptation is performed on the content displayed on the H5 page to improve the user experience. Adapting the display content based on the client and front-end can be compatible with different types of electronic devices, and has better compatibility and reusability.

[0122] Figure 8 This is a flowchart illustrating a page display method provided in an embodiment of this disclosure. Figure 8 As shown, the methods for displaying this page include:

[0123] S801, sends screen state configuration information to the client. The screen state configuration information includes the target screen state of the display interface, which is used to determine the first target screen state of the active fragment associated with the web page view component.

[0124] S802 receives the height of the status bar on the display interface from the client.

[0125] The relevant content of steps S801-S802 can be found in the above embodiments, and will not be repeated here.

[0126] S803 determines the adjustment direction of the webpage view components based on the target screen state.

[0127] In some implementations, the adjustment direction of a webpage view component can be determined based on the height of the webpage view component and the height of the displayed interface under the target screen state. The adjustment direction is either scaling up or scaling down.

[0128] Optionally, if the target screen is in full-screen mode, determine the full-screen height of the display interface and the current height of the web page view component. If the current height of the web page view component is inconsistent with the full-screen height, determine the adjustment direction to be enlarged, that is, the current height of the web page view component is less than the full-screen height.

[0129] Optionally, if the target screen is in a non-full-screen state, determine the default height of the non-full-screen display interface and the current height of the web page view component. If the current height of the web page view component is inconsistent with the default height, determine the adjustment direction to shrink, that is, the current height of the web page view component is greater than the full-screen height.

[0130] S804 adjusts the size of the webpage view components according to the adjustment direction and the height of the status bar.

[0131] In some implementations, the size of webpage view components can be increased or decreased based on the height of the status bar, thereby adapting the displayed content on the H5 page to provide users with an immersive experience and enhance their user experience.

[0132] Optionally, if the adjustment direction of the webpage view component is to expand, the webpage view component is expanded by using the height of the status bar as the height increment, so that the webpage view component occupies the status bar.

[0133] Optionally, if the adjustment direction of the webpage view component is to shrink, the height of the status bar is used as the height reduction amount of the webpage view component to shrink the webpage view component so that the status bar is released.

[0134] S805 adapts the content displayed on H5 pages to the screen.

[0135] The details of step S805 can be found in the above embodiments and will not be repeated here.

[0136] In the page display method provided in this disclosure, the first target screen state of the activity fragment is determined by sending screen state configuration information to the client. By receiving the status bar height feedback from the client and adjusting the status bar height based on its adjustment direction, the display content on the H5 page is adapted to the screen, improving the user experience. Adapting the display content based on the client and front-end ensures compatibility with different types of electronic devices, offering better compatibility and reusability.

[0137] Figure 9 This diagram illustrates the structure of the client and front-end in the page display method provided in this embodiment. The client includes a full-screen management module, a current screen state module, and a status bar height module. The full-screen management module switches the second target screen state of the active fragment according to the screen parameters set by the front-end. For example, 0 indicates a non-full-screen state, and 1 indicates a full-screen state. The current screen state module determines the first target screen state of the active fragment. The status bar height module obtains the status bar height. The front-end includes a front-end adaptation module. The front-end adaptation module dynamically adapts the displayed content on the H5 page according to the current target screen state and the status bar height.

[0138] Figure 10 An interactive example diagram of the page display method provided in this embodiment of the disclosure. For example... Figure 9 As shown, the methods for displaying this page include:

[0139] S1001, the front end sends screen status configuration information to the client.

[0140] S1002, the client determines that the first target state is full-screen state.

[0141] S1003, the client obtains the status bar height.

[0142] S1004, the client sends the status bar height to the front end.

[0143] S1005, the front end adapts the display content of the H5 page according to the height of the status bar.

[0144] In the page display method provided in this embodiment, the front end sends screen state configuration information to the client to determine that the first target screen state is full screen. The client obtains the status bar height and feeds back the status bar height to the front end. Based on the status bar height and the first target screen state, the front end performs screen adaptation on the content displayed on the H5 page, expanding the display content value to occupy the status bar, so as to enhance the visual effect of the H5 page and enhance the user's immersive experience.

[0145] Figure 11 An interactive example diagram of the page display method provided in this embodiment of the disclosure. For example... Figure 11 As shown, the methods for displaying this page include:

[0146] S1101, the front end sends screen status configuration information to the client.

[0147] S1102, the client determines that the first target state is a non-full-screen state.

[0148] S1103, the client obtains the status bar height.

[0149] S1104, the client sends the status bar height to the front end.

[0150] S1105, the front end adapts the display content of the H5 page according to the height of the status bar.

[0151] In the page display method provided in this embodiment, the front end sends screen state configuration information to the client to determine that the first target screen state is a non-full-screen state. The client obtains the status bar height and feeds the status bar height back to the front end. Based on the status bar height and the first target screen state, the front end performs screen adaptation on the content displayed on the H5 page, shrinks the display content value to release the status bar, and enhances the contrast between the status bar and the display content, making it easier for users to read and enhancing the user's immersive experience.

[0152] Corresponding to the page display methods provided in the above embodiments, one embodiment of this disclosure also provides a page display device. Since the page display device provided in this disclosure corresponds to the page display methods provided in the above embodiments, the implementation methods of the above page display methods are also applicable to the page display device provided in this disclosure, and will not be described in detail in the following embodiments.

[0153] Figure 12 This is a structural example diagram of a page display device provided in an embodiment of this disclosure. For example... Figure 12 As shown, the page display device includes: an acquisition module 1201, a configuration module 1202, and an adaptation module 1203.

[0154] The acquisition module 1201 is used to configure the associated activity fragment for the web page view component and acquire the first target screen state of the activity fragment.

[0155] The configuration module 1202 is used to update the target screen state of the web page view component according to the first target screen state, and determine the target state of the status bar on the display interface corresponding to the front-end H5 page based on the target screen state of the web page view component, and configure the status bar to be transparent based on the target state.

[0156] The adaptation module 1203 is used to obtain the height of the status bar and feed back the height of the status bar to the front end to adapt the display content of the H5 page to the screen.

[0157] According to one embodiment of this disclosure, the configuration module 1202 is further configured to: identify the target screen state of the webpage view component; if the target screen state of the webpage view component is full-screen, determine that the target state of the status bar is occupied; if the target screen state of the webpage view component is non-full-screen, determine that the target state of the status bar is released.

[0158] According to one embodiment of this disclosure, the configuration module 1202 is further configured to: if the target state is an occupied state, determine the current background color of the status bar; if the current background color is a non-transparent color, configure the background color of the status bar to a transparent color to obtain a transparent status bar; or, if the target state is a released state, determine the current background color of the status bar; if the current background color is a transparent color, configure the background color of the status bar to a non-transparent color to obtain a non-transparent status bar.

[0159] According to one embodiment of this disclosure, the acquisition module 1201 is further configured to: receive screen state configuration information sent by the front end; update the screen state of the active fragment according to the screen state configuration information to obtain the first target screen state.

[0160] According to one embodiment of this disclosure, the apparatus further includes: if the target screen is in full-screen mode, configuring the background color of the navigation bar on the display interface to be transparent to obtain a transparent navigation bar.

[0161] According to one embodiment of this disclosure, the adaptation module 1203 is further configured to: receive a screen state switching instruction sent by the front end, the screen state switching instruction including a second target screen state of the active fragment; if the first target screen state is a full-screen state and the second target screen state is a non-full-screen state, then configure the status bar as a transparent navigation bar, the navigation bar as a transparent navigation bar, and / or provide feedback on the height of the status bar to the front end; if the first target screen state is a non-full-screen state and the second target screen state is a full-screen state, configure the status bar as a non-transparent navigation bar, the navigation bar as a non-transparent navigation bar, and / or provide feedback on the height of the status bar to the front end.

[0162] In the page display method provided in this embodiment, the target state of the status bar corresponding to the H5 page is determined by determining the first target screen state of the activity fragment, and then the status bar is transparently configured based on the target state of the status bar. By feeding back the height of the obtained status bar to the front end, the front end and the client interact in real time to adapt the display content of the H5 page, thereby improving the user experience. Adapting the display content based on the client and the front end can be compatible with different types of electronic devices, and has better compatibility and reusability.

[0163] Figure 13 This is a structural example diagram of a page display device provided in an embodiment of this disclosure. For example... Figure 13 As shown, the page display device includes: a sending module 1301, a receiving module 1302, and an adapter module 1303.

[0164] The sending module 1301 is used to send screen state configuration information to the client. The screen state configuration information includes the target screen state of the display interface and is used to determine the first target screen state of the active fragment associated with the web page view component.

[0165] The receiving module 1302 is used to receive the height of the status bar on the display interface as fed back by the client.

[0166] The adaptation module 1303 is used to adjust the size of the webpage view component based on the height of the status bar and the target screen state, and to adapt the display content on the H5 page to the screen.

[0167] According to one embodiment of this disclosure, the adaptation module 1303 is further configured to: determine the adjustment direction of the webpage view component based on the target screen state; and adjust the size of the webpage view component according to the adjustment direction and the height of the status bar.

[0168] According to one embodiment of this disclosure, the apparatus further includes: if the target screen state is full-screen, determining the full-screen height of the display interface and the current height of the webpage view component; if the current height of the webpage view component is inconsistent with the full-screen height, determining the adjustment direction to be expansion; using the status bar height as the height increment of the webpage view component, performing an expansion operation on the webpage view component so that the webpage view component occupies the status bar.

[0169] According to one embodiment of this disclosure, the apparatus further includes: if the target screen state is a non-full-screen state, determining the default height of the non-full-screen display interface and the current height of the webpage view component; if the current height of the webpage view component is inconsistent with the default height, determining the adjustment direction to be shrinking; using the status bar height as the height reduction amount of the webpage view component, performing a shrinking operation on the webpage view component to cause the webpage view component to release the status bar.

[0170] According to one embodiment of this disclosure, the apparatus further includes: rendering the status bar as a transparent status bar if the target screen state is full-screen; or rendering the status bar as a non-transparent status bar if the target screen state is not full-screen.

[0171] According to one embodiment of this disclosure, the apparatus further includes: if the target screen is in full-screen mode, rendering the navigation bar on the display interface as a transparent navigation bar.

[0172] In the page display method provided in this disclosure, the first target screen state of the activity fragment is determined by sending screen state configuration information to the client. By receiving the status bar height feedback from the client, and based on the status bar height and the first target screen state, screen adaptation is performed on the content displayed on the H5 page to improve the user experience. Adapting the display content based on the client and front-end can be compatible with different types of electronic devices, and has better compatibility and reusability.

[0173] Figure 14 This is an example structural diagram of an electronic device provided in an embodiment of this disclosure. For example... Figure 14 As shown, the electronic device 1400 may include: a transceiver 1401, a processor 1402, and a memory 1403.

[0174] Processor 1402 executes computer execution instructions stored in memory, causing processor 1402 to perform the scheme in the above embodiments. Processor 1402 may be a general-purpose processor, including a central processing unit (CPU), a network processor (NP), etc.; it may also be a digital signal processor (DSP), an application-specific integrated circuit (ASIC), a field-programmable gate array (FPGA), or other programmable logic devices, discrete gate or transistor logic devices, or discrete hardware components.

[0175] The memory 1403 is connected to the processor 1402 via the system bus and completes communication between them. The memory 1403 is used to store computer program instructions.

[0176] Transceiver 1401 can be used to obtain the task to be run and its configuration information.

[0177] The system bus can be a Peripheral Component Interconnect (PCI) bus or an Extended Industry Standard Architecture (EISA) bus, etc. The system bus can be divided into address bus, data bus, control bus, etc. For ease of representation, only one thick line is used in the diagram, but this does not indicate that there is only one bus or one type of bus. Transceivers are used to enable communication between database access devices and other computers (e.g., clients, read-write libraries, and read-only libraries). Memory may include random access memory (RAM) and may also include non-volatile memory.

[0178] The electronic device provided in this disclosure can be the terminal device described in the above embodiments.

[0179] This disclosure also provides a chip for executing instructions, which is used to execute the page display method described in the above embodiments.

[0180] This disclosure also provides a computer-readable storage medium storing computer instructions that, when executed on a computer, cause the computer to perform the page display method described in the above embodiments.

[0181] This disclosure also provides a computer program product, which includes a computer program stored in a computer-readable storage medium. At least one processor can read the computer program from the computer-readable storage medium, and when the at least one processor executes the computer program, it can implement the technical solution of the page display method in the above embodiments.

[0182] Other embodiments of this disclosure will readily occur to those skilled in the art upon consideration of the specification and practice of the invention disclosed herein. This disclosure is intended to cover any variations, uses, or adaptations of this disclosure that follow the general principles of this disclosure and include common knowledge or customary techniques in the art not disclosed herein. The specification and examples are to be considered exemplary only, and the true scope and spirit of this disclosure are indicated by the following claims.

[0183] It should be understood that this disclosure is not limited to the precise structures described above and shown in the accompanying drawings, and various modifications and changes can be made without departing from its scope. The scope of this disclosure is limited only by the appended claims.

Claims

1. A page display method, characterized in that, The method, executed by the client, includes: Configure the associated activity fragment for the webpage view component, and obtain the first target screen state of the activity fragment; Based on the first target screen state, update the target screen state of the web page view component to the first target screen state, and based on the target screen state of the web page view component, determine the target state of the status bar on the display interface corresponding to the front-end H5 page, and configure the status bar to be transparent based on the target state. Based on the version of the electronic device system or by establishing a status bar height module, the height of the status bar is obtained and fed back to the front end to adapt the display content of the H5 page to the screen.

2. The method according to claim 1, characterized in that, The step of determining the target state of the status bar on the display interface corresponding to the front-end H5 page based on the target screen state of the webpage view component includes: Identify the target screen state of the webpage view component; If the target screen state of the webpage view component is full-screen, then the target state of the status bar is determined to be occupied. If the target screen state of the webpage view component is a non-fullscreen state, the target state of the state is determined to be a released state.

3. The method according to claim 2, characterized in that, The transparent configuration of the status bar based on the target state includes: If the target state is occupied, determine the current background color of the status bar. If the current background color is non-transparent, configure the background color of the status bar to be transparent to obtain a transparent status bar. Alternatively, if the target state is a released state, determine the current background color of the status bar. If the current background color is a transparent color, configure the background color of the status bar to a non-transparent color to obtain a non-transparent status bar.

4. The method according to claim 1, characterized in that, The step of obtaining the first target screen state of the active fragment includes: Receive screen status configuration information sent by the front end; Based on the screen state configuration information, update the screen state of the active fragment to obtain the first target screen state.

5. The method according to any one of claims 1-4, characterized in that, The method further includes: If the target screen is in full-screen mode, the background color of the navigation bar on the display interface is set to transparent to obtain a transparent navigation bar.

6. The method according to claim 5, characterized in that, After feeding back the height of the status bar to the front end to adapt the display content of the H5 page to the screen, it also includes: Receive a screen state switching instruction sent by the front end, the screen state switching instruction including the second target screen state of the active fragment; if the first target screen state is full screen and the second target screen state is non-full screen, then configure the status bar to be a non-transparent status bar, the navigation bar to be a non-transparent navigation bar, and / or feed back the height of the status bar to the front end; If the first target screen is in a non-full-screen state and the second target screen is in a full-screen state, then the status bar is configured as a transparent status bar, the navigation bar is configured as a transparent navigation bar, and / or the height of the status bar is fed back to the front end.

7. A page display method, characterized in that, Executed by the front end, the method includes: Send screen state configuration information to the client. The screen state configuration information includes the target screen state of the display interface, and is used to determine the first target screen state of the activity fragment associated with the web page view component. The target screen state is a non-full-screen state, the first target screen state is a non-full-screen state, the target screen state is a full-screen state, and the first target screen state is a full-screen state. Receive the height of the status bar on the display interface as reported by the client; Based on the target screen state, determine the adjustment direction of the webpage view component; Adjust the size of the webpage view component according to the adjustment direction and the height of the status bar, and adapt the displayed content on the H5 page to the screen.

8. The method according to claim 7, characterized in that, The method further includes: If the target screen is in full-screen mode, determine the full-screen height of the display interface and the current height of the webpage view component; The current height of the webpage view component is inconsistent with the full screen height, so the adjustment direction is determined to be expansion; The status bar height is used as the height increment of the webpage view component to expand the webpage view component so that the webpage view component occupies the status bar.

9. The method according to claim 7, characterized in that, The method further includes: If the target screen state is not full-screen, determine the default height of the non-full-screen display interface and the current height of the webpage view component; The current height of the webpage view component is inconsistent with the default height, so the adjustment direction is determined to be shrinking. The status bar height is used as the height reduction amount of the webpage view component to shrink the webpage view component, thereby releasing the status bar.

10. The method according to claim 7, characterized in that, The method further includes: If the target screen is in full-screen mode, render the status bar as a transparent status bar; or... If the target screen is not in full-screen mode, the status bar will be rendered as a non-transparent status bar.

11. The method according to any one of claims 7-10, characterized in that, The method further includes: If the target screen is in full-screen mode, the navigation bar on the display interface will be rendered as a transparent navigation bar.

12. A page display device, characterized in that, For use with a client, the device includes: The acquisition module is used to configure the associated activity fragments for the web page view components and acquire the first target screen state of the activity fragments; The configuration module is used to update the target screen state of the web page view component to the first target screen state according to the first target screen state, and to determine the target state of the status bar on the display interface corresponding to the front-end H5 page based on the target screen state of the web page view component, and to configure the status bar to be transparent based on the target state. An adaptation module is used to obtain the height of the status bar based on the version of the electronic device system or a status bar height module, and to feed back the height of the status bar to the front end to adapt the display content of the H5 page to the screen.

13. The apparatus according to claim 12, characterized in that, The configuration module is also used for: Identify the target screen state of the webpage view component; If the target screen state of the webpage view component is full-screen, then the target state of the status bar is determined to be occupied. If the target screen state of the webpage view component is a non-fullscreen state, the target state of the state is determined to be a released state.

14. The apparatus according to claim 13, characterized in that, The configuration module is also used for: If the target state is occupied, determine the current background color of the status bar. If the current background color is non-transparent, configure the background color of the status bar to be transparent to obtain a transparent status bar. Alternatively, if the target state is a released state, determine the current background color of the status bar. If the current background color is a transparent color, configure the background color of the status bar to a non-transparent color to obtain a non-transparent status bar.

15. The apparatus according to claim 12, characterized in that, The acquisition module is also used for: Receive screen status configuration information sent by the front end; Based on the screen state configuration information, update the screen state of the active fragment to obtain the first target screen state.

16. The apparatus according to any one of claims 12-15, characterized in that, The device further includes: If the target screen is in full-screen mode, the background color of the navigation bar on the display interface is set to transparent to obtain a transparent navigation bar.

17. The apparatus according to claim 16, characterized in that, The adapter module is also used for: Receive a screen state switching instruction sent by the front end, the screen state switching instruction including the second target screen state of the active fragment; if the first target screen state is full screen and the second target screen state is non-full screen, then configure the status bar to be a non-transparent status bar, the navigation bar to be a non-transparent navigation bar, and / or feed back the height of the status bar to the front end; If the first target screen is in a non-full-screen state and the second target screen is in a full-screen state, then the status bar is configured as a transparent status bar, the navigation bar is configured as a transparent navigation bar, and / or the height of the status bar is fed back to the front end.

18. A page display device, characterized in that, Suitable for the front end, the device includes: The sending module is used to send screen state configuration information to the client. The screen state configuration information includes the target screen state of the display interface and is used to determine the first target screen state of the active fragment associated with the web page view component. The receiving module is used to receive the height of the status bar on the display interface as reported by the client. An adaptation module is used to determine the adjustment direction of the webpage view component according to the target screen state, adjust the size of the webpage view component according to the adjustment direction and the height of the status bar, and adapt the display content on the H5 page to the screen.

19. The apparatus according to claim 18, characterized in that, The device further includes: If the target screen is in full-screen mode, determine the full-screen height of the display interface and the current height of the webpage view component; The current height of the webpage view component is inconsistent with the full screen height, so the adjustment direction is determined to be expansion; The status bar height is used as the height increment of the webpage view component to expand the webpage view component so that the webpage view component occupies the status bar.

20. The apparatus according to claim 18, characterized in that, The device further includes: If the target screen state is not full-screen, determine the default height of the non-full-screen display interface and the current height of the webpage view component; The current height of the webpage view component is inconsistent with the default height, so the adjustment direction is determined to be shrinking. The status bar height is used as the height reduction amount of the webpage view component to shrink the webpage view component, thereby releasing the status bar.

21. The apparatus according to claim 18, characterized in that, The device further includes: If the target screen is in full-screen mode, render the status bar as a transparent status bar; or... If the target screen is not in full-screen mode, the status bar will be rendered as a non-transparent status bar.

22. The apparatus according to any one of claims 18-21, characterized in that, The device further includes: If the target screen is in full-screen mode, the navigation bar on the display interface will be rendered as a transparent navigation bar.

23. An electronic device, characterized in that, include: A processor, and a memory communicatively connected to the processor; The memory stores computer-executed instructions; The processor executes computer execution instructions stored in the memory to implement the method as described in any one of claims 1-6, or to implement the method as described in any one of claims 7-11.

24. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores computer-executable instructions, which, when executed by a processor, are used to implement the method as described in any one of claims 1-6, or to implement the method as described in any one of claims 7-11.

25. A computer program product, characterized in that, Includes a computer program that, when executed by a processor, implements the method of any one of claims 1-6, or implements the method of any one of claims 7-11.