Display device and webpage display method

Abstract

Some embodiments of the present application show a display device and a webpage display method, the method comprising: in response to a user input opening a browser application instruction, starting to load a first webpage of the browser application; parsing the downloaded first webpage to obtain a document object model tree; if the webpage header of the document object model tree contains a meta viewport tag, determining a first resolution of the first webpage according to the meta viewport tag; determining a first webpage scaling factor according to the physical resolution of the display device and the first resolution; rearranging, redrawing and relayouting elements in the first webpage based on the first webpage scaling factor to determine a second webpage; and controlling the display to display the second webpage. Some embodiments of the present application can prevent the phenomenon of screen flashing, a small area of the screen rendering webpage content or full screen displaying part of the webpage content, and show appropriate viewport to users and make the webpage display clearer, thereby improving user experience.

Description

Technical Field

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

[0002] Display devices often have multiple browser applications installed, such as HbbTV (Hybrid Broadcast / Broadband TV), Store, and Open Browser web applications. However, different browser applications render web pages at different resolutions. For example, HbbTV renders web pages at 720p; Store offers both 720p and 1080i resolutions; and Open Browser renders web pages at 1080i. Even within the same browser application, different web pages may have different rendering resolutions. These differences can cause screen flickering, rendering of only a small portion of the web page content, or displaying only a portion of the web page content across the entire screen when switching between applications with different resolutions or between different resolution pages within the same application. When low-resolution applications are displayed on high-resolution screens, the rendering process involves stretching, or when high-resolution applications are displayed on low-resolution screens, the rendering process involves compression, resulting in blurry images and a poor user experience. Summary of the Invention

[0003] Some embodiments of this application provide a display device and a webpage display method to prevent screen flickering, rendering webpage content in a small area of ​​the screen, or displaying only part of the webpage content on the entire screen, thereby providing users with a suitable viewpoint and a good user experience.

[0004] In a first aspect, some embodiments of this application provide a display device, including:

[0005] monitor;

[0006] The controller is configured as follows:

[0007] In response to a user's command to open a browser application, the first webpage of the browser application begins to load;

[0008] Parse the downloaded first webpage to obtain the file object model tree;

[0009] If the file object model tree contains a meta viewport tag, the first resolution of the first webpage is determined based on the meta viewport tag;

[0010] A first webpage scaling factor is determined based on the physical resolution of the display device and the first resolution;

[0011] Based on the scaling factor of the first webpage, the elements in the first webpage are rearranged, redrawn, and rearranged to determine the second webpage;

[0012] Control the display to show the second webpage.

[0013] In some embodiments, prior to the step of parsing the downloaded first webpage, the controller is further configured to:

[0014] Determine the window mode corresponding to the first webpage, and determine the second resolution of the first webpage based on the window mode.

[0015] In some embodiments, the controller is configured to:

[0016] If the file object model tree does not contain a meta viewport tag, a second webpage scaling factor is determined based on the physical resolution of the display device and the second resolution;

[0017] Based on the second webpage scaling factor, the elements in the first webpage are rearranged, redrawn, and rearranged to obtain the third webpage;

[0018] Control the display to show the third webpage.

[0019] In some embodiments, the controller is configured to:

[0020] If the file object model tree does not contain a meta viewport tag, control the display to show the first webpage corresponding to the second resolution.

[0021] In some embodiments, during the steps of rearranging, repainting, and reflowing the elements in the first webpage, the controller is further configured to:

[0022] If the element in the first webpage corresponds to a text control, determine the first coordinates of a specific point of the text control and the first font size of the text in the text control, wherein the specific point includes the center point or vertex of the text control;

[0023] The second coordinates of the specific point of the text control are determined based on the first coordinates of the specific point of the text control and the first webpage scaling factor;

[0024] The second font size of the text is determined based on the first font size of the text and the first webpage scaling factor;

[0025] Draw the text control at the second coordinate position, and the font size of the text in the text control is the second font size.

[0026] In some embodiments, during the steps of rearranging, repainting, and reflowing the elements in the first webpage, the controller is further configured to:

[0027] If the element in the first webpage corresponds to an image control, determine the first coordinates of a specific point of the image control, as well as the first width and first height of the image control, wherein the specific point includes the center point or vertex of a text control;

[0028] The second coordinates of the specific point of the image control are determined based on the first coordinates of the specific point of the image control and the first webpage scaling factor;

[0029] The second width and second height of the image control are determined based on the first width and first height of the image control, and the first webpage scaling factor;

[0030] The image control is drawn at a second coordinate of a specific point of the image control, the width of the image control is a second width, and the height of the image control is a second height.

[0031] In some embodiments, after the step of determining the second resolution of the first webpage based on the meta-viewport tag, the controller is configured to:

[0032] Determine whether the first resolution is the same as the physical resolution of the display device;

[0033] If the first resolution is the same as the physical resolution of the display device, control the display to show the first webpage corresponding to the first resolution;

[0034] If the second resolution is not the same as the physical resolution of the display device, the step of determining the first webpage scaling factor based on the physical resolution of the display device and the first resolution is performed.

[0035] Secondly, some embodiments of this application provide a webpage display method, including:

[0036] In response to a user's command to open a browser application, the first webpage of the browser application begins to load;

[0037] Parse the downloaded first webpage to obtain the file object model tree;

[0038] If the file object model tree contains a meta viewport tag, the first resolution of the first webpage is determined based on the meta viewport tag;

[0039] A first webpage scaling factor is determined based on the physical resolution of the display device and the first resolution;

[0040] Based on the scaling factor of the first webpage, the elements in the first webpage are rearranged, redrawn, and rearranged to determine the second webpage;

[0041] Control the display to show the second webpage.

[0042] In some embodiments, prior to the step of parsing the downloaded first webpage, the method further includes:

[0043] Determine the window mode corresponding to the first webpage, and determine the second resolution of the first webpage based on the window mode.

[0044] In some embodiments, the method further includes:

[0045] If the file object model tree does not contain a meta viewport tag, a second webpage scaling factor is determined based on the physical resolution of the display device and the second resolution;

[0046] Based on the second webpage scaling factor, the elements in the first webpage are rearranged, redrawn, and rearranged to obtain the third webpage;

[0047] Control the display to show the third webpage.

