Page display method and electronic device

Abstract

A page display method and electronic device are disclosed, relating to the field of terminal technology. The method includes: displaying a first interface of a browser application, the first interface including a first webpage image; sending a folding screen event to the first webpage after the folding screen state of the electronic device changes, the folding screen event including the changed first folding screen state; receiving first webpage data from the first webpage; and displaying a second interface of the browser application based on the first webpage data, the second interface including a second webpage image of the first webpage. This allows for the display of webpage images with appropriate layout and content in the browser application as the folding screen state of the electronic device changes, improving the webpage browsing experience.

Description

Technical Field

[0001] This application relates to the field of terminal technology, and in particular to a page display method and an electronic device. Background Technology

[0002] Currently, an increasing number of device manufacturers have launched foldable screen phones. Furthermore, to adapt to the different states of foldable screen phones, such as folded and unfolded states, application developers have customized corresponding page layouts. This ensures that applications can display appropriate page layouts regardless of the foldable screen phone's state.

[0003] However, users have found that web pages displayed by browser applications do not adapt well to the different states of foldable phones, potentially causing inconvenience for viewing and operation, and affecting the human-computer interaction experience. For example, web page content displayed by browser applications may be truncated or incomplete, elements may be misaligned, overlapping, or improperly arranged, affecting readability. As another example, buttons on web pages may be unclickable or input boxes may be unusable, preventing normal user interaction. Summary of the Invention

[0004] This application provides a page display method and an electronic device that can display web page images with appropriate layout and content (also referred to as elements) in a browser application as the folding screen state of the electronic device changes, thereby improving the web page browsing experience.

[0005] To achieve the above objectives, this application adopts the following technical solution:

[0006] Firstly, a page display method and an electronic device are provided, which can be applied to electronic devices, including browser applications.

[0007] Specifically, the method includes: displaying a first interface of a browser application, the first interface including a first webpage image of a first webpage, such as interface 502, interface 701, etc. After the folded screen state of the electronic device changes, such as from a folded state to an unfolded state, a folded screen event is sent to the first webpage, the folded screen event including the changed first folded screen state. That is, the change in the folded screen state is synchronized to the first webpage. First webpage data is received from the first webpage. A second interface of the browser application is displayed based on the first webpage data, the second interface including a second webpage image of the first webpage, such as interface 601, interface 702, etc. Wherein, the first webpage elements in the first webpage image are different from the second webpage elements in the second webpage image, and / or, the layout of the first webpage elements is different from the layout of the second webpage elements.

[0008] In summary, by employing this application, an electronic device can synchronize its real-time folded screen state with a first webpage, allowing the first webpage to update its data based on this state, such as adjusting webpage elements and layout parameters. This results in the first webpage data being matched with the real-time folded screen state, and subsequently, a second webpage image obtained by the electronic device based on this data can also be matched with the real-time folded screen state. This enables the display of webpage images with appropriate layouts and elements in a browser application as the folded screen state of the electronic device changes.

[0009] In one possible design approach of the first aspect, after the folding screen state of the electronic device changes, before sending a folding screen event to the first webpage, the method further includes: detecting whether the first webpage is listening to the folding screen state. Sending a folding screen event to the first webpage includes: after detecting that the first webpage is listening to the folding screen state, sending a folding screen event to the first webpage.

[0010] Using this design, the electronic device can determine whether the first webpage is configured to adjust webpage data based on the folded screen state by detecting whether the first webpage is listening to the folded screen state. Specifically, if the electronic device detects that the first webpage is listening to the folded screen state, it indicates that the first webpage can adjust its data based on the folded screen state, and the electronic device then sends a folded screen event to the first webpage. In this way, the electronic device can dispatch folded screen events to webpages configured to adjust their data based on the folded screen state, achieving on-demand dispatch, reducing unnecessary communication, and saving communication resources.

[0011] In one possible design of the first aspect, the method further includes: after detecting that the first webpage is not monitoring the folded screen state, sending the display size after the folded screen state change to the first webpage; receiving second webpage data from the first webpage; displaying a third interface of the browser application based on the second webpage data, the third interface including a third webpage image of the first webpage. Wherein, the third webpage elements in the third webpage image are different from the second webpage elements in the second webpage image, and / or, the layout of the third webpage elements is different from the layout of the second webpage elements.

[0012] In this scenario, if the electronic device detects that the first webpage is not monitoring the folded screen state, it indicates that the first webpage will not adjust its data based on the folded screen state, and therefore the electronic device will not send a folded screen event to the first webpage. Using this design approach, to address this situation, the electronic device can send the screen size corresponding to the change in folded screen state to the first webpage. For example, after changing to the unfolded state, it can send the unfolded folded screen size, allowing the first webpage to adjust its data based on the screen size to obtain the second webpage data. In this way, the second webpage data can match the real-time screen size, such as filling the entire screen. Subsequently, the third webpage image obtained by the electronic device based on the second webpage data can also match the screen size. However, the effect of the third webpage image differs from that of the second webpage image. For example, in the unfolded state, the third webpage image simply fills the screen, and the webpage elements in the third webpage image cannot be distributed reasonably across multiple sub-screens as in interfaces 601 and 702.

[0013] In one possible design approach of the first aspect, detecting whether the first webpage is listening to the folded screen state includes: detecting whether the webpage code of the first webpage includes a function to listen for the folded screen state. If the webpage code of the first webpage includes a listener function, then the first webpage listens for the folded screen state. If the webpage code of the first webpage does not include a listener function, then the first webpage is not listening for the folded screen state.

[0014] Using this design approach, electronic devices can detect whether a first webpage is monitoring the folded screen state by analyzing its webpage code. For example, the electronic device can obtain and analyze the webpage code from the window object of the first webpage. This allows for accurate determination of whether the first webpage is monitoring the folded screen state based on the webpage code.

[0015] In one possible design approach in the first aspect, the foldable screen event also includes foldable screen types.

[0016] Different types of foldable screens, even in the same folded state, may use different displays, have different shapes and sizes, and consequently, require different webpage layouts and / or content. Therefore, browser engines notify webpages of the foldable screen type via foldable screen events, allowing for more accurate layout based on that type.

[0017] In one possible design of the first aspect, before displaying the first interface of the browser application, the method further includes: displaying a fourth interface of the browser application, such as interface 102 hereinafter, which includes a search input box and / or a webpage link to the first webpage. In response to an operation on the fourth interface, such as entering the URL of the first webpage in the search input box or clicking a webpage link to the first webpage, a webpage loading request is sent to the first webpage, the webpage loading request including the current second folding screen state of the electronic device. Third webpage data is received from the first webpage. The above-described display of the first interface of the browser application includes: displaying the first interface of the browser application based on the third webpage data.

[0018] Using this design, upon receiving a browsing request for the first webpage, the electronic device can synchronize the current second folding screen state to the first webpage, allowing the first webpage to determine the initial third webpage data based on the second folding screen state. In this way, the third webpage data can be matched with the folding screen state at the time of the request, and the subsequent first webpage image obtained by the electronic device based on the third webpage data can be matched with the folding screen state at the time of the request.

[0019] In one possible design approach of the first aspect, after the folding screen state of the electronic device changes, a folding screen event is sent to the first webpage, including: after the kernel of the browser application receives a notification of the folding screen state change, the folding screen event is sent to the first webpage.

[0020] Using this design, electronic devices can synchronize changes in the folded screen state to the first webpage through the browser application's kernel.

[0021] In one possible design approach of the first aspect, before the browser application's kernel receives notification of the folded screen state change, the method further includes: after the browser application starts, the browser application's web view instance registers to listen for the folded screen state. After a folded screen event changes, the web view instance listens for the change in the folded screen state and the subsequent first folded screen state. The web view instance notifies the kernel of the change in the folded screen state. This allows the web view instance to notify the kernel of the folded screen state change it has detected.

[0022] In one possible design approach of the first aspect, before sending the folding screen event to the first webpage, the method further includes: the browser application's kernel registering Document Object Model (DOM) events, including the folding screen event, with the window object of the first webpage. If a folding screen event is registered, the kernel generates the folding screen event upon receiving a notification of a change in the folding screen state.

[0023] Using this design approach, electronic devices can use the kernel to trigger screen collapse events on window objects, enabling the kernel to generate corresponding events and notify the webpage upon receiving a change in the screen collapse state.