[0048] Some embodiments of this application provide a display device and a webpage display method. By parsing a downloaded first webpage, a file object model tree is obtained; and meta-viewport tags are retrieved from the file object model tree to determine the first resolution of the first webpage. Using the first resolution and the physical resolution of the display device, the elements of the first webpage are rearranged, redrawn, and rearranged, and the rearranged first page is displayed on the monitor. This prevents the phenomenon of rendering webpage content in a small area of ​​the screen or displaying only a portion of the webpage content across the entire screen, providing the user with a suitable viewport and making the webpage display clearer, thus improving the user experience. Attached Figure Description

[0049] Figure 1 An operational scenario between a display device and a control device according to some embodiments is illustrated;

[0050] Figure 2 A hardware configuration block diagram of a control device 100 according to some embodiments is shown;

[0051] Figure 3 A hardware configuration block diagram of a display device 200 according to some embodiments is shown;

[0052] Figure 4 A software configuration diagram of a display device 200 according to some embodiments is shown;

[0053] Figure 5 A controller flowchart is shown according to some embodiments;

[0054] Figure 6 A schematic diagram of a user interface provided according to some embodiments is shown;

[0055] Figure 7 A schematic diagram of a user interface provided according to some embodiments is shown;

[0056] Figure 8 A schematic diagram of a user interface provided according to some embodiments is shown;

[0057] Figure 9 A schematic diagram of a homepage provided according to some embodiments is shown;

[0058] Figure 10 A schematic diagram of an anime recommendation page of a first browser application provided according to some embodiments is shown;

[0059] Figure 11 A schematic diagram of a rectangular coordinate system provided according to some embodiments is shown;

[0060] Figure 12 A schematic diagram of the layout of controls for a first webpage according to some embodiments is shown;

[0061] Figure 13 A schematic diagram of the layout of controls for a second webpage according to some embodiments is shown;

[0062] Figure 14 A schematic diagram of the layout of controls for a first webpage according to some embodiments is shown;

[0063] Figure 15 A schematic diagram of the layout of controls for a second webpage according to some embodiments is shown;

[0064] Figure 16 A schematic diagram of the layout of controls for a first webpage according to some embodiments is shown;

[0065] Figure 17 A schematic diagram of the layout of controls for a second webpage according to some embodiments is shown;

[0066] Figure 18 A schematic diagram of the layout of controls for a first webpage according to some embodiments is shown;

[0067] Figure 19 A schematic diagram of the layout of controls for a second webpage according to some embodiments is shown;

[0068] Figure 20 A schematic diagram of a user interface for switching applications is shown according to some embodiments;

[0069] Figure 21 A schematic diagram of a user interface for switching applications is shown according to some embodiments. Detailed Implementation

[0070] To make the objectives and implementation methods of this application clearer, the exemplary implementation methods of this application will be clearly and completely described below with reference to the accompanying drawings of the exemplary embodiments of this application. Obviously, the exemplary embodiments described are only some embodiments of this application, and not all embodiments.

[0071] It should be noted that the brief descriptions of terms in this application are only for the convenience of understanding the embodiments described below, and are not intended to limit the embodiments of this application. Unless otherwise stated, these terms should be understood in their ordinary and common meaning.

[0072] The terms "first," "second," and "third," etc., used in the specification, claims, and accompanying drawings of this application are used to distinguish similar or related objects or entities, and do not necessarily imply a specific order or sequence, unless otherwise specified. It should be understood that such terms are interchangeable where appropriate.

[0073] The term “comprising” and any variations thereof are intended to cover but not exclude inclusion, for example, a product or device that includes a range of components is not necessarily limited to all of the components that are clearly listed, but may include other components that are not clearly listed or that are inherent to such product or device.

[0074] The display device provided in this application can have various implementation forms, such as a television, a smart television, a laser projection device, a monitor, an electronic bulletin board, an electronic table, etc. Figure 1 and Figure 2 This is one specific embodiment of the display device of this application.

[0075] Figure 1 This is a schematic diagram illustrating the operational scenario between the display device and the control unit according to the embodiment. Figure 1 As shown, the user can operate the display device 200 through the smart device 300 or the control device 100.

[0076] In some embodiments, the control device 100 may be a remote control. Communication between the remote control and the display device includes infrared protocol communication, Bluetooth protocol communication, and other short-range communication methods, controlling the display device 200 wirelessly or via wired means. Users can control the display device 200 by inputting user commands through buttons on the remote control, voice input, control panel input, etc.

[0077] In some embodiments, a smart device 300 (such as a mobile terminal, tablet computer, computer, laptop computer, etc.) may also be used to control the display device 200. For example, an application running on the smart device may be used to control the display device 200.

[0078] In some embodiments, the display device may receive instructions not through the aforementioned smart devices or control devices, but through touch or gestures.

[0079] In some embodiments, the display device 200 can also be controlled in ways other than the control device 100 and the smart device 300. For example, it can be controlled by directly receiving the user's voice commands through a module configured inside the display device 200 for acquiring voice commands, or it can be controlled by receiving the user's voice commands through a voice control device set outside the display device 200.

[0080] In some embodiments, the display device 200 also communicates with the server 400. The display device 200 may communicate via a local area network (LAN), wireless local area network (WLAN), and other networks. The server 400 may provide various content and interactive features to the display device 200. The server 400 may be a cluster or multiple clusters, and may include one or more types of servers.

[0081] Figure 2 An exemplary block diagram of the configuration of the control device 100 according to an exemplary embodiment is shown. Figure 2 As shown, the control device 100 includes a controller 110, a communication interface 130, a user input / output interface 140, a memory, and a power supply. The control device 100 can receive user input operation commands and convert the operation commands into commands that the display device 200 can recognize and respond to, thus acting as an intermediary for interaction between the user and the display device 200.

[0082] like Figure 3 The display device 200 includes at least one of the following: a tuner 210, a communicator 220, a detector 230, an external device interface 240, a controller 250, a display 260, an audio output interface 270, a memory, a power supply, and a user interface.

[0083] In some embodiments, the controller includes a processor, a video processor, an audio processor, a graphics processor, RAM, ROM, and a first to an nth interface for input / output.

[0084] The display 260 includes a display screen assembly for presenting images, a driving assembly for driving image display, a component for receiving image signals from the controller output, and a user control UI interface for displaying video content, image content, menu control interface, and user control UI interface.

[0085] The display 260 can be an LCD display, an OLED display, or a projection display, and can also be a projection device and a projection screen.

[0086] The communicator 220 is a component used to communicate with external devices or servers according to various communication protocol types. For example, the communicator may include at least one of the following: a Wi-Fi module, a Bluetooth module, a wired Ethernet module, other network communication protocol chips or near-field communication protocol chips, and an infrared receiver. The display device 200 can establish the transmission and reception of control signals and data signals with the external control device 100 or the server 400 through the communicator 220.