[0024] Secondly, an electronic device is provided, comprising a memory and one or more processors. The memory is coupled to the processors. Computer program code, including instructions, is stored in the memory. When the instructions are executed by the processor, the electronic device performs the following steps: displaying a first interface of the browser application, the first interface including a first webpage image of a first webpage; sending a folding screen event to the first webpage after a change in the folded screen state of the electronic device, the folding screen event including the changed first folded screen state; receiving first webpage data from the first webpage; and displaying a second interface of the browser application based on the first webpage data, the second interface including a second webpage image of the first webpage. Wherein, a first webpage element in the first webpage image differs from a second webpage element in the second webpage image, and / or, the layout of the first webpage element differs from the layout of the second webpage element.

[0025] In one possible design approach of the second aspect, when the instruction is executed by the processor, the electronic device performs the following steps: detecting whether the first webpage is listening to the folded screen state; and sending a folded screen event to the first webpage after detecting that the first webpage is listening to the folded screen state.

[0026] In one possible design approach of the second aspect, when the instructions are executed by the processor, the electronic device performs the following steps: after detecting that the first webpage is not monitoring the folded screen state, it sends the display size after the folded screen state change to the first webpage. It receives second webpage data from the first webpage. Based on the second webpage data, it displays a third interface of the browser application, the third interface including a third webpage image of the first webpage. Wherein, the third webpage elements in the third webpage image are different from the second webpage elements in the second webpage image, and / or, the layout of the third webpage elements is different from the layout of the second webpage elements.

[0027] In one possible design approach of the second aspect, when the instruction is executed by the processor, the electronic device performs the following steps: detecting whether the webpage code of the first webpage includes a listener function for the folded screen state. If the webpage code of the first webpage includes the listener function, then the first webpage listens for the folded screen state. If the webpage code of the first webpage does not include the listener function, then the first webpage does not listen for the folded screen state.

[0028] In one possible design approach in the second aspect, the folding screen event also includes a folding screen type.

[0029] In one possible design of the second aspect, when the instructions are executed by the processor, the electronic device performs the following steps: displaying a fourth interface of the browser application, the fourth interface including a URL input box and / or a webpage link to the first webpage; in response to an operation on the fourth interface, sending a webpage loading request to the first webpage, including the current second folded screen state of the electronic device; receiving third webpage data from the first webpage; and displaying the first interface of the browser application based on the third webpage data.

[0030] In one possible design approach in the second aspect, when the instruction is executed by the processor, the electronic device performs the following steps: after the kernel of the browser application receives a notification of the folded screen state change, it sends a folded screen event to the first webpage.

[0031] In one possible design approach of the second aspect, when the instructions are executed by the processor, the electronic device performs the following steps: After the browser application starts, a web view instance of the browser application registers to listen for the folded screen state. After the folded screen event changes, the web view instance listens for the change in the folded screen state and the changed first folded screen state. The web view instance notifies the kernel of the change in the folded screen state.

[0032] In one possible design approach of the second aspect, when the instruction is executed by the processor, the electronic device performs the following steps: the kernel of the browser application registers Document Object Model (DOM) events with the window object of the first webpage, the DOM events including the folding screen event. If the folding screen event is registered, the kernel generates the folding screen event upon receiving a notification of a change in the folding screen state.

[0033] Thirdly, a computer-readable storage medium is provided that stores instructions which, when executed on an electronic device, cause the electronic device to perform any of the methods described in the first aspect.

[0034] Fourthly, a computer program product containing instructions is provided, which, when run on an electronic device, enables the electronic device to perform the method described in any one of the first aspects above.

[0035] Fifthly, embodiments of this application provide a chip, the chip including a processor, the processor being configured to invoke a computer program in memory to execute the method as described in the first aspect.

[0036] It is understood that the beneficial effects of the electronic device described in the second aspect, the computer-readable storage medium described in the third aspect, the computer program product described in the fourth aspect, and the chip described in the fifth aspect can be referred to the beneficial effects of the first aspect and any of its possible design embodiments, which will not be repeated here. Attached Figure Description

[0037] Figure 1 This is a schematic diagram of a web browsing scenario provided in an embodiment of this application;

[0038] Figure 2 This is a schematic diagram of a layout scheme;

[0039] Figure 3 This is a schematic diagram of another layout scheme;

[0040] Figure 4 To adopt Figure 2 and Figure 3 The layout scheme shown is illustrated in the diagram.

[0041] Figure 5A This is a schematic diagram of a web browsing interface;

[0042] Figure 5B This is a schematic diagram of another web browsing interface;

[0043] Figure 5C This is a schematic diagram of another type of web browsing interface;

[0044] Figure 5D This is a schematic diagram of a web browsing interface;

[0045] Figure 6 A schematic diagram of a web browsing interface provided for an embodiment of this application;

[0046] Figure 7 A schematic diagram of another web page browsing interface provided in an embodiment of this application;

[0047] Figure 8 A hardware structure diagram of a mobile phone provided in an embodiment of this application;

[0048] Figure 9 A software architecture diagram of a mobile phone provided in an embodiment of this application;

[0049] Figure 10 A schematic diagram of a foldable screen phone provided in an embodiment of this application;

[0050] Figure 11 A timing interaction diagram of a page display method provided in an embodiment of this application;

[0051] Figure 12A simplified module interaction diagram of a page display method provided in an embodiment of this application;

[0052] Figure 13 A flowchart illustrating a page display method provided in an embodiment of this application. Detailed Implementation

[0053] The technical solutions of the embodiments of this application are described below with reference to the accompanying drawings. In the description of the embodiments of this application, the terminology used in the following embodiments is for the purpose of describing specific embodiments only and is not intended to limit the application. As used in the specification and appended claims of this application, the singular expressions "a," "the," "the," "the," and "this" are intended to also include expressions such as "one or more," unless the context clearly indicates otherwise. It should also be understood that in the following embodiments of this application, "at least one" and "one or more" refer to one or more (including two). The term "and / or" is used to describe the relationship between related objects, indicating that three relationships can exist; for example, A and / or B can represent: A alone, A and B simultaneously, or B alone, where A and B can be singular or plural. The character " / " generally indicates that the preceding and following related objects are in an "or" relationship.

[0054] References to "one embodiment" or "some embodiments" in this specification mean that one or more embodiments of this application include a specific feature, structure, or characteristic described in connection with that embodiment. Therefore, the phrases "in one embodiment," "in some embodiments," "in other embodiments," "in still other embodiments," etc., appearing in different parts of this specification do not necessarily refer to the same embodiment, but rather mean "one or more, but not all, embodiments," unless otherwise specifically emphasized. The terms "comprising," "including," "having," and variations thereof mean "including but not limited to," unless otherwise specifically emphasized. The term "connection" includes direct connections and indirect connections, unless otherwise stated. "First" and "second" are used for descriptive purposes only and should not be construed as indicating or implying relative importance or implicitly specifying the number of technical features indicated.

[0055] In the embodiments of this application, the words "exemplarily" or "for example" are used to indicate examples, illustrations, or explanations. Any embodiment or design described as "exemplarily" or "for example" in the embodiments of this application should not be construed as being more preferred or advantageous than other embodiments or design solutions. Specifically, the use of the words "exemplarily" or "for example" is intended to present the relevant concepts in a specific manner.

[0056] The page display method provided in this application can be applied to electronic devices including flexible foldable screens (hereinafter referred to as foldable screens). The foldable screen can be used for display. A foldable screen refers to a screen made partially or entirely of flexible material. In some embodiments, the foldable portion of the foldable screen (which may be referred to as the folding edge, hinge, pivot, etc., hereinafter collectively referred to as the folding edge) is made of flexible material, while other portions are made of rigid material. The foldable screen can be folded along the folding edge to form multiple (two or more) screens, also referred to as multiple sub-screens.

[0057] For example, the aforementioned electronic device can be any device such as a mobile phone, tablet computer, or laptop computer whose display screen can be set as a flexible foldable screen. The following description primarily uses a mobile phone as an example to illustrate the embodiments of this application.

[0058] Furthermore, the page display method provided in this application embodiment can be applied to scenarios where browser applications in mobile phones display web page content, and can be used for the layout and display of web page content.

[0059] See Figure 1 The phone can display interface 101, which includes a browser application icon 101-a. In response to a user's action on icon 101-a, the phone can display interface 102 (also known as the fourth interface), which is the main interface of the browser application. Interface 102 includes a search box 102-a, shortcuts to various websites (such as shortcuts to website 1, website 2, website 3, etc.), and shortcuts to trending news (such as shortcuts to trending topics 1, trending topics 2, etc.). In interface 102, users can enter a website address in the search box 102-a, perform a trigger action on a website shortcut, or perform a trigger action on a trending news shortcut, all of which will trigger the loading and display of the corresponding webpage. For example, in response to a user's click on the shortcut 102-b for trending topics 1, the phone can display interface 103 for trending topics 1. Interface 103 is a webpage interface.

[0060] In some implementations, mobile phones can use the following layout schemes to lay out web page content:

[0061] Option 1: Fixed layout.

[0062] In this fixed-layout layout, all elements on the webpage have a fixed width that doesn't change with the window size. This means that on a phone with a widescreen display (also known as a "first-width" screen), the webpage content can be centered, with potentially large blank areas on either side. On a phone with a medium-width display (smaller than the first width), the webpage content may not be fully displayed. On a narrow-screen display (smaller than the second width), elements may overlap or extend beyond the screen. In this fixed-layout solution, even on medium- or narrow-screen phones where the webpage content cannot be fully displayed, a horizontal scrollbar can be provided to allow users to scroll left and right to view the entire webpage content.

[0063] See Figure 2 When the webpage content "This is a piece of text" is displayed on a widescreen phone, there is a lot of blank space on both sides of the text. When the webpage content "This is a piece of text" is displayed on a medium-sized phone, the blank space on both sides of the text is reduced. When the webpage content "This is a piece of text" is displayed on a narrow-screen phone, the "text" part of the webpage content "This is a piece of text" is missing, and a horizontal scroll bar 201 is provided at the bottom of the interface for scrolling left and right to display the complete "This is a piece of text".

[0064] Option 2: Flow layout.

[0065] The number of elements displayed in a row on a webpage automatically adjusts based on the width of the screen. This means that on widescreen phones, more elements can be displayed in a row; on medium-screen phones, fewer elements; and on narrow-screen phones, even fewer elements. However, no horizontal scrollbar will appear.

[0066] See Figure 3 When the webpage content "Image 1", "Text 1", and "Text 2" are displayed on a widescreen phone, they can be shown on the same line. When the webpage content "Image 1", "Text 1", and "Text 2" are displayed on a medium-screen phone, "Image 1" and "Text 1" are displayed on one line, and "Text 2" is displayed on another line. When the webpage content "Image 1", "Text 1", and "Text 2" are displayed on a narrow-screen phone, "Image 1", "Text 1", and "Text 2" are each displayed on a separate line.

[0067] Using the above layout scheme, the webpage layout can be adaptively adjusted according to the height and width of the screen. See also Figure 4 On widescreen phones, browser applications can display more columns, as shown in the image with 3 columns; on medium-screen phones, browser applications display fewer columns, as shown in the image with 2 columns; and on narrow-screen phones, browser applications display even fewer columns, as shown in the image with 1 column.

[0068] However, using the above layout, the phone simply adjusts the webpage content layout according to the screen size, which is too simplistic and can easily lead to a poor user experience. Furthermore, if an unexpected screen size occurs, such as one not falling under the aforementioned limitations... Figure 4 If any of the three sizes is used, the phone can only match the current screen size by simple scaling, which may further lead to a poor user experience.

[0069] Examples of typical deficiencies are as follows:

[0070] Example 1: When a foldable screen is unfolded, the web page content in the browser application is simply stretched, resulting in the size and layout of various elements being too flat.

[0071] See Figure 5A After the foldable screen is unfolded, the phone can display interface 501. Compared to interface 103 mentioned earlier, the web page content in interface 501 is stretched, making the entire interface appear too flat and visually unappealing. For example, each line of text in the news article section 501-a of interface 501 contains more text, and the sides of the video area 501-b are padded (the fill is black in the image, but this is not actually the limit), making both the news article section 501-a and the video area 501-b appear flat.

[0072] Example 2: After the foldable screen is unfolded, the images, text and other elements in the webpage content are widened, but the actual content displayed does not change, and the widening causes deformation.

[0073] See Figure 5B When the foldable screen is folded, the phone can display interface 502, where the display ratio of each element of the webpage content is appropriate. When the foldable screen is unfolded, the phone can display interface 503a, where the text, images, and other elements of the webpage content are deformed. Furthermore, compared to interface 502, the webpage content in interface 503a is simply widened, without displaying any additional content.

[0074] Example 3: The foldable screen is in a folded state, and after folding, two sub-screens are visible to the user. The size of one sub-screen (denoted as the second sub-screen) is smaller than the size of the other sub-screen (denoted as the first sub-screen). When displayed on the second sub-screen, the images, text and other elements in the web page content are compressed and deformed.

[0075] See Figure 5B and Figure 5CInterface 502 shows the webpage content displayed in the first sub-screen, and interface 503b shows the webpage content displayed in the second sub-screen. Compared to interface 502, the webpage content in interface 503b is simply compressed and distorted.

[0076] Example 4: After the foldable screen is unfolded, some web page elements in the browser application may become misaligned.

[0077] See Figure 5D When the foldable screen is folded, the phone displays interface 504. In interface 504, the upward indicator 504-b of button 504-a is located in the center of the circular border of button 504-a. Button 504-a can be used to trigger a return to the top of interface 504. After the foldable screen is unfolded, the phone displays interface 505. In interface 505, the upward indicator 504-b of button 504-a is located at the top edge of the circular border of button 504-a, indicating that the upward indicator 504-b is misaligned with the circular border.

[0078] Of course, besides Examples 1 and 2 above, using the existing layout scheme may also result in other poor user experiences. For example, webpage content may be truncated, incompletely displayed, overlapped, or improperly arranged, affecting readability. Another example is that buttons may become unclickable or input fields may become unusable, preventing normal user interaction. Yet another example is that webpage content may not adapt to changes in the foldable screen's state.

[0079] To address the aforementioned issues, this application provides a page display method in which a mobile phone can adjust the layout and content of a webpage based on the folded screen state, so that the layout of the webpage content displayed by the browser application matches the folded screen state.

[0080] See Figure 5B and Figure 6 Interface 502 includes area 502-a, where video 502-b is playing. Using the page display method provided in this embodiment, when the foldable screen is unfolded and in a semi-folded or unfolded state, the mobile phone can display interface 601. Interface 601 includes area 601-a and area 601-b, each occupying approximately half of the display screen, and arranged horizontally. Area 601-a further includes area 502-a. No video is playing in area 502-a of interface 601. Video 502-b is playing in area 601-b. Thus, after the foldable screen is unfolded, web page content can be displayed and videos played in a more suitable layout, without deformation as seen in interface 504.

[0081] See Figure 7When the foldable screen is folded, the phone displays interface 701, which is the homepage of a website. Interface 701 includes multiple tags such as "Recommended," "Hot Searches," and "Entertainment," multiple news headlines such as "AAA...", "BBB...", and "CCC...", and also includes a portion of User Activity 1 and User Activity 2. When the foldable screen is unfolded and in a semi-folded or unfolded state, the phone displays interface 702. Compared to interface 701, interface 702 includes more tags such as "Short Videos" and "Novels," meaning more tags can be displayed on a single screen. Furthermore, compared to interface 701, interface 702 includes all of User Activity 2, User Activity 3, and User Activity 4, allowing for more web page content to be displayed on a single screen. Also, compared to interface 701, the order of multiple user activities in interface 702 has changed; User Activity 2 is no longer immediately following User Activity 1, a layout that makes full use of display space. Thus, when the foldable screen is unfolded, more web page content can be displayed, and more web page content can be rationally arranged on a large-size display.

[0082] See Figure 8 This is a hardware structure diagram of a mobile phone provided in an embodiment of this application. Figure 8 As shown, a mobile phone may include a processor 110, an external memory interface 120, an internal memory 121, a universal serial bus (USB) interface 130, a charging management module 140, a power management module 141, a battery 142, an antenna 1, an antenna 2, a mobile communication module 150, a wireless communication module 160, an audio module 170, a speaker 170A, a receiver 170B, a microphone 170C, a headphone jack 170D, a sensor 180, buttons 190, a motor 191, an indicator 192, a camera 193, a display screen 194, and a subscriber identification module (SIM) card interface 195, etc.