[0087] The user interface can be used to receive control signals from the control device 100 (such as an infrared remote control).

[0088] Detector 230 is used to collect signals from the external environment or to interact with the external environment. For example, detector 230 includes a light receiver, a sensor for collecting ambient light intensity; or, detector 230 includes an image acquisition device, such as a camera, which can be used to collect external environmental scenes, user attributes, or user interaction gestures; or, detector 230 includes a sound acquisition device, such as a microphone, for receiving external sounds.

[0089] The external device interface 240 may include, but is not limited to, one or more of the following: High Definition Multimedia Interface (HDMI), analog or high-definition component input interface (component), composite video input interface (CVBS), USB input interface (USB), RGB port, etc. It may also be a composite input / output interface formed by multiple interfaces mentioned above.

[0090] The tuner / demodulator 210 receives broadcast television signals via wired or wireless means, and demodulates audio and video signals, such as EPG data signals, from multiple wireless or wired broadcast television signals.

[0091] In some embodiments, the controller 250 and the tuner 210 may be located in different separate devices, that is, the tuner 210 may also be located in an external device of the main device where the controller 250 is located, such as an external set-top box.

[0092] The controller 250 controls the operation of the display device and responds to user operations through various software control programs stored in the memory. The controller 250 controls the overall operation of the display device 200. For example, in response to receiving a user command to select a UI object to display on the monitor 260, the controller 250 can execute operations related to the object selected by the user command.

[0093] In some embodiments, the controller includes at least one of a central processing unit (CPU), a video processor, an audio processor, a graphics processing unit (GPU), RAM (random access memory), ROM (read-only memory), a first to an nth interface for input / output, a communication bus, etc.

[0094] Users can input commands through a graphical user interface (GUI) displayed on the monitor 260, and the user input interface receives the user input commands through the GUI. Alternatively, users can input commands by entering specific sounds or gestures, and the user input interface receives the user input commands by recognizing the sounds or gestures through sensors.

[0095] A "user interface" is the medium through which an application or operating system interacts and exchanges information with the user. It converts information from its internal form to a form that the user can accept. A common form of user interface is the graphical user interface (GUI), which refers to a user interface related to computer operation displayed graphically. It can be an icon, window, control, or other interface element displayed on the screen of an electronic device. Controls can include visual interface elements such as icons, buttons, menus, tabs, text boxes, dialog boxes, status bars, navigation bars, and widgets.

[0096] like Figure 4 As shown, the display device system is divided into three layers, from top to bottom: the application layer, the middleware layer, and the hardware layer.

[0097] The application layer mainly includes commonly used applications on TVs, as well as the application framework. The commonly used applications are mainly browser-based applications, such as HTML5 apps, and native apps.

[0098] An application framework is a complete program model that has all the basic functions required by standard application software, such as file access, data exchange, etc., as well as the user interface for these functions (toolbar, status bar, menu, dialog box).

[0099] Native apps can support online or offline access, push notifications, or access to local resources.

[0100] The middleware layer includes various television protocols, multimedia protocols, and system components. Middleware can use the basic services (functions) provided by system software to connect different parts of application systems or different applications on the network, achieving resource sharing and function sharing.

[0101] The hardware layer mainly includes the HAL interface, hardware, and drivers. The HAL interface is a unified interface for all TV chips, with the specific logic implemented by each chip. The drivers mainly include: audio drivers, display drivers, Bluetooth drivers, camera drivers, Wi-Fi drivers, USB drivers, HDMI drivers, sensor drivers (such as fingerprint sensors, temperature sensors, pressure sensors, etc.), and power drivers.

[0102] Display devices may have multiple browser applications installed, such as HbbTV, Store, and Openbrowser web applications, which can all be installed on the TV simultaneously. However, different browser applications have different webpage rendering resolutions. For example, HbbTV renders webpages at 720p; Store renders webpages at both 720p and 1080i resolutions; and Openbrowser renders webpages at 1080i resolution. Even within the same browser application, different webpages may have different rendering resolutions. In some embodiments, the browser application's webpage rendering resolution is greater than the display device's physical resolution, resulting in a portion of the webpage content being displayed full-screen, such as... Figure 5 As shown; when the browser application renders a webpage at a resolution lower than the display device's physical resolution, only a small portion of the screen will render the entire webpage content, such as... Figure 6 As shown. In some embodiments, when the rendering resolution of the webpage in the browser application is greater than the physical resolution of the display device, the webpage is directly shrunk and displayed at the algorithm layer; when the rendering resolution of the webpage in the browser application is less than the physical resolution of the display device, the webpage is directly stretched and displayed at the algorithm layer. While this method of directly shrinking and stretching the rendered webpage can fill the entire screen, the stretching or shrinking process can lead to a blurry image, such as... Figure 7 As shown, the user experience is poor.

[0103] To address the above technical problems, this application provides a display device 200. The structure and functions of each part of the display device 200 can be found in the above embodiments. Furthermore, based on the display device 200 shown in the above embodiments, this embodiment further improves some functions of the display device 200, such as… Figure 8 As shown, controller 250 performs the following steps:

[0104] Step S801: Receive user input to open the browser application;

[0105] In some embodiments, the display 260 displays a homepage, which includes a browser application control. The user can input a command to open a browser application by confirming the browser application control. For example, the homepage may look like this: Figure 9 As shown, Figure 9 It includes a first browser application control 91, a second browser application control 92, and a focus indicator 93 indicating the selected control; currently, the first browser application control 91 is selected. When the user presses the confirmation button on the control device 100, an instruction to open the browser application is output.

[0106] In some embodiments, the instruction to open a browser application includes an instruction to open a page within the browser application. The display 260 shows a first page of the first browser application, the first page including at least one page navigation control, which is a control to cancel the display of the first page and simultaneously display a second page. The user can input the instruction to open the second page of the first browser application by confirming the page navigation control. For example, the anime recommendation page of the first browser application might look like this... Figure 10 As shown, Figure 10 The system includes a leaderboard control 101, a category control 102, a program schedule control 103, and a focus indicator 104 indicating the selected control; currently, the leaderboard control 101 is selected. When the user presses the confirmation button on the control device 100, an instruction is output to open the leaderboard page in a browser application.

[0107] It's important to note that browser applications are applications based on the browser on a display device. Opening a browser application essentially displays a browser page, the content of which is controlled by the browser application. Browser applications include HbbTV applications, Store applications, and Open Browser web applications.

[0108] Step S802: In response to the user's input instruction to open the browser application, start loading the first webpage of the browser application;

[0109] In some embodiments, a user confirmation instruction is received for a browser application control configured with a link through which a first webpage can be downloaded.

[0110] In some embodiments, a user's confirmation instruction to a page redirection control in a browser application is received. The page redirection control is configured with a redirection link, through which a second page in the browser application, i.e., the first webpage, can be downloaded.

[0111] In some embodiments, Figure 4 The middleware layer shown includes a configuration layer, which is used to start loading the first webpage of the browser application in response to a user's input command to open the browser application.

[0112] Step S803: Determine the window mode of the first webpage, and determine the second resolution of the first webpage based on the window mode;

[0113] In some embodiments, a window is created for the first webpage before it is loaded in the browser. This window serves as the rendering area for the first webpage. The rendering area of ​​the first webpage is represented by (x, y, width, height). Here, x and y are both 0, width is the width of the first webpage, and height is the height of the first webpage. A Cartesian coordinate system is established with the two adjacent sides of the display screen as the x-axis and y-axis, and the intersection of the two adjacent sides as the origin. The rendering area (x, y, width, height) of the first webpage is a rectangular area bounded by four vertices: (0, 0), (width, 0), (0, height), and (width, height). Figure 11 As shown.

[0114] In some embodiments, the window mode (x, y, width, height) of the HbbTV application is (0, 0, 1280, 720). The window mode of the Store application is (0, 0, 1280, 720) or (0, 0, 1920, 1080). The window mode of the Open Browser application is (0, 0, 1920, 1080). Before loading the first webpage, the window mode of the current first webpage is detected.

[0115] In some embodiments, the specific value of the window mode can be obtained directly from the window mode parameters of the first webpage.

[0116] In some embodiments, the name of the current browser application can be determined first, and then its corresponding window mode can be determined based on the browser application.

[0117] In some embodiments, the width and height values ​​in the window mode are the second resolution of the first webpage, that is, the second resolution of the window mode (x, y, width, height) is width*height. For example, the second resolution of the window mode (0, 0, 1280, 720) is 1280*720, and the second resolution of the window mode (0, 0, 1920, 1080) is 1920*1080.

[0118] In some embodiments, the configuration layer is further configured to determine the window mode of the first webpage and, based on the window mode, determine the second resolution of the first webpage.

[0119] In some embodiments, Figure 4 The middleware layer shown includes a capability layer, and the configuration layer is also used to send the second resolution of the first webpage to the capability layer.

[0120] It should be noted that if the file object model tree obtained by parsing the first downloaded webpage definitely contains the meta viewport label, step S803 can be omitted. If the file object model tree obtained by parsing the first downloaded webpage does not necessarily contain the meta viewport label, step S803 cannot be omitted. However, the second resolution determined by the window mode may not be used, and the resolution of the first webpage is based on the number in the file object model tree.

[0121] Step S804: Parse the downloaded first webpage to obtain the file object model tree;

[0122] In some embodiments, the first webpage downloaded via the browser's download module is parsed to obtain the Document Object Model (DOM) tree of the first webpage. The Document Object Model is a standard programming interface recommended by the W3C for processing Extensible Markup Language. The Document Object Model is essentially a document model described in an object-oriented manner. It defines the objects needed to represent and modify the document, the behavior and properties of these objects, and the relationships between them. The Document Object Model can be considered a tree-like representation of the data and structure on the page, although the page may not be specifically implemented in this tree-like manner.

[0123] In some embodiments, the capability layer is used to parse the downloaded first webpage to obtain a file object model tree.

[0124] Step S805: Determine whether the file object model tree contains a meta viewport tag;

[0125] In some embodiments, the file object model tree contains at least one tag. The presence of a meta-viewport tag in the file object model tree can be determined by traversing the tag names of the file object model tree, or by traversing the tag names of the webpage header in the file object model tree. The meta-viewport tag name is... <meta viewport> This means, for example, traversing the tag names of the webpage header in the file object model tree. If the webpage header contains a meta viewport, then the file object model tree has a meta viewport tag; if the webpage header does not contain a meta viewport, then the file object model tree does not have a meta viewport tag.

[0126] If the file object model tree contains a meta viewport tag, the controller 250 executes step S806: determining the first resolution of the first webpage based on the meta viewport tag;

[0127] In some embodiments, after determining that the file object model tree contains a meta-viewport tag, the content of the meta-viewport tag is extracted, and the first resolution of the first webpage can be determined from the content of the meta-viewport tag.

[0128] In some embodiments, for a normalized webpage, the content of the meta viewport tag may contain only the width of the webpage displayed, or the content of the meta viewport tag may contain only the height of the webpage displayed. A first resolution of the first webpage can be determined based on a single height and width. For example, the content of the meta viewport tag is... <meta name＝"viewport"content＝"width＝1280,initial-scale＝1,user-scalable＝1"> The width of the first webpage is 1280, which determines that the resolution of the first webpage is 1280*720. A standardized webpage refers to a webpage designed according to the aspect ratio of the display screen of 16:9, such as webpages with resolutions of 1280*720 and 1920*1080.

[0129] In some embodiments, for denormalized web pages, the content of the meta viewport tag includes the width and height of the displayed web page. For example, the content of the meta viewport tag is... <meta name＝"viewport"content＝"width＝1280,height＝1280，initial-scale＝1,user-scalable＝1"> The width of the first webpage is 1280, which determines that its resolution is 1280*1280. A non-standard webpage refers to a webpage that is not designed according to the 16:9 aspect ratio of the display screen, such as a webpage with a resolution of 1280*1280.

[0130] In some embodiments, the capability layer is used to determine a first resolution of the first webpage based on the meta viewport tag.

[0131] In some embodiments, the controller 250 may first determine whether the first resolution is the same as the physical resolution of the display device;

[0132] If the first resolution is the same as the physical resolution of the display device, control the display to directly display the first webpage corresponding to the first resolution;

[0133] If the second resolution is not the same as the physical resolution of the display device, the controller 250 executes step S807: determining the first webpage scaling factor based on the physical resolution of the display device and the first resolution.

[0134] In this embodiment, when the first resolution is the same as the physical resolution of the display device, there is no need to perform steps such as determining the first webpage scaling factor, re-layout, redraw, and rearrange.

[0135] In some embodiments, the controller 250 does not need to determine whether the first resolution is the same as the physical resolution of the display device, and directly executes step S807: determining the first webpage scaling factor based on the physical resolution of the display device and the first resolution;