[0083] It is understood that the structures illustrated in the embodiments of the present invention do not constitute a specific limitation on the mobile phone. In other embodiments of this application, the mobile phone may include more or fewer components than illustrated, or combine some components, or split some components, or have different component arrangements. The illustrated components may be implemented in hardware, software, or a combination of software and hardware.

[0084] Processor 110 may include one or more processing units, such as application processors (APs), modem processors, graphics processing units (GPUs), image signal processors (ISPs), controllers, memory, video codecs, digital signal processors (DSPs), baseband processors, and / or neural network processing units (NPUs). These different processing units may be independent devices or integrated into one or more processors.

[0085] The wireless communication function of a mobile phone can be implemented through antenna 1, antenna 2, mobile communication module 150, wireless communication module 160, modem processor, and baseband processor.

[0086] The mobile phone implements its display function through a GPU, a display screen 194, and an application processor. The GPU is a microprocessor for image processing, connected to the display screen 194 and the application processor. The GPU is used to perform mathematical and geometric calculations and for graphics rendering. The processor 110 may include one or more GPUs, which execute program instructions to generate or modify display information.

[0087] The display screen 194 is used to display images, videos, etc. In this embodiment, the display screen 194 includes a foldable screen, which can be folded to form at least two screens. The foldable screen has various shapes and forms.

[0088] For example, depending on the number of screens formed by folding, foldable screens can include bi-fold foldable screens and multi-fold (such as tri-fold and above) foldable screens.

[0089] For example, based on the positional relationship of the sub-screens, a foldable screen can include an inward-folding foldable screen, an outward-folding foldable screen, and a foldable screen combining inward and outward folding. In the case of an inward-folding foldable screen, at least two sub-screens formed by folding are oriented opposite to each other; in the case of a foldable screen combining inward and outward folding, at least two sub-screens are oriented opposite to each other, while another portion of the sub-screens are oriented opposite to each other.

[0090] As another example, depending on the folding direction, a foldable screen can include a horizontally foldable screen and a vertically foldable screen. The folding edge of a horizontally foldable screen is perpendicular to the width direction of the screen, while the folding edge of a vertically foldable screen is perpendicular to the height direction of the screen.

[0091] Mobile phones can achieve shooting functions through ISP, camera 193, video codec, GPU, display 194 and application processor.

[0092] Mobile phones can perform audio functions, such as music playback and recording, through components like the audio module 170, speaker 170A, receiver 170B, microphone 170C, headphone jack 170D, and application processor.

[0093] Furthermore, sensor 180 may include, but is not limited to, gyroscope sensor 180B, magnetic sensor 180D, and accelerometer sensor 180E.

[0094] The 180E accelerometer can detect the magnitude of a mobile phone's acceleration in various directions (typically three axes). When the phone is stationary, it can detect the magnitude and direction of gravity. Furthermore, the 180E accelerometer can also be used to identify the phone's posture, applicable to screen orientation switching, pedometers, and more.

[0095] In practice, each sub-screen in a foldable screen is equipped with a gyroscope sensor 180B and an accelerometer sensor 180E. The magnetic sensor 180D includes a Hall sensor.

[0096] In some possible cases, Hall sensors can be implemented directly based on a physical Hall sensor, or they can be implemented based on a virtual Hall sensor (also known as a digital Hall sensor) based on a magnetometer; there are no restrictions here.

[0097] Taking a virtual Hall sensor as an example, a virtual Hall sensor can determine whether two screens are closed or far apart, and the approximate angle range, based on the magnetic force threshold sensed by the magnetometer.

[0098] In some cases, the phone may also include an attitude sensor (not shown in the figure). This attitude sensor can be a physical sensor, or a virtual attitude sensor that combines data from sensors such as angles and accelerations, or virtual sensor data on the included angle, implemented using a fusion algorithm. The attitude sensor can provide richer and more accurate foldable screen state data, such as folded state, half-folded state, unfolded state, tent state, and calendar state. This foldable screen state data can be used by the phone to decide whether to turn the individual sub-screens on or off, and can also be used for webpage layout and display.

[0099] In other words, the mobile phone can calculate the included angle using gyroscope sensors 180B and accelerometer sensors 180E correspondingly located on the two sub-screens forming the included angle; it can also use a digital Hall sensor to obtain the included angle; or it can use a Hall sensor simulated by a magnetometer to map the included angle range. This determines the folding screen state. This application does not specifically limit the embodiments in this way.

[0100] Button 190 may include a power button, volume buttons, etc. Motor 191 can generate vibration alerts. Motor 191 can be used for incoming call vibration alerts or for touch vibration feedback. Indicator 192 may be an indicator light, used to indicate charging status, battery level changes, or to indicate messages, missed calls, notifications, etc. SIM card interface 195 is used to connect a SIM card.

[0101] The software system of the aforementioned electronic device can adopt a layered architecture, event-driven architecture, microkernel architecture, microservice architecture, or cloud architecture. This application uses a layered Android system as an example to illustrate the software structure of the electronic device. See also... Figure 9 This is a software structure block diagram of a mobile phone provided in an embodiment of this application. Figure 9 As shown, a layered architecture divides software into several layers, each with a clear role and function. Layers communicate with each other through software interfaces. For example, from top to bottom, these are the application layer, framework layer, hardware abstraction layer (HAL), and kernel layer (also known as the driver layer). It should be understood that in practical applications, besides... Figure 9 In addition to the layers shown, the layered architecture may include more or fewer layers. This application does not limit this.

[0102] The application layer can include a series of application packages. For example, it may include application packages such as camera, calendar, music, gallery, calling, navigation, and Bluetooth, which are not shown in the figure.

[0103] In some embodiments, the application layer may further include a browser application. The browser application can provide web browsing services. In web browsing scenarios, the mobile phone layouts and displays the webpage based on its folded screen state.

[0104] The framework layer provides application programming interfaces (APIs) and programming frameworks for applications in the application layer, as well as various services. Furthermore, the framework layer may include an application framework layer (also known as a Java framework layer) and a native layer. The modules included in the framework layer described below may reside in the application framework layer, the native layer, or may be distributed across both the application framework layer and the native layer. This application does not specifically limit this.

[0105] The framework layer can include device status management services and sensor services.

[0106] After registering the attitude sensor and Hall sensor with the sensor service, the device state management service can receive attitude events reported by the attitude sensor and Hall events reported by the Hall sensor. The device state management service then determines the foldable screen state based on the attitude events and / or Hall events.

[0107] Understandably, as the foldable screen unfolds or folds, the angles between its multiple sub-screens change, and consequently, the foldable screen's state changes. Typically, a new attitude event reported by the attitude sensor and / or a new Hall event reported by the Hall sensor indicates a change in the foldable screen's state.

[0108] Among them, the sensor service can be used to report received attitude events and Hall events to the device status management service.

[0109] In one specific implementation, the foldable screen states can mainly include: unfolded state, folded state (also known as closed state), and semi-folded state. The unfolded state refers to the state where the angle between at least two sub-screens is approximately 180°, the folded state refers to the state where the angle between at least two sub-screens is approximately 0°, and the semi-folded state refers to the state between the unfolded state and the folded state.

[0110] Furthermore, the foldable screen states can also include the outward folding secondary screen state, the rear selfie state, the tent state, the calendar state, etc.

[0111] The "secondary screen state" of the outward-folding screen refers to the state in which the secondary screen is lit and used when the outward-folding screen is in the folded state, such as displaying a QR code on the secondary screen for merchants to scan. The secondary screen refers to the sub-screen that is facing away from the user when the outward-folding screen is folded into at least two sub-screens.

[0112] For example, will Figure 10 When the outward-folding screen 1001 is folded from its semi-folded state, it reaches Fold State 1. Fold State 1 is the normal usage state of the outward-folding screen 1001 when folded. Since the rear camera is located on the back of the first screen 1001-a, which occupies space, the area of ​​the second screen 1001-b is usually smaller than that of the first screen 1001-a. Therefore, using the first screen 1001-a as the main screen can increase the display area and improve the user experience. In Fold State 1, the first screen 1001-a faces the user, while the second screen 1001-b faces away from the user. The state in which the second screen 1001-b is lit up is the state of using it as a secondary screen.