[0136] In some embodiments, the physical resolution of the display device browser's video memory is set to 1280*720 or 1920*1080.

[0137] In some embodiments, the physical resolution of the display device browser's video memory is set to 1280*1280.

[0138] In some embodiments, the first webpage scaling factor has only one value, which can be determined by the ratio of the physical horizontal resolution of the display device to the first horizontal resolution, or the ratio of the physical vertical resolution of the display device to the first vertical resolution.

[0139] In some embodiments, the first webpage scaling factor includes a first webpage width scaling factor and a first webpage height scaling factor. The first webpage width scaling factor is the ratio of the display device's physical horizontal resolution to a first horizontal resolution, and the first webpage height scaling factor is the ratio of the display device's physical vertical resolution to a first vertical resolution. The first webpage width scaling factor and the first webpage height scaling factor may be the same or different.

[0140] In some embodiments, a webpage identifier is set in the first webpage or a webpage tag is set in the file object model tree. Whether the first webpage is a normalized webpage is determined by the value of the webpage identifier or webpage tag. If the value of the webpage identifier or webpage tag is a first preset value, the first webpage is determined to be a normalized webpage. The first webpage scaling factor has only one value, which is the ratio of the physical horizontal resolution of the display device to a first horizontal resolution, or the ratio of the physical vertical resolution of the display device to a first vertical resolution. If the value of the webpage identifier or webpage tag is a second preset value, the first webpage is determined to be a non-normalized webpage. The first webpage scaling factor includes two components: a first webpage width scaling factor and a first webpage height scaling factor. The first webpage width scaling factor is the ratio of the physical horizontal resolution of the display device to a first horizontal resolution; the first webpage height scaling factor is the ratio of the physical vertical resolution of the display device to a first vertical resolution.

[0141] For example, the resolution of the first webpage is 1280*720, and the physical resolution of the display device is 1920*1080. If the value of the webpage identifier or webpage tag is 1, then the first webpage is determined to be a normalized webpage. The scaling factor of the first webpage is the ratio of the physical horizontal resolution of the display device to the first horizontal resolution, that is, scale = 1920 / 1280 = 1.5.

[0142] For example, the resolution of the first webpage is 1280*1280, and the physical resolution of the display device is 1920*1080. If the value of the webpage identifier or webpage tag is 0, then the first webpage is determined to be a non-normalized webpage. The width scaling factor scale1 of the first webpage is the ratio of the physical horizontal resolution of the display device to the first horizontal resolution, i.e., scale1 = 1920 / 1280 = 1.5; the height scaling factor scale2 of the first webpage is the ratio of the physical vertical resolution of the display device to the first vertical resolution, i.e., scale2 = 1080 / 1280 = 0.84.

[0143] In some embodiments, the capability layer is configured to determine a first webpage scaling factor based on the physical resolution of the display device and the first resolution.

[0144] Step S808: Based on the scaling factor of the first webpage, rearrange, redraw, and reorder the elements in the first webpage to determine the second webpage;

[0145] In some embodiments, the step of rearranging, redrawing, and reflowing the elements in the first webpage based on the first webpage scaling factor to determine the second webpage includes:

[0146] The second coordinates are obtained by calculating the coordinates of the elements in the first webpage based on the first webpage scaling factor;

[0147] The elements in the first webpage are rearranged based on the second coordinate to obtain the second webpage.

[0148] It should be noted that the method in this embodiment is only applicable when the scaling factor of the first webpage is greater than 1.

[0149] In some embodiments, the first webpage includes at least one element, which corresponds to a control. The control includes selectable controls and unselectable controls. Selectable controls are controls to which the focus can be moved to the corresponding position; unselectable controls are controls to which the focus cannot be moved to the corresponding position.

[0150] In some embodiments, the first webpage scaling factor has only one value. A Cartesian coordinate system is established with the two adjacent sides of the display screen as the x-axis and y-axis, and the intersection of the two adjacent sides as the origin. The first coordinates (x1, y1) of the control center point of the first webpage are determined. Based on the first coordinates (x1, y1) and the first webpage scaling factor scale, the second coordinates (x2, y2) of the control center point on the second webpage are determined. Where x2 = x1 * scale; y2 = y1 * scale.

[0151] In some embodiments, the first webpage scaling factor includes a first webpage width scaling factor and a first webpage height scaling factor. A Cartesian coordinate system is established with the two adjacent sides of the display screen as the x-axis and y-axis, and the intersection of the two adjacent sides as the origin. The first coordinates (x1, y1) of the control center point of the first webpage are determined. Based on the first coordinates (x1, y1), the first webpage width scaling factor scale1, and the first webpage height scaling factor scale2, the second coordinates (x2, y2) of the control center point on the second webpage are determined. Wherein, x2 = x1 * scale1; y2 = y1 * scale2.

[0152] In some embodiments, the center point of a control may be replaced by the four vertices of the control.

[0153] For example, the layout of the controls on the first webpage is as follows: Figure 12 As shown, the resolution of the first webpage is 1280*720; the physical resolution of the display device is 1920*1080, and the scaling factor of the first webpage is calculated to be 1.5. Figure 12Taking the first control 121 as an example, the first coordinate (x1, y1) of the center point of the first control 121 is (100, 650), and the second coordinate (x2, y2) of the center point of the first control 121 is (150, 975). Where x2 = x1 * scale = 100 * 1.5 = 150; y2 = y1 * scale = 650 * 1.5 = 975, the first control 121 is displayed with (150, 975) as the center point coordinate. After calculating the second coordinates of the center point coordinates of all controls on the first webpage, the controls are rearranged according to the second coordinates to obtain the second webpage, as shown below. Figure 13 As shown.

[0154] For example, the layout of the controls on the first webpage is as follows: Figure 14 As shown, the first webpage has a resolution of 720*720; the physical resolution of the display device is 1920*1080. The calculated scaling factor (scale1) for the width of the first webpage is 2.7, and the scaling factor (scale2) for the height of the first webpage is 1.5. Figure 14 Taking the first control 141 as an example, the first coordinate (x1, y1) of the center point of the first control 141 is (100, 600), and the second coordinate (x2, y2) of the center point of the first control 141 is (270, 900). Where x2 = x1 * scale1 = 100 * 2.7 = 270; y2 = y1 * scale2 = 600 * 1.5 = 900, the first control 141 is displayed with (270, 900) as the center point coordinates. After calculating the second coordinates of the center point coordinates of all controls on the first webpage, the controls are rearranged according to the second coordinates to obtain the second webpage, as shown below. Figure 15 As shown.

[0155] This application embodiment only rearranges the coordinates of controls in the first webpage, which can make the controls in the first webpage evenly distributed on the display screen. The calculation method is simple, and the second page can be displayed faster after receiving the user's instruction to open the browser application.

[0156] In some embodiments, if the element in the first webpage corresponds to a text control, the coordinates of the element in the first webpage can be calculated based on the first webpage scaling factor to obtain the second coordinates. The text control can then be directly stretched or shrunk according to the first webpage scaling factor. For example, if the first webpage scaling factor is 1.5, the text control can be stretched by 1.5 times its width and height. The stretched text control is then displayed at the second coordinate.

[0157] In some embodiments, if the control corresponding to an element in the first webpage is an image control, the coordinates of the element in the first webpage can be calculated based on a first webpage scaling factor to obtain second coordinates. The image control can then be directly stretched or shrunk according to the first webpage scaling factor. For example, if the first webpage scaling factor is 1.5, the image control can be stretched by 1.5 times its width and height. The stretched image control is then displayed at the second coordinate.

[0158] This application embodiment only rearranges the coordinates of controls in the first webpage, which can make the controls in the first webpage evenly distributed on the display screen, and stretch or shrink the controls corresponding to the elements. The calculation method is simple and can better fill the screen. After receiving the user's instruction to open the browser application, the second page can be displayed faster.

[0159] In some embodiments, the step of rearranging, redrawing, and reflowing the elements in the first webpage based on the first webpage scaling factor to determine the second webpage includes:

[0160] The second coordinates are obtained by calculating the coordinates of the elements in the first webpage based on the first webpage scaling factor;

[0161] The second size is obtained by calculating the size of the elements in the first webpage based on the first webpage scaling factor;

[0162] The size of an element refers to its displayed size. If the element corresponds to an image control, its size is the width and height of the image. If the element corresponds to a text control, its size is the font size of the text. If the element corresponds to a combo control (a combo control consists of at least two controls that can be selected simultaneously), the combo control can be split into two controls, and their sizes can be calculated separately. For example, if a combo control includes an image control and a text control positioned below the image control, the width and height of the image control and the font size of the text control can be calculated separately.

[0163] The elements in the first webpage are rearranged according to the second coordinate, and the element of the second size is drawn at the position of the second coordinate to obtain the second webpage.

[0164] In some embodiments, if the element in the first webpage corresponds to a text control, the first coordinates (x1, y1) of a specific point of the text control and the first font size A1 of the text in the text control are determined, wherein the specific point includes the center point or vertex of the text control;

[0165] The second coordinates (x2, y2) of the specific point of the text control are determined based on the first coordinates (x1, y1) of the specific point of the text control and the first webpage scaling factor (scale); where x2 = x1 * scale; y2 = y1 * scale.

[0166] The second font size A2 of the text is determined based on the first font size A1 of the text and the first webpage scaling factor scale; where A2 = A1 * scale;

[0167] In some embodiments, to avoid excessive scaling of the text font, a corresponding font scaling factor can be set for the first webpage scaling factor, and then the font size can be changed according to the font scaling factor. For example, when the first webpage scaling factor is 1.5, the font scaling factor is 1.2.

[0168] In some embodiments, the first webpage scaling factor includes a first webpage width scaling factor scale1 and a first webpage height scaling factor scale2, and the second font size of the text is A2 = A1 * scale1 or A2 = A1 * scale2, or the minimum value of the first webpage width scaling factor scale1 and the first webpage height scaling factor scale2 is selected to calculate the second font size of the text.

[0169] Draw the text control at the position of the second coordinate, wherein the size of the text in the text control is the second font size.

[0170] For example, the layout of the controls on the first webpage is as follows: Figure 16 As shown, the resolution of the first webpage is 1280*720; the physical resolution of the display device is 1920*1080, and the scaling factor of the first webpage is calculated to be 1.5. Figure 16 Taking the first text control 161 as an example, the first coordinate (x1, y1) of the center point of the first text control is (100, 650), and the second coordinate (x2, y2) of the center point of the first text control is (150, 975). Where x2 = x1 * scale = 100 * 1.5 = 150, y2 = y1 * scale = 650 * 1.5 = 975; the first font size of the text in the first text control 161 is 10, and the second font size is 15; where A2 = A1 * scale = 10 * 1.5 = 15. The first text control 161 is displayed with a font size of 15, using (150, 975) as the center point coordinate. The center point coordinates and font sizes of all text controls on the first webpage are calculated to obtain the second coordinates and second font sizes. Based on the second coordinates and second font sizes, the text controls are redrawn and rearranged to obtain the second webpage, as shown below. Figure 17 As shown.

[0171] For example, the layout of the controls on the first webpage is as follows: Figure 18 As shown, the physical resolution of the display device is 1920*1080, and the resolution of the first webpage is 720*720; the calculated scaling factor (scale1) for the width of the first webpage is 2.7, and the scaling factor (scale2) for the height of the first webpage is 1.5. Figure 18 Taking the first text control 181 as an example, the first coordinate (x1, y1) of the center point of the first text control 181 is (100, 650), and the second coordinate (x2, y2) of the center point of the first text control 181 is (150, 975). Where x2 = x1 * scale = 100 * 2.7 = 270, y2 = y1 * scale = 650 * 1.5 = 975; the first font size of the text in the first text control 181 is 10, and the second font size is 15; where A2 = A1 * scale = 10 * 1.5 = 15. The first text control 181 with a font size of 15 is displayed using (270, 975) as the center point coordinate. After calculating the second coordinate and second font size for the center coordinates and font size of all text controls on the first webpage, the text controls are redrawn and rearranged according to the second coordinate and second font size to obtain the second webpage, as shown below. Figure 19 As shown.

[0172] In some embodiments, if the element in the first webpage corresponds to an image control, the first coordinates of a specific point of the image control are determined, as well as the first width and first height of the image control, wherein the specific point includes the center point or vertex of a text control;

[0173] The second coordinates (x2, y2) of the specific point of the image control are determined based on the first coordinates (x1, y1) of the specific point of the image control and the first webpage scaling factor scale, where x2 = x1 * scale; y2 = y1 * scale.

[0174] The second width W2 and the second height H2 of the image control are determined based on the first width W1 and the first height H1 of the image control, and the first webpage scaling factor scale; wherein W2 = W1 * scale, and H2 = H1 * scale.