[0113] Among them, the rear selfie mode refers to the state in which the selfie is taken by the rear camera when the outward-folding screen is in the folded state, and the shooting interface is displayed on the secondary screen.

[0114] For example, will Figure 10 When the outward-folding screen 1001 in the middle half-folding state is folded, it can be folded into folded state 2. In folded state 2, the first screen 1001-a is used with its back to the user, while the second screen 1001-b is used with its face to the user. The rear camera 1002 is activated to take a picture, and the shooting interface is displayed on the second screen 1001-b, which is the rear selfie state.

[0115] Among them, "tent state" refers to the folding screen folding into a shape resembling a tent. "Calendar state" refers to the folding screen folding into a shape resembling a desk calendar.

[0116] The framework layer can also include webview interfaces and foldable screen interfaces.

[0117] The webpage view interface enables webpage loading. For example, the webpage view interface can provide at least one of the following methods:

[0118] loadUrl(String url): Loads the specified Uniform Resource Locator (URL).

[0119] postUrl(String url, byte[]postData): Loads a URL using a POST request.

[0120] evaluateJavascript(String script,ValueCallback <string>resultCallback: Executes JavaScript code and retrieves the result.

[0121] goBack(): Navigates to the previous page.

[0122] goForward(): Navigates to the next page.

[0123] The foldable screen interface can sense the foldable screen's state. Specifically, it can detect the current foldable screen state and changes in that state.

[0124] The framework layer can also include webpage view instances and browser engines. Webpage view instances are concrete instantiated objects created from the webpage view interface. They can be used to load webpages and respond to user interactions. Browser engines are primarily responsible for interpreting Hypertext Markup Language (HTML) and Cascading Style Sheets (CSS) data and rendering the webpage images.

[0125] The Hardware Abstraction Layer (HAL) encapsulates the underlying hardware drivers and provides a generic interface for calling the drivers to activate the corresponding hardware. The HAL can include attitude sensor interfaces and Hall sensor interfaces. The attitude sensor interface manages registered attitude sensors, receives attitude events uploaded by these sensors, and sends these events to the sensor service. The Hall sensor interface manages registered Hall sensors, receives Hall events uploaded by these sensors, and sends these events to the sensor service.

[0126] The kernel layer includes drivers that enable hardware operation, such as display drivers and camera drivers.

[0127] Understandable, Figure 9 The diagram shown is an exemplary software block diagram of an electronic device and should not be construed as limiting the embodiments of this application. For example, the location (e.g., the level to which the modules belong) of the various modules may differ in actual applications.

[0128] The page display method provided in this application embodiment can be executed in a mobile phone with the above-described hardware and software structure.

[0129] The aforementioned browser kernel can monitor changes in the folded screen state and dispatch this information to the webpage, allowing the webpage to update its elements and CSS data in real time based on the folded screen state. For example, after the folded screen state changes from folded to unfolded, the webpage can update the playback area of ​​the aforementioned video 502-b from area 502-a in interface 502 to area 601-b in interface 601. Subsequently, the browser kernel can perform layout and rendering based on the updated webpage elements and CSS data, resulting in a webpage image whose layout and content match the folded screen state.

[0130] For details, see Figure 11 The page display method includes the following steps:

[0131] S1100, browser application launched.

[0132] For example, the browser application can be launched in response to a user clicking on the application icon of the browser application.

[0133] S1101, The browser application receives a webpage browsing request.

[0134] The webpage requested to be viewed can also be called the first webpage.

[0135] For example, in response to a user entering a URL in the search box of a browser application and performing a search, the browser application can receive a webpage browsing request.

[0136] For example, in response to a user's selection of any URL in the browser application's interface, the browser application can also receive a webpage browsing request.

[0137] S1102, The browser application requests the webpage view interface to load the webpage.

[0138] The requested webpage is the webpage requested by the user, such as the webpage corresponding to the URL searched by the user or the webpage corresponding to the URL selected by the user.

[0139] S1103, The webpage view interface requests the webpage to be loaded from the webpage view instance.

[0140] It should be noted that when loading a webpage for the first time after launching the browser application, the webpage view interface should first create a webpage view implementation.

[0141] S1104, The web page view instance performs its first initialization.

[0142] The first initialization refers to the initialization of webpage view instances, such as defining webpage views in the layout file, initializing webpage views in an activity, and initializing webpage view instances associated with the webpage. Defining and initializing webpage views can be performed only when the webpage is first loaded after the browser is launched; subsequent loads do not require repeated initialization.

[0143] S1105. During the first initialization process, the web page view instance registers a foldable state listener with the foldable screen interface.

[0144] In some implementations, the webpage view instance can register the ViewInstanceManager during the first initialization process when the webpage is loaded for the first time after the browser application is launched. Subsequent loadings of the webpage do not require repeated registration.

[0145] After a web view instance registers a FoldableStateListener with the foldable screen interface, it can detect changes in the foldable screen state.

[0146] The `FoldableStateListener` can include an `onStateChange` method. This allows the web view instance to be aware of the change in foldable state and the resulting foldable state by calling the `onStateChange` method within `FoldableStateListener`.

[0147] Among them, the web page view instance can register the FoldableStateListener with the mobile phone system through the RegisterFoldableState method provided by the foldable screen interface.

[0148] For example, the `registerForlandAbleState` method is as follows:

[0149] registerFoldableState(FoldableStateListener, int type); / / Register a FoldableStateListener to listen to the foldable screen state specified by "int type", such as folded state, unfolded state, etc.

[0150] stat ic interface Fo ldab leStateListener{

[0151] void onStateChange(Bundle extra); / / Callback to the onStateChange method;

[0152] int fold_state = extra.getInt(fold_state", fold_state); / / Extract the folded screen state;

[0153] }

[0154] Additionally, after finishing browsing a webpage, the webpage view instance can unregister listeners to reduce unnecessary listening and save resources.

[0155] Specifically, closing the browser application or clearing the browser application's processes in the background will trigger the termination of web browsing.

[0156] For example, a webpage view instance can unregister the foldable state listener by using the unregisterFoldableState method provided by the foldable screen interface.

[0157] S1106. The webpage view instance requests the browser kernel to load the webpage.

[0158] S1107, The browser kernel performs the second initialization.

[0159] The second initialization refers to the initialization of the browser kernel, including the initialization of the rendering process (or threads) and browser kernel initialization related to the webpage. The initialization of the rendering process can also be performed only when the webpage is loaded for the first time after the browser is launched; subsequent loads do not require repeated initialization.

[0160] S1108. The browser kernel registers Document Object Model (DOM) events with the window object of the webpage to be loaded. DOM events include screen collapse events.

[0161] DOM (Document Object Model) events are events generated in a browser when specific interactions occur with an HTML document or other objects within the browser. These events can be triggered by user actions (such as clicks, key presses, scrolling, etc.) or by the browser itself or the execution of scripts.

[0162] Typically, DOM events include keyboard, touch, and mouse events. In this embodiment, DOM events also include screen folding events, such as window.onfoldingscreen(event) or document.onfoldingscreen(event). Screen folding events are used to notify the webpage of changes in the screen folding state.

[0163] After registering the folding screen event, when the folding screen state changes, the browser kernel can generate the folding screen event and notify the webpage, allowing the webpage to obtain the real-time folding screen state.

[0164] The folding screen event includes an event type (type) attribute and a folding screen state (folding state) attribute. The event type indicates that it is a folding screen event; for example, if the event type value is "foldingscreen", it indicates that it is a folding screen event.

[0165] Furthermore, the folding screen event can also include a folding screen type attribute. Common folding screen types include, but are not limited to, at least two of the following: a two-fold horizontal inward folding screen, a two-fold vertical outward folding screen, a two-fold vertical inward folding screen, and a three-fold folding screen. Different folding screen types, even in the same folding state, may use different displays, have different shapes and sizes of displays, and consequently, different suitable webpage layouts and / or suitable webpage content. Based on this, the browser kernel notifies the webpage of the folding screen type through the folding screen event, allowing the webpage to be laid out more accurately based on the folding screen type.

[0166] For example, the code for registering a folded screen event by the browser kernel is as follows:

[0167]

[0168] In the above example, the unfolded, folded, half-folded, and unknown states listed in the folded screen event are only the scope of the folded screen state attribute defined during registration. Similarly, unknown device, two-fold vertical inward folded screen, two-fold horizontal outward folded screen, and three-fold folded screen are only the scope of the folded screen type attribute defined during registration. In the actual generated folded screen event, not all folded screen states and folded screen types need to be listed. For the specific composition of the folded screen event notified by the browser kernel to the webpage and the use of the folded screen event, please refer to the explanations in S1118-S1119 below, which will not be discussed in detail here.

[0169] It should be noted that the registered foldable screen events may include more or fewer foldable screen types and foldable screen states than in the examples above. In actual implementation, those skilled in the art can configure them flexibly according to actual needs.

[0170] When registering foldable screen events, Interface Definition Language (IDL) is typically used, while web pages can recognize JavaScript. Based on this, browser engines can also convert IDL to JavaScript.

[0171] After S1105 and S1108 above, the webpage view instance can perceive the change in the folded screen state and notify the browser kernel. The browser kernel can also perceive the change in the folded screen state in real time and further notify the webpage. For details, please refer to the process of S1115-S1118 below.

[0172] S1109. The browser kernel requests webpage data from the webpage to be loaded.

[0173] For example, web page data may include web page elements and CSS style data.

[0174] In HTML, you can use `<html>`, `<body>`, `<text>`, `<body>`, ` , Tags such as `` are used to define different parts and elements of a document.

[0175] CSS style data can define the appearance and format of elements on a webpage, such as font, color, and layout.

[0176] S1110, The webpage determines the third webpage data based on the foldable screen type and the current foldable screen state.

[0177] The current foldable screen state can also be referred to as the second foldable screen state.

[0178] Web pages can obtain the current foldable screen state through the foldable screen interface. In one specific implementation, the web page can request the current foldable screen state from the browser kernel, the browser kernel can further request the current foldable screen state from the web page view instance, the web page view instance can call the getFoldableState method to obtain the current foldable screen state from the foldable screen interface, and finally return the current foldable screen state to the web page through the web page view instance and the browser kernel.

[0179] For example, if the phone is a foldable phone, the getFoldableState method can return the foldable state; if the phone is not a foldable phone, the getFoldableState method can return an unknown state.

[0180] The foldable screen state returned by the getFoldableState method can be as follows:

[0181] stat ic int FOLD_STATE_EXPAND = 1; / / The return value is 1, corresponding to the expanded state.

[0182] stat ic int FOLD_STATE_FOLDED = 2; / / The return value is 2, corresponding to the folded state.

[0183] `stat ic int FOLD_STATE_HALF_FOLDED = 3;` / / The return value is 3, corresponding to the half-folded state.

[0184] stat ic int FOLD_STATE_SUB = 4; / / The return value is 4, corresponding to the status of the outward-folding secondary screen.

[0185] stat ic int FOLD_STATE_REAR = 5; / / The return value is 5, corresponding to the rear selfie state.

[0186] stat ic int FOLD_STATE_TENT = 6; / / The return value is 6, corresponding to the tent state.

[0187] stat ic int FOLD_STATE_CALENDAR = 7; / / The return value is 7, corresponding to the calendar state.

[0188] Web pages can obtain the foldable screen type through the foldable screen interface. The specific process is similar to obtaining the current foldable screen state, only the method of obtaining it is different. For example, the foldable screen type can be obtained through the getFoldType method, which will not be elaborated here.

[0189] The webpage determines third webpage data based on the folding screen type and the current folding screen state. The third webpage data includes the first webpage elements and the first CSS style data, so that the constituent elements of the webpage, as well as the appearance and format of the elements, match the folding screen type and the current folding screen state.

[0190] For example, in the current foldable screen state, the first webpage element includes a first number of elements, and the layout of each element in the first CSS style data is a first layout. In the current foldable screen state, the first webpage element includes a second number of elements, and the layout of each element in the first CSS style data is a second layout. The first layout and the second layout are different, and the first number is less than or equal to the second number.

[0191] For example, if the current foldable screen is in an unfolded state and the foldable screen type is a two-fold horizontal (outward or inward) foldable screen, the first web page elements include a third number of elements, and the layout of each element in the first CSS style data is a third layout. If the current foldable screen is in an unfolded state and the foldable screen type is a two-fold vertical (outward or inward) foldable screen, the first web page elements include a fourth number of elements, and the layout of each element in the first CSS style data is a fourth layout. The third layout and the fourth layout are different; the third number is greater than or equal to the fourth number.

[0192] Of course, a webpage may also determine the third webpage data based on the folded screen state instead of obtaining the folded screen type. Alternatively, a webpage may determine the first webpage layout data based on the current folded screen state and the size of the display screen used for display in the current folded screen state. This application does not specifically limit this. In actual implementation, the webpage itself decides on the strategy for determining webpage data, such as determining webpage data based on one or more of the following: display screen size, folded screen state, folded screen type, etc. In this paper, we mainly use the example of a webpage determining webpage data based on folded screen state and folded screen type to illustrate the point.

[0193] S1111: The webpage returns third-party webpage data to the browser kernel.

[0194] S1112, The browser kernel renders the image of the first webpage based on the data of the third webpage.

[0195] The first webpage image includes elements defined in the first webpage elements, and these elements have the appearance and format defined in the first CSS style data.

[0196] S1113. The browser kernel returns the first webpage image to the browser application through the webpage view instance and the webpage view interface.

[0197] S1114, The browser application displays the first webpage image.

[0198] The interface that includes the first webpage image can also be called the first interface, such as interface 502 and interface 701 mentioned above.

[0199] Subsequently, when the foldable screen state changes, the web page image can be updated via S1115-S1123 as described below.

[0200] S1115, the foldable screen interface senses changes in the foldable screen status.

[0201] S1116. The foldable screen interface notifies the web view instance of the changed foldable screen status.

[0202] The changed folding screen state can also be referred to as the first folding screen state.

[0203] Once the foldable screen interface detects a change in the foldable screen state, it can call back the `onStateChange` method in the `FoldableStateListener` registered in S1105 to notify the web view instance of the change in the foldable screen state. In this way, the web view instance can perceive the changed foldable screen state in real time.

[0204] S1117. The webpage view instance notifies the browser kernel of the changed folded screen state.

[0205] S1118. The browser kernel dispatches a folded screen event to the webpage, which includes the changed folded screen state.

[0206] After receiving the changed folded screen state, the browser engine can generate a folded screen event. The event type attribute in the folded screen event indicates that the event is a folded screen event, such as a value of "foldingscreen". The folded screen state in the folded screen event is the changed folded screen state. The folded screen type in the folded screen event is the current folded screen type of the phone.

[0207] For example, the folded screen event generated by the browser kernel includes the following:

[0208] DOMStr ing type = "foldingscreen"; / / Event type is folding screen event

[0209] Foldtype = 0x02; / / The folding screen type is a two-fold horizontal outward folding screen.

[0210] Foldstate = 0x01; / / The foldable screen is in unfolded state.

[0211] In some embodiments, the FoldableStateListener may also include a method for obtaining the foldable screen type (such as getFoldType()). When the system detects a change in the foldable screen state, it can call back the method in FoldableStateListener to obtain the foldable screen type. This allows the webpage view instance to obtain the foldable screen type when the foldable screen state changes and notify the browser kernel. The browser kernel can add this foldable screen type to the foldable screen event. This allows for synchronous notification of the foldable screen type to the browser kernel each time the foldable screen state changes.

[0212] In other embodiments, after the browser kernel obtains the folded screen type in S1110 above, it can store the folded screen type and add the stored folded screen type to the folded screen event each time a changed folded screen state is received. This avoids repeatedly obtaining the folded screen type and reduces data transmission.

[0213] The browser engine can dispatch generated folded screen events to the webpage, so that the webpage can obtain the changed folded screen state and folded screen type.

[0214] In one specific implementation, web pages can register listener functions to monitor changes in the folded screen state, and the browser kernel can dispatch folded screen events based on these listener functions. In this way, the browser kernel can dispatch folded screen events to web pages that have registered listener functions, achieving on-demand dispatch of folded screen events.

[0215] For example, the browser kernel can obtain (e.g., from the window object) and parse the webpage code. When the listener function is parsed, the listener function can capture the folding screen event, such as capturing the event of type "foldingscreen", thereby enabling the browser kernel to dispatch the folding screen event to the webpage that has registered the listener function.

[0216] Furthermore, if a webpage does not register a listener function to monitor changes in the folded screen state, the browser kernel may not dispatch folded screen events to that webpage. In this case, the webpage can follow its original layout scheme, such as a fixed layout or a fluid layout, determining the webpage data based on the screen size. For example, the browser kernel can send the screen size corresponding to the folded screen state change to the webpage, allowing the webpage to determine its data based on the screen size (let's call it the second webpage data). Subsequently, the browser kernel can render a webpage image based on the second webpage data (let's call it the third webpage image) and display it through the browser application (the interface displaying the third webpage image can also be called the third interface), which will not be elaborated further here.

[0217] In other words, the browser engine can detect whether a webpage supports folded screen events, such as by checking if the webpage code includes a listener function to monitor changes in the folded screen state. If a listener function is included, it indicates that folded screen events are supported, and the browser engine will dispatch folded screen events. If a listener function is not included, it indicates that folded screen events are not supported, and the browser engine will not dispatch folded screen events.

[0218] S1119. The webpage updates based on the folding screen event to obtain the first webpage data.

[0219] The folding screen event includes the folding screen state and folding screen type. For example, a webpage can obtain the event properties of the folding screen event in the following ways: Method 1, through the window object's on event; Method 2, through the window object's addEvent listener method.

[0220] The webpage determines the first webpage data based on the folded screen type and folded screen state. The first webpage data includes the second webpage elements and the second CSS style data, so that the constituent elements of the webpage, as well as the appearance and format of the elements, match the folded screen type and the changed folded screen state.

[0221] For example, before the change, the folded screen is in a folded state, and in the CSS style data determined by the webpage based on the folded state (such as the first CSS style data mentioned above), the area for playing the video is area 502-a in interface 502. After the change, the folded screen is in an unfolded state, and in the second CSS style data determined by the webpage based on the unfolded state, the area for playing the video is area 601-b in interface 601.

[0222] For example, before the change, the folded screen is in a folded state, and the webpage elements determined based on the folded screen state (such as the first webpage element mentioned above) are as shown in interface 701. After the change, the folded screen is in an unfolded state, and the webpage elements determined based on the unfolded state are as shown in interface 702.

[0223] In one specific implementation, the listener function in the webpage code can listen for folding screen events, and after the webpage receives the folding screen event, it can obtain the attributes of the folding screen event, and then use a method that matches the attributes to lay out the elements in the webpage.

[0224] For example, the listener function includes the following code:

[0225]

[0226]

[0227] In some cases, such as when the foldableStateListener listener encounters an exception or on a phone without a foldable screen, the foldable screen state attribute in the foldable screen event can be an unknown state, and the foldable screen type attribute can be an unknown device, as shown in the foldable screen event registered in S1108 above. After obtaining the unknown state or unknown device from the foldable screen event, the webpage can determine the first webpage data based on the screen size, according to the original layout scheme of the webpage, such as using a fixed layout or a fluid layout.

[0228] S1120, The webpage returns the first webpage data to the browser kernel.

[0229] S1121, The browser kernel renders the image of the second webpage based on the data of the first webpage.

[0230] The second webpage image includes elements defined in the second webpage elements, and these elements have the appearance and format defined in the second CSS style data.

[0231] S1122. The browser kernel returns a second webpage image to the browser application through the webpage view instance and the webpage view interface.

[0232] S1123, The browser application displays the second webpage image.

[0233] The interface that includes the second webpage image can also be called the second interface, such as interface 601 and interface 702 mentioned above.

[0234] The above steps S1115-S1123 describe the specific implementation of updating the webpage image when the foldable screen state changes once. It is understandable that if multiple changes in the foldable screen state occur, each time the process can be handled according to S1115-S1123.

[0235] use Figure 11 This solution allows web pages to sense changes in the folded screen state in real time, thus updating the page layout accordingly. This means that when displaying web page content on a mobile phone, the layout can match the folded screen state. Therefore, it can adjust its layout as the folded screen state changes, just like other applications (such as chat and note-taking apps).

[0236] See Figure 12 This is a simplified module interaction diagram of the page display method provided in the embodiments of this application. Figure 12 As shown, a foldable state listener is registered with the foldable screen interface through the webpage view instance (represented by ① in the diagram), and the browser kernel registers foldable screen events with the window object (represented by ② in the diagram). This ensures that whenever the foldable screen state changes, the webpage is notified through the foldable screen interface, the webpage view instance, and the browser kernel (represented by ③, ④, and ⑤ in the diagram, respectively). In this way, the webpage can perceive changes in the foldable screen state in real time.

[0237] use Figure 11 and Figure 12 The illustrated solutions allow web pages to accurately perceive changes in the foldable screen state. Some implementations use a user agent to determine if a device supports foldable screens; however, the User-Agent value is easily tampered with, leading to inaccurate data. For example, when accessing a tablet or laptop webpage on a mobile phone, the User-Agent might be changed to "tablet" or "laptop." Other implementations identify the device's current folding state based on screen size; however, due to inconsistent device specifications (e.g., different types of foldable phones with significantly different screen sizes), the folding state identified based on screen size is also inaccurate. Some implementations use CSS media properties (horizontal-viewport-segments or vertical-viewport-segments) to obtain the folded or unfolded state; however, changes in CSS media properties do not perfectly correspond to changes in the folding state, also leading to inaccurate results. Furthermore, CSS media properties cannot capture the half-folded state, limiting the folding state information obtained, and they are also limited by browser version compatibility, not working with all browsers.

[0238] Previous text Figure 11 and Figure 12 The first part mainly describes the page display method provided in the embodiments of this application through the process of module interaction. The following section uses a mobile phone as the execution subject to briefly describe the flow of the page display method in the embodiments of this application.

[0239] See Figure 13 Page display methods include:

[0240] S1301, Launch the browser application on your mobile phone.

[0241] For example, in response to a user clicking the application icon of a browser application on the desktop, the mobile phone can launch the browser application.

[0242] S1302, The mobile phone receives the user's browsing request for the first webpage in the application interface of the browser application.

[0243] The first webpage can be any webpage that a browser application can access.

[0244] For example, in response to a user entering the URL of a first webpage in the search box, the mobile phone can receive a browsing request for the first webpage.

[0245] S1303, The mobile phone displays the first webpage image of the first webpage.

[0246] For example, a mobile phone can request webpage data from a first webpage. The first webpage, based on the phone's current second folded screen state and possibly further based on the folded screen type, determines third webpage data and returns this third webpage data to the phone. The phone can then display an image from the first webpage based on the third webpage data.

[0247] S1304. After the phone's foldable screen state changes, the phone checks whether the first webpage supports foldable screen events. If yes, execute S1305-S1306; otherwise, execute S1307-S1308.

[0248] If folding screen events are supported, it means that the first webpage can configure the corresponding webpage data based on the real-time folding screen state. Then, execute S1305-S1306 to achieve layout based on the folding screen state.

[0249] If folding screen events are not supported, it means that the first webpage will not configure the corresponding webpage data based on the real-time folding screen state. In this case, S1307-S1308 will be executed to implement the layout based on the display screen size.

[0250] S1305, The mobile phone sends a folding screen event to the first webpage, and the folding screen event includes the changed first folding screen state.

[0251] For example, a webpage view instance in a browser application can register to listen for the folded screen state, and the browser application's kernel can register folded screen events with the window object. Thus, when the folded screen state changes, the webpage view instance can detect the change and notify the kernel, which then generates a folded screen event and dispatches it to the first webpage.

[0252] S1306. The mobile phone receives first webpage data from the first webpage and displays a second webpage image based on the first webpage data.

[0253] The elements and / or layouts of the first webpage image and the second webpage image are different.

[0254] S1307, The mobile phone sends the screen size to the first webpage.

[0255] The display screen size refers to the effective size used to display web page images after the screen changes state. For example, in the unfolded state, the display screen size is the entire size of the folded screen; in the folded or half-folded state, the display screen size is approximately half the size of the entire folded screen.

[0256] After receiving the screen size, the first webpage can determine the data for the second webpage based on the real-time screen size. In this way, the data for the second webpage is matched with the screen size.

[0257] S1308: The mobile phone receives data from a second webpage from a first webpage, and displays a third webpage image from the first webpage based on the data from the second webpage.

[0258] The elements and / or layouts of the third and second webpage images differ. In other words, the webpage image obtained based on the display size layout differs from the webpage image obtained based on the folded screen state layout. For example, in the folded state, the webpage image obtained based on the display size layout is shown in interfaces 501 and 503a, while the webpage image obtained based on the folded screen state layout is shown in interface 601.

[0259] Of course, the phone can also dispatch folding screen events directly without checking whether folding screen support is supported. If the webpage code includes a listener function, the webpage can naturally capture the folding screen event and determine the webpage data based on the folding screen state in the folding screen event.

[0260] In summary, the following approach is adopted. Figure 13 The process shown demonstrates how a mobile phone can layout a webpage based on its folded screen state and display webpage images that match the folded screen state.

[0261] This application also provides an electronic device, which may include a display screen, a memory, and one or more processors (such as a CPU, GPU, NPU, etc.). The display screen, memory, and processor are coupled. The memory is used to store computer program code, which includes computer instructions. When the processor executes the computer instructions, the electronic device can perform various functions or steps performed by the device in the above method embodiments.

[0262] This application also provides a chip system including at least one processor and at least one interface circuit. The processor and the interface circuit are interconnected via lines. For example, the interface circuit can be used to receive signals from other devices (e.g., the memory of an electronic device). As another example, the interface circuit can be used to send signals to other devices (e.g., the processor). Exemplarily, the interface circuit can read instructions stored in the memory and send the instructions to the processor. When the instructions are executed by the processor, the electronic device can perform the steps in the above embodiments. Of course, the chip system may also include other discrete devices, and this application does not specifically limit this.

[0263] This embodiment also provides a computer storage medium storing computer instructions. When the computer instructions are executed on an electronic device, the electronic device performs the aforementioned method steps to implement the image processing method described above.

[0264] This embodiment also provides a computer program product that, when run on a computer, causes the computer to perform the aforementioned steps to implement the image processing method described above.

[0265] In addition, embodiments of this application also provide an apparatus, which may specifically be a chip, component, or module. The apparatus may include a connected processor and a memory; wherein the memory is used to store computer execution instructions, and when the apparatus is running, the processor may execute the computer execution instructions stored in the memory to cause the chip to execute the image processing methods in the above-described method embodiments.

[0266] In this embodiment, the electronic device, computer storage medium, computer program product or chip are all used to execute the corresponding method provided above. Therefore, the beneficial effects that can be achieved can be referred to the beneficial effects of the corresponding method provided above, and will not be repeated here.

[0267] Through the above description of the embodiments, those skilled in the art can clearly understand that, for the sake of convenience and brevity, only the division of the above functional modules is used as an example. In actual applications, the above functions can be assigned to different functional modules as needed, that is, the internal structure of the device can be divided into different functional modules to complete all or part of the functions described above.

[0268] In the several embodiments provided in this application, it should be understood that the disclosed apparatus and methods can be implemented in other ways. For example, the apparatus embodiments described above are merely illustrative. For instance, the division of modules or 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 device, or some features may be ignored or not executed. Furthermore, the mutual coupling or direct coupling or communication connection shown or discussed may be through some interfaces; the indirect coupling or communication connection between devices or units may be electrical, mechanical, or other forms.

[0269] The unit described as a separate component may or may not be physically separate. The component shown as a unit can be one physical unit or multiple physical units, that is, it can be located in one place or distributed in multiple different places. Some or all of the units can be selected to achieve the purpose of the solution in this embodiment according to actual needs.

[0270] 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.

[0271] If the integrated unit is implemented as a software functional unit and sold or used as an independent product, it can be stored in a readable storage medium. Based on this understanding, the technical solutions of the embodiments of this application, essentially or in other words, the parts that contribute to the prior art, or all or part of the technical solutions, can be embodied in the form of a software product. This software product is stored in a storage medium and includes several instructions to cause a device (which may be a microcontroller, chip, etc.) or processor to execute all or part of the steps of the methods of the various embodiments of this application. The aforementioned storage medium includes various media capable of storing program code, such as USB flash drives, portable hard drives, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical disks.

[0272] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of this application and are not intended to limit it. Although this application has been described in detail with reference to preferred embodiments, those skilled in the art should understand that modifications or equivalent substitutions can be made to the technical solutions of this application without departing from the spirit and scope of the technical solutions of this application. < / string>

Claims

1. A page display method, characterized in that, Applied to an electronic device, the electronic device including a browser application, the method includes: The browser application displays a first interface, which includes a first webpage image of a first webpage. After the folding screen state of the electronic device changes, a folding screen event is sent to the first webpage, the folding screen event including the changed first folding screen state; Receive first webpage data from the first webpage; The browser application displays a second interface based on the first webpage data, and the second interface includes a second webpage image of the first webpage. Wherein, the first webpage element in the first webpage image is different from the second webpage element in the second webpage image, and / or, the layout of the first webpage element is different from the layout of the second webpage element.

2. The method according to claim 1, characterized in that, After the foldable screen state of the electronic device changes, but before sending the foldable screen event to the first webpage, the method further includes: Detect whether the first webpage is monitoring the foldable screen status; Sending the folded screen event to the first webpage includes: After detecting that the first webpage is listening for the folded screen state, a folded screen event is sent to the first webpage.

3. The method according to claim 2, characterized in that, The method further includes: After detecting that the first webpage is not monitoring the folded screen state, the screen size after the folded screen state change is sent to the first webpage; Receive data from the second webpage from the first webpage; The browser application displays a third interface based on the second webpage data, the third interface including a third webpage image of the first webpage; Wherein, the third webpage element in the third webpage image is different from the second webpage element in the second webpage image, and / or, the layout of the third webpage element is different from the layout of the second webpage element.

4. The method according to claim 2 or 3, characterized in that, The step of detecting whether the first webpage is listening to the folded screen state includes: Detect whether the webpage code of the first webpage includes a listener function for the folded screen state; If the webpage code of the first webpage includes the listening function, then the first webpage listens for the folded screen state; If the first webpage does not include the listening function in its webpage code, then the first webpage does not listen to the folded screen state.

5. The method according to any one of claims 1-4, characterized in that, The foldable screen event also includes the foldable screen type.

6. The method according to any one of claims 1-5, characterized in that, Before displaying the first interface of the browser application, the method further includes: The browser application displays a fourth interface, which includes a URL input box and / or a webpage link to the first webpage. In response to an operation on the fourth interface, a webpage loading request is sent to the first webpage, and the sending includes the current second folding screen state of the electronic device; Receive data from the third webpage from the first webpage; The first interface displaying the browser application includes: The first interface of the browser application is displayed based on the data from the third webpage.

7. The method according to any one of claims 1-6, characterized in that, After the foldable screen state of the electronic device changes, a foldable screen event is sent to the first webpage, including: After the browser application's kernel receives the notification of the folded screen state change, it sends a folded screen event to the first webpage.

8. The method according to claim 7, characterized in that, Before the browser application's kernel receives the notification of the folded screen state change, the method further includes: After the browser application is launched, the webpage view instance of the browser application registers a listener for the folded screen state; After the folding screen event changes, the web page view instance listens for the change in the folding screen state and the changed first folding screen state. The webpage view instance notifies the kernel of the change in the folded screen state.

9. The method according to claim 7 or 8, characterized in that, Before sending the folded screen event to the first webpage, the method further includes: The browser application's kernel registers Document Object Model (DOM) events with the window object of the first webpage, including the screen collapse event; When the folding screen event is registered, the kernel generates the folding screen event after receiving a notification of a change in the folding screen state.

10. An electronic device, characterized in that, The electronic device includes: one or more processors; a memory; wherein the memory is coupled to the one or more processors, the memory is used to store computer program code, the computer program code including computer instructions, and the one or more processors call the computer instructions to cause the electronic device to perform the method as described in any one of claims 1-9.

11. A computer program product containing instructions, characterized in that, When the computer program product is run on an electronic device, it causes the electronic device to perform the method as described in any one of claims 1-9.

12. A computer-readable storage medium comprising instructions, characterized in that, When the instructions are executed on an electronic device, the electronic device causes the electronic device to perform the method as described in any one of claims 1-9.

Images