[0175] In some embodiments, the first webpage scaling factor includes a first webpage width scaling factor scale1 and a first webpage height scaling factor scale2, and the second width W2 = W1 * scale1 and the second height H2 = H1 * scale2 of the image control.

[0176] In some embodiments, to avoid an imbalance in the aspect ratio of the image, when the first webpage scaling factor includes a first webpage width scaling factor scale1 and a first webpage height scaling factor scale2, the smaller of the two values ​​can be selected for the width and height calculation. For example: scale1 < scale2, the second width W2 of the image control = W1 * scale1 and the second height H2 = H1 * scale1.

[0177] The image control is drawn at a second coordinate of a specific point of the image control, the width of the image control is a second width, and the height of the image control is a second height.

[0178] It should be noted that when drawing the image control with the second width and the second height on the second coordinate, the image control is not directly stretched and shrunk, but is redrawn according to the first webpage scaling factor.

[0179] The steps for redrawing the image control include: identifying the color of each pixel in the image, determining at least one pixel block where the pixels within the pixel block are the same color; determining a second region of the pixel block based on a first region of the pixel block and a first webpage scaling factor, and setting the pixels in the second region to red. The second region of the pixel block can be determined by multiplying the boundary length of the original pixel block by the first webpage scaling factor. The boundary length refers to the straight line of the pixel block's edge; a pixel block is a closed shape enclosed by several boundaries. For example, with a 4*2 rectangular red pixel block and a first webpage scaling factor of 1.5, the second region of the red pixel block is a 6*3 rectangle. The specific display position of the red pixel block can be determined by its relative position to a specific point of the image control, or by its actual coordinates in the coordinate system.

[0180] For example, the layout of the controls on the first webpage is as follows: Figure 16 As shown, the resolution of the first webpage is 1280*720; the physical resolution of the display device is 1920*1080, and the scaling factor of the first webpage is calculated to be 1.5. Figure 16Taking the first image control 162 as an example, the first coordinate (x1, y1) of the top left vertex of the first image control 162 is (100, 500), and the second coordinate (x2, y2) of the top left vertex of the first image control 162 is (150, 750). Where x2 = x1 * scale = 100 * 1.5 = 150, y2 = y1 * scale = 500 * 1.5 = 750; the first width and first height of the first image control are 400, and the second width and second height are 600. Using (150, 750) as the top left vertex coordinate of the first image control 162, a first image control 162 with a width and height of 600 is displayed. After calculating the second coordinate, second width, and second height of the top left vertex coordinates and width and height of all image controls on the first webpage, the image controls are redrawn and rearranged according to the second coordinate, second width, and second height to obtain the second webpage, as shown below. Figure 17 As shown.

[0181] For example, the layout of the controls on the first webpage is as follows: Figure 18 As shown, the resolution of the first webpage is 720*720; the physical resolution of the display device is 1920*1080; the calculated scaling factor (scale1) for the width of the first webpage is 2.7, and the scaling factor (scale2) for the height of the first webpage is 1.5. Figure 18 Taking the first text control 182 as an example, the first coordinate (x1, y1) of the top left vertex of the first image control is (100, 500), and the second coordinate (x2, y2) of the top left vertex of the first image control is (270, 750). Where x2 = x1 * scale = 100 * 2.7 = 270, y2 = y1 * scale = 500 * 1.5 = 750; the first width of the first image control is 200, the first height is 200, the second width is 540, and the second height is 300. Using (270, 750) as the top left vertex coordinate of the first image control 182, a first image control 182 with a width of 540 and a height of 300 is displayed. After calculating the second coordinate, second width, and second height of the top left vertex coordinates and width and height of all image controls on the first webpage, the image controls are redrawn and rearranged according to the second coordinates, second width, and second height to obtain the second webpage, as shown below. Figure 19 As shown.

[0182] This embodiment prevents situations where only a small area of ​​the screen displays webpage content or displays only a portion of the webpage content across the entire screen, providing users with a suitable viewport and a clear page, thus bringing a good user experience.

[0183] Step S809: Control the display to show the second webpage.

[0184] If the file object model tree does not contain a meta viewport label, the controller 250 executes step S810: controlling the display to show the first webpage corresponding to the second resolution.

[0185] In some embodiments, if the file object model tree does not contain a meta viewport tag, the controller 250 may also perform a second webpage scaling factor determination based on the physical resolution of the display device and the second resolution;

[0186] Based on the second webpage scaling factor, the elements in the first webpage are rearranged, redrawn, and rearranged to obtain the third webpage;

[0187] Control the display to show the third webpage.

[0188] The calculation method for the second scaling factor is the same as that for the first scaling factor, and the method for determining the third webpage is the same as that for the second webpage, so it will not be repeated here.

[0189] Different web pages within the same browser application may have different resolutions, which can cause screen flickering when a user switches between pages. This application's embodiments can dynamically detect the web page rendering mode, i.e., the web page's first resolution, and rearrange, redraw, and reflow the layout based on the first resolution and the display device's physical resolution. This ensures that even when the resolution of the switched web page differs from the current web page, it still adapts to the display device's physical resolution, providing the user with a suitable viewport during web page switching.

[0190] In some embodiments, when a user presses a button on the control device 100, all currently open applications can be displayed, including at least two browser applications. Upon receiving a user's instruction to switch applications, the focus moves from the first browser application control to the second browser application control, canceling the display of the first browser application's page and simultaneously displaying the second browser application's page. For example, when a user presses a button on the control device 100, the following is displayed: Figure 20 User interface, Figure 20 This includes a first browser application control 201, a second browser application control 202, a third application control 203, an application page display area 204, and a focus point 205. The current focus indicates that the first browser application control 201 is selected, and the application page display area 204 displays the page corresponding to the first browser application control 201. When the user presses the down button on the control device 100, the focus point 205 indicates that the second browser application control 202 is selected. At this time, the page of the second browser application is loaded and displayed in the application page display area 204, such as... Figure 21As shown. The embodiments of this application can dynamically detect the webpage rendering mode, i.e., the first resolution of the webpage, and rearrange, redraw, and reflow according to the first resolution and the physical resolution of the display device, so that when switching to a browser application with a different resolution, it can still be adapted to the physical resolution of the display device, and there will be no screen flickering during the switching of browser applications, and a suitable viewport can be displayed to the user.

[0191] Some embodiments of this application provide a webpage display method applicable to a display device, the display device including a display and a controller. The controller is configured to: respond to a user input instruction to open a browser application, begin loading a first webpage of the browser application; parse the downloaded first webpage to obtain a file object model tree; if the file object model tree contains a meta-viewport tag, determine a first resolution of the first webpage based on the meta-viewport tag; determine a first webpage scaling factor based on the physical resolution of the display device and the first resolution; rearrange, redraw, and reorder the elements in the first webpage based on the first webpage scaling factor to determine a second webpage; and control the display to display the second webpage. Some embodiments of this application can prevent screen flickering, rendering webpage content in a small area of ​​the screen, or displaying only a portion of the webpage content on the entire screen, providing users with a suitable viewport and making the webpage display clearer, thus improving the user experience.

[0192] 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 them. Although this application has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that modifications can still be made to the technical solutions described in the foregoing embodiments, or equivalent substitutions can be made to some or all of the technical features therein. Such modifications or substitutions do not cause the essence of the corresponding technical solutions to deviate from the scope of the technical solutions of the embodiments of this application.

[0193] For ease of explanation, the above description has been provided in conjunction with specific embodiments. However, the above exemplary discussion is not intended to be exhaustive or to limit the embodiments to the specific forms disclosed above. Various modifications and variations can be obtained based on the above teachings. The selection and description of the above embodiments are for the purpose of better explaining the principles and practical applications, thereby enabling those skilled in the art to better utilize the described embodiments and various different variations of embodiments suitable for specific use considerations.

Claims

1. A display device, characterized in that, include: monitor; The controller is configured as follows: In response to a user's command to open a browser application, the first webpage of the browser application begins to load; Obtain the window mode from the window mode parameters of the first webpage, or obtain the window mode corresponding to the browser application; Obtain the second resolution of the first webpage from the window mode; Parse the downloaded first webpage to obtain the file object model tree; If the webpage header of the file object model tree contains a meta viewport tag, the first resolution of the first webpage is obtained from the meta viewport tag, and the first resolution includes a first horizontal resolution and a first vertical resolution; If the first webpage is a normalized webpage, the scaling factor of the first webpage is calculated based on the physical horizontal resolution of the display device and the first horizontal resolution, or the physical vertical resolution of the display device and the first vertical resolution. The normalized webpage is a webpage designed according to the aspect ratio of the display screen. Based on the scaling factor of the first webpage, the elements in the first webpage are rearranged, redrawn, and rearranged to obtain the second webpage; If the first webpage is a non-normalized webpage, calculate the width scaling factor of the first webpage based on the physical horizontal resolution of the display device and the first horizontal resolution, and calculate the height scaling factor of the first webpage based on the physical vertical resolution of the display device and the first vertical resolution. Based on the first webpage width scaling factor and the first webpage height scaling factor, the elements in the first webpage are rearranged, redrawn, and rearranged to obtain the second webpage; Control the display to show the second webpage; If the webpage header of the file object model tree does not contain a meta viewport tag, a second webpage scaling factor is determined based on the physical resolution of the display device and the second resolution; Based on the second webpage scaling factor, the elements in the first webpage are rearranged, redrawn, and rearranged to obtain the third webpage; Control the display to show the third webpage.

2. The display device according to claim 1, characterized in that, In the step of rearranging, redrawing, and reflowing the elements in the first webpage based on the first webpage scaling factor, the controller is further configured to: If the element in the first webpage corresponds to a text control, obtain the first coordinates of a specific point of the text control and the first font size of the text in the text control, wherein the specific point includes the center point or vertex of the text control; Calculate the second coordinates of the specific point of the text control based on the first coordinates of the specific point of the text control and the first webpage scaling factor; Calculate the second font size of the text based on the first font size of the text and the first webpage scaling factor; Draw the text control at the second coordinate position, and the font size of the text in the text control is the second font size.

3. The display device according to claim 1, characterized in that, In the step of rearranging, redrawing, and reflowing the elements in the first webpage based on the first webpage scaling factor, the controller is further configured to: If the element in the first webpage corresponds to an image control, obtain the first coordinates of a specific point of the image control, as well as the first width and first height of the image control, wherein the specific point includes the center point or vertex of the text control; Calculate the second coordinates of the specific point of the image control based on the first coordinates of the specific point of the image control and the first webpage scaling factor; Calculate the second width and second height of the image control based on the first width and first height of the image control, and the first webpage scaling factor; The image control is drawn at a second coordinate of a specific point of the image control, the width of the image control is a second width, and the height of the image control is a second height.

4. The display device according to claim 1, characterized in that, After the step of obtaining the second resolution of the first webpage from the meta viewport tag, the controller is configured to: Determine whether the first resolution is the same as the physical resolution of the display device; If the first resolution is the same as the physical resolution of the display device, control the display to show the first webpage corresponding to the first resolution; If the second resolution is not the same as the physical resolution of the display device, then it is determined whether the first webpage is the normalized webpage.

5. A method for displaying a webpage, characterized in that, include: In response to a user's command to open a browser application, the first webpage of the browser application begins to load; Obtain the window mode from the window mode parameters of the first webpage, or obtain the window mode corresponding to the browser application; Obtain the second resolution of the first webpage from the window mode; Parse the downloaded first webpage to obtain the file object model tree; If the webpage header of the file object model tree contains a meta viewport tag, the first resolution of the first webpage is obtained from the meta viewport tag, and the first resolution includes a first horizontal resolution and a first vertical resolution; If the first webpage is a normalized webpage, the scaling factor of the first webpage is calculated based on the physical horizontal resolution of the display device and the first horizontal resolution, or the physical vertical resolution of the display device and the first vertical resolution. The normalized webpage is a webpage designed according to the aspect ratio of the display screen. Based on the scaling factor of the first webpage, the elements in the first webpage are rearranged, redrawn, and rearranged to obtain the second webpage; If the first webpage is a non-normalized webpage, calculate the width scaling factor of the first webpage based on the physical horizontal resolution of the display device and the first horizontal resolution, and calculate the height scaling factor of the first webpage based on the physical vertical resolution of the display device and the first vertical resolution. Based on the first webpage width scaling factor and the first webpage height scaling factor, the elements in the first webpage are rearranged, redrawn, and rearranged to obtain the second webpage; Control the display to show the second webpage; If the webpage header of the file object model tree does not contain a meta viewport tag, a second webpage scaling factor is determined based on the physical resolution of the display device and the second resolution; Based on the second webpage scaling factor, the elements in the first webpage are rearranged, redrawn, and rearranged to obtain the third webpage; Control the display to show the third webpage.

Images