WO2025020756A1 - Self-adaptive visual area display method, apparatus and system, and medium - Google Patents

Abstract

A self-adaptive visual area display method, apparatus and system, and a medium, relating to the technical field of display, and aiming to improve the display effect. The display method comprises: in response to triggering of display of page data, on the basis of the size of a visual area in a display window, adjusting the sizes of elements comprised in the page data, wherein the display window is used for displaying the page data; and displaying the adjusted page data in the display window, wherein all the elements in the page data are located in the visual area of the display window.

Description

Display method, device, system and medium of adaptive visual area

This application claims priority to a Chinese patent application filed with the Chinese Patent Office on July 25, 2023, with application number 202310922858.2 and invention name “Display method, device, system and medium for adaptive visual area”, the entire contents of which are incorporated by reference in this application.

Technical Field

The present disclosure relates to the field of display technology, and in particular to a display method, device, system and medium for adaptively viewing areas.

Background Art

With the development of display technology, various types of display devices have emerged, such as mobile phones, computers, 4K large screens, etc. Among them, page data needs to be displayed on these different display devices. For example, when opening a mobile phone's browser, the page data needs to be displayed in the browser window. For example, when using a 4K large screen to display page data, the page data needs to be displayed in the browser window of the large screen.

Overview

The present disclosure provides a display method, device, system and medium for an adaptive visible area.

In a first aspect, the present disclosure provides a method for displaying an adaptive visible area, the method comprising:

In response to a display trigger of the page data, adjusting the size of the elements included in the page data based on a display window displaying the page data;

Displaying the adjusted page data in the display window;

Wherein, all elements in the page data are located in the visible area of the display window.

Optionally, after displaying the adjusted page data in the display window, the method further includes:

In response to the size change of the display window, adaptively adjusting the size of the elements included in the page data;

The adaptively adjusted page data is displayed in the changed display window, wherein all elements in the page data are located in the visible area of the changed display window.

Optionally, in response to the size change of the display window, adaptively adjusting the size of the element included in the page data includes at least one of the following:

In response to a size adjustment operation performed on the display window, acquiring size parameters of the display window after the size adjustment, and adaptively adjusting the size of the elements included in the page data based on the size parameters;

In response to a change in the resolution of the display device where the display window is located, obtaining a changed target The target resolution is determined, and sizes of elements included in the page data are adaptively adjusted based on the target resolution.

Optionally, in response to a change in the resolution of a display device where the display window is located, acquiring a changed target resolution includes:

In response to a drag operation of moving the display window from the first display screen to the second display screen, taking a resolution of the second display screen as the target resolution;

and/or, in response to an adjustment operation on the resolution of the display device where the display window is located, using the resolution after the adjustment operation as the target resolution;

The resolution of the first display screen is different from that of the second display screen; and/or the size of the first display screen is different from that of the second display screen.

Optionally, adaptively adjusting the size of the element included in the page data based on the target resolution includes:

Determining a first adjustment parameter based on the target resolution and a preset resolution of the page data; wherein the first adjustment parameter includes a scaling ratio in a height direction and a scaling ratio in a width direction;

Based on the first adjustment parameter, the size of the element included in the page data is adjusted.

Optionally, in response to the size adjustment operation performed on the display window, acquiring a size parameter of the display window after the size adjustment, and adaptively adjusting the size of the element included in the page data based on the size parameter, comprises:

Determining a first size of a visible area of the display window before the size adjustment operation, and a second size of the display window after the size adjustment operation;

Determining the size parameter based on the first size and the second size;

Based on the size parameter, the size of the element included in the adjusted page data is adaptively adjusted.

Optionally, acquiring size parameters of the display window after the size adjustment, and adaptively adjusting the sizes of elements included in the page data based on the size parameters, includes:

Acquire a first size of a visible area of the display window after the size adjustment operation, and a current resolution of a display device where the display window is located;

Determining a preliminary ratio based on the current resolution and a preset resolution of the page data;

Based on the preliminary ratio and the first size, the size of the element included in the page data is adaptively adjusted.

Optionally, a size of the same element in the page data in the display window before the change and a size of the same element in the display window after the change have a first ratio;

There is a gap between the visible area of the first display window and the visible area of the second display window. Second ratio;

The first ratio is linearly correlated with the second ratio.

Optionally, the adaptive adjustment includes: adjusting the size of the element in a first direction; and/or adjusting the size of the element in a second direction; wherein the first direction is a height direction or a width direction of the display window, and the first direction is perpendicular to the second direction.

Optionally, in response to triggering display of the page data, adjusting the size of the elements included in the page data based on the size of the visible area of the display window includes:

In response to a display trigger of the page data, obtaining a current resolution of the display device where the display window is located;

Based on the current resolution and a preset resolution of the page data, sizes of elements included in the page data are adjusted.

Optionally, adjusting the size of the element included in the page data based on the current resolution and the preset resolution of the page data includes:

Based on the preset resolution, determining a first size ratio of the page data;

Based on the current resolution, determining a second size ratio of the display window;

Determining a second adjustment parameter based on the first size ratio and the second size ratio; wherein the second adjustment parameter includes a scaling ratio in a height direction and a scaling ratio in a width direction;

Based on the second adjustment parameter, the size of the element included in the page data is adjusted.

Optionally, the display window includes a plurality of sub-display areas, and different sub-display areas are located in different display devices; and adjusting the size of the elements included in the page data based on the display window to display the page data includes:

In response to a display trigger of the page data, determining a window resolution of the display window based on screen resolutions corresponding to each of the plurality of display devices;

Based on the window resolution and a preset resolution of the page data, the size of the element in the page data is adjusted.

Optionally, adjusting the size of the elements included in the page data includes: scaling each element included in the page data.

Optionally, adjusting the size of the element included in the page data based on the second adjustment parameter includes:

Mapping the second adjustment parameter to a scaling function scale method as a scaling parameter in the scale method;

Based on the scaling parameters in the scale method, the transform method is called to adjust the size of the elements included in the page data.

The present disclosure also provides a display system with an adaptive visual area, comprising:

Content provider, used to provide page data;

The display module is used to execute the display method based on the page data.

Optionally, the display module includes a response unit and a view unit; wherein:

The response unit is used to determine a second adjustment parameter for adjusting an element in the page data based on a current resolution of a display device where the display window is located and a preset resolution of the page data;

The view unit is used to adjust the size of the element included in the page data based on the second adjustment parameter transmitted by the response unit.

Optionally, the display system further includes:

A monitoring unit, used for monitoring changes of the display window, and triggering the display module to perform an adaptive adjustment operation when changes of the display window are monitored;

The adaptive adjustment operation includes: adaptively adjusting the size of the elements included in the page data, and displaying the adaptively adjusted page data in the changed display window.

Optionally, the display module is further used to instruct the monitoring unit to monitor the change of the display window again after performing the adaptive adjustment operation, and trigger the display module to perform the adaptive adjustment operation when the change of the display window is monitored;

or,

After the monitoring unit triggers the display module to perform the adaptive adjustment operation for a preset time, the display module monitors the change of the display window again, and triggers the display module to perform the adaptive adjustment operation when the display window changes.

The display method proposed in the embodiment of the present disclosure adjusts the size of the elements included in the page data according to the display window when displaying the page data in the display window. In this way, for different display devices, the size of the elements in the page data can be adjusted according to the display window on the display device, so that the size of its page view fits the display window, so that all the elements of the adjusted page data are located in the visible area of the display window; because all the elements of the page data are located in the visible area of the display window, the user can see the entire content of the page data in the visible area of the display window without dragging the scroll bar to browse, thus simplifying the user's operation and further improving the user's browsing experience of the web page.

The present disclosure also discloses an electronic device, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements the display method of the adaptive visible area as described above when executing the computer program.

The present disclosure also discloses a computer-readable storage medium storing a computer program. The program enables the processor to execute the display method of the adaptive visible area as described in the present disclosure.

The above description is only an overview of the technical solution of the present disclosure. In order to more clearly understand the technical means of the present disclosure, it can be implemented according to the contents of the specification. In order to make the above and other purposes, features and advantages of the present disclosure more obvious and easy to understand, the specific implementation methods of the present disclosure are listed below.

BRIEF DESCRIPTION OF THE DRAWINGS

In order to more clearly illustrate the technical solutions in the embodiments of the present disclosure or related technologies, the following is a brief introduction to the drawings required for use in the embodiments or related technical descriptions. Obviously, the drawings described below are some embodiments of the present disclosure. For ordinary technicians in this field, other drawings can be obtained based on these drawings without creative work. It should be noted that the proportions in the drawings are only for illustration and do not represent the actual proportions.

FIG1 is a flowchart showing a method for displaying an adaptive visible area in an embodiment of the present disclosure;

FIG2 is a schematic diagram showing an application scenario of the method for displaying an adaptive visible area in an embodiment of the present disclosure;

FIG3 shows a schematic diagram of a display interface in the related art and a comparative schematic diagram of a display interface displayed using the display method of this embodiment;

FIG4 is a schematic diagram showing a display interface of a computer at two resolutions in an embodiment of the present disclosure;

FIG5 is a schematic diagram showing a display method in the case of a spliced screen in an embodiment of the present disclosure;

FIG6 shows an exemplary flow chart of a method for displaying an adaptive visible area in an embodiment of the present disclosure;

FIG. 7 is a flowchart showing a method for displaying an adaptive visible area according to an embodiment of the present disclosure;

FIG8 is a schematic diagram showing a size change of a visible area of a display window in an embodiment of the present disclosure;

FIG9 is a flowchart showing a method for displaying an adaptive visible area according to another embodiment of the present disclosure;

FIG10 shows another exemplary flow chart of a method for displaying an adaptive visible area in an embodiment of the present disclosure;

FIG11 is a schematic diagram showing a framework structure of a display system with adaptive visible area according to an embodiment of the present disclosure;

FIG. 12 shows a schematic diagram of the framework structure of a display device with adaptive visible area according to an embodiment of the present disclosure.

Detailed Description

To make the purpose, technical solutions and advantages of the embodiments of the present disclosure clearer, the following will be combined with the present disclosure The drawings in the embodiments are used to clearly and completely describe the technical solutions in the embodiments of the present disclosure. Obviously, the described embodiments are part of the embodiments of the present disclosure, not all of the embodiments. Based on the embodiments in the present disclosure, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present disclosure.

In the related art, it is necessary to display page data on a variety of different types of display devices. The page data is also called web page data, which is the data displayed when a user opens a web page in a browser. Since different display devices differ in size and screen resolution, the web page data needs to adapt to the size of different display devices. For example, when opening a browser on a mobile phone, the view layout of the displayed web page needs to adapt to the screen of the mobile phone.

In view of this, the present disclosure proposes a display method, which can adapt page data to different display devices. Specifically, referring to Figures 1, 2 and 3, Figure 1 shows a schematic diagram of the step flow of the display method of the adaptive visual area, Figure 2 shows a schematic diagram of the application scenario of the display method of the adaptive visual area, and Figure 3 shows a schematic diagram of the display interface in the related technology and a comparative schematic diagram of the display interface displayed using the display method; as shown in Figure 1, the display method of the adaptive visual area can be applied to a display device, specifically, can be applied to the front-end interface of a browser or application on a display device.

Among them, the display device may include a mobile phone, a computer, a tablet, a 4K large screen, an MP4, and a smart TV, etc. Specifically, it can be applied to the web front end or the front end interface of various applications, wherein the web front end generally refers to the front end of the browser, and the front end interface of various applications refers to the front end interface of the APP or client installed on the display device. If the display device is a mobile phone, the application is an APP, including an APP adapted to the Android system and an APP adapted to the IOS system. If the display device is a computer, the application is a client located on the computer. Among them, whether it is a web front end or the front end interface of various APP applications, the display method of the adaptive visual area disclosed in the present invention can be applied.

As shown in FIG1 , the method for displaying an adaptive visible area of the present disclosure may specifically include the following steps:

Step 101: in response to a display trigger of page data, adjusting the size of elements included in the page data based on the size of a visible area in a display window;

Wherein, the display window is used to display the page data.

Step 102: Displaying the adjusted page data in a display window; wherein all elements in the page data are located in a visible area of the display window.

In this embodiment, the display trigger of the page data can be performed on the display device, specifically, it can occur on the web front end or the front end interface of various applications, where the web front end generally refers to the front end of the browser, and the front end interface of various applications refers to the front end interface of the APP or client installed on the display device. Among them, the display device generally has a browser installed, and the user can browse through the browser You can browse the web and install various applications on the display device to provide users with corresponding services through various applications. For example, if you install social communication applications, you can provide users with social services. If you install news applications, you can push news content to users.

The web pages of the browser may include but are not limited to H5 pages, etc., wherein the H5 page refers to a web page developed based on HTML5 technology. In the present disclosure, whether it is a web page interface provided by a web front end or an interface provided by an APP, it may be referred to as a web page, and the data in the interface may be referred to as page data.

Among them, the triggering of the display of page data may include opening the browser, triggering the control in the browser, opening the application (APP and client), and triggering the control in the application. Taking the browser (web side) as an example, opening the browser will generally enter the homepage of the webpage, and the page data that needs to be displayed is the page data of the homepage of the webpage. For example, opening the IE browser will enter the homepage of the IE browser, and the page data of the homepage is displayed on the homepage. Among them, the triggering operation of the control in the browser, such as single-clicking or double-clicking, will enter the webpage where the control is located, and the page data that needs to be displayed is the data associated with the control. For example, after entering the homepage of the IE browser, enter a search term in the search bar and click it, the results searched for the search term will be displayed, and selecting one of the results will enter the webpage corresponding to the result.

As shown in Figure 2, Figure 2 takes an APP on a mobile phone as an example. There are multiple APPs preset on the mobile phone. When one of the APP1 is opened, the user enters the home page provided by APP1. For example, when the NetEase News APP is opened, the user enters the home page of NetEase News. When an entry in NetEase News is triggered, the news corresponding to the entry will be displayed.

In this embodiment, the display device can monitor the operations occurring on the front-end page through the web end (or APP client), and when the operation that needs to open the page data is monitored on the front-end page, such as the triggering operation of a certain control, it can send the monitored operation and the control identifier targeted by the operation to the cloud connected to the web end (or APP client), and then the cloud can feedback the page data corresponding to the control identifier to the display device. Alternatively, in an example, the display device can monitor the operations occurring on the front-end page through the web end (or APP client), and when the operation that needs to open the page data is monitored on the front-end page, such as the triggering operation of a certain control, it can obtain the page data corresponding to the triggered control from the locally cached page data based on the monitored operation and the control identifier targeted by the operation.

Alternatively, in another example, the display device can monitor operations occurring on the front-end page through the web end (or APP client). When an operation that requires opening page data is monitored on the front-end page, such as a triggering operation of a certain control, the page data corresponding to the triggered control can be searched from the locally cached page data based on the monitored operation and the control identifier targeted by the operation. If the page data is found, the corresponding page data is extracted from the local cache. If not found, the control identifier is opened. The page data is sent to the cloud and received from the cloud.

When the display of page data is triggered, the page data obtained above needs to be displayed in the display window. In this embodiment, the size of the visible area in the display window displaying the page data can be determined, wherein the visible area refers to the area where the display window can be visually observed, that is, the area within the user's sight. Generally speaking, for web terminals and applications on computers, 4K large screens, and spliced screens, a display window can be maximized and minimized, and its size can be adjusted between maximization and minimization. In the case of maximization, the visible area generally refers to the entire display area of the computer. In the case of minimization, the display window is invisible when entering the menu bar. The user can also adjust the length and width of the display window. In this case, the display window occupies part of the display area of the electronic device, and the visible area is the area enclosed by the four sides of the display window.

Among them, as shown in Figure 2, for the web and APP applications on the mobile phone, the display window may refer to the screen area 200 of the mobile phone, and the visible area generally refers to the screen area 200 of the mobile phone; of course, for a mobile phone that can change the size of the APP display window, the display window may also be located in a partial display area of the mobile phone screen, and the visible area refers to the area enclosed by the four sides of the display window.

When it is necessary to display page data, the size of the visible area of the display window can be determined first, and then the size of all elements included in the page data can be adjusted according to the size of the visible area. In one example, the display device can have an instance for obtaining the size of the visible area of the display window of the web end (or APP), through which the change of the size of the visible area of the display window of the running web end (or APP) can be monitored in real time, and the size of the visible area of the display window of the running web end (or APP) can be passed to the instance for displaying page data in real time, so that the instance for displaying page data can adaptively adjust the size of the elements in the page data according to the size of the visible area of the passed display window, so that the size of the elements can adapt to the size of the visible area, thereby ensuring that all elements of the page data are located in the visible area of the display window.

Among them, the elements in the page data may include elements such as text, icons, and controls. Of course, in some examples, in addition to text, icons, and controls, the page data may also be embedded with a playback window for playing multimedia data, and the corresponding multimedia content is played in the playback window. Specifically, as long as it is content that needs to be displayed on the page, no matter what type it is, it can be called an element. As shown in Figures 2, 3, and 4, a schematic diagram of page data 300 is shown, in which the horizontal line portion represents text, and icons such as pentagons, hexagons, and five-pointed stars represent elements such as icons and controls in the page data.

The adjustment of the size of the element may include the adjustment of the width of the element and/or the adjustment of the height of the element. Specifically, depending on the size of the visible area of the display window, the size of the element in the width direction may be adjusted only, or the size of the element in the height direction may be adjusted only. Or adjust the size of an element in both width and height.

It should be noted that the width direction can be understood as the width direction of the display screen of the electronic device, that is, the horizontal direction in Figures 2, 3 and 4; the height direction can be understood as the height direction of the display screen of the electronic device, that is, the longitudinal direction in Figures 2, 3 and 4.

In one example, the display device needs to pass the size of the visible area of the display window of the running web terminal (or APP) to the instance for displaying page data, wherein the instance for displaying page data can run on the display device or on the cloud. When running on the display device, the instance for displaying page data can adjust the size of the elements in the acquired page data in the width direction and/or height direction according to the size of the visible area, and render the adjusted elements into the display window according to their original layout; when running on the cloud, the cloud can adjust the size of the elements in the width direction and/or height direction according to the size of the visible area, and combine the adjusted elements according to the original view layout to form new page data, and send the new page data to the display device, so that the display device can render the received new page data into the display window.

By adjusting the size of each element, the overall size of the view composed of the page data is adjusted, so that the view can adapt to the size of the visible area of the display window, so that all elements of the page data can be located in the visible area of the display window.

Then, after adjusting the size of each element, the adjusted page data can be obtained, and then the adjusted page data can be displayed in the display window. As shown in Figure 2, when the APP is triggered on the mobile phone, all elements in the home page data of the APP are located in the display screen of the mobile phone. In this way, there may be no scroll bar or there may be a scroll bar in the user interaction interface of the APP, but since all elements in the home page data are already located in the display screen of the mobile phone, the user can see all the data contained in the home page in the display screen without sliding the scroll bar up and down or left and right. For pages with more page data, this display method can help users quickly browse the content contained in the page.

As shown in Figure 3, taking the display device as a 4K large screen as an example, Image 301 in Figure 3 is a schematic diagram of the display interface of displaying page data 300 in a browser on a 4K large screen in the related art, and Image 302 in Figure 3 is a schematic diagram of the display interface of displaying page data 300 on a 4K large screen using the display method disclosed in the present invention. It can be seen that when the same page data 300 is displayed using the display method shown in the related art and the present invention respectively, in the related art, the page data of the web page is not all located in the visible area, and the user needs to pull up and down the scroll bar 303 to browse all the content; while in the present display method, all elements in the page data are located in the visible area, and the user can browse all the content without pulling up and down the scroll bar.

It should be noted that for 4K large screens, users usually use interactive control of web pages. With gesture control, for example, when displaying page data on a 4K large screen in the manner of 301, if the user needs to slide the scroll bar up and down to browse the page data, he needs to make a gesture to select the scroll bar, and then make another gesture to drag the scroll bar up and down 303. This requires a set of equipment and algorithms to recognize the user's gesture, and then start the corresponding control logic according to the recognized gesture, and generate corresponding operation data according to the control logic to control the web page to slide up and down or switch pages. Generally speaking, the user needs to make gestures many times to successfully slide the scroll bar up and down to complete web browsing. This process is very cumbersome and the success rate of controlling the page is not high. With the display method disclosed in the present invention, since the entire content of the page data is already in the visible area, the user does not need to frequently make gestures to browse the data, thereby optimizing the user's browsing experience.

When this implementation scheme is adopted, the size of the elements included in the page data is adjusted according to the size of the visible area of the display window. Therefore, for different display devices, after the size of the elements in the page data is adjusted, the size of the page view constituted by it adapts to the display window, so that all the elements of the adjusted page data are located in the visible area of the display window; because all the elements of the page data are located in the visible area of the display window, the user can see the entire content of the page data in the visible area of the display window without dragging the scroll bar to browse, thus simplifying the user's operation and further improving the user's browsing experience of the web page.

In some embodiments, when the size of the elements in the page data is adjusted based on the size of the visible area of the display window, it can be determined according to the current resolution of the display device where the display window is located. Specifically, in response to the display trigger of the page data, the current resolution of the display device where the display window is located can be obtained, and the size of the elements included in the page data can be adjusted based on the current resolution and the preset resolution of the page data.

In this embodiment, for the display window, its default state is generally maximized. As mentioned above, in the case of maximization, the visible area of the display window is the display area of the display device, and the display area of the display device is related to the resolution of the display device. For example, taking the display device as a computer, the screen resolution of the computer is 1920x1080, and the display resolution of the computer can be set to 1920x1080, or it can be set to a resolution less than 1920x1080, such as 1680×1050. If it is set to 1680×1050, then compared with the resolution of 1920x1080, its display area is smaller. Referring to FIG. 4, a schematic diagram of the display interface of a computer at two resolutions is shown. As shown in FIG. 4, the resolution on the left is 1920x1080, and the resolution on the right is 1680×1050; then for the display window, the size of the visible area of the display window on the left is 1920x1080, and the size of the visible area of the display window on the right is 1680×1050. Therefore, the current resolution of the display device can be used as the size of the visible area.

The page data may have a preset resolution, which may be a resolution agreed upon in advance when designing the UI design draft of the page data. It should be noted that: The preset resolution refers to the resolution standard that is referenced when designing page data. For example, if the agreed preset resolution is 1920x1080, the size of the elements in the designed page data is designed according to 1920x1080.

Among them, the size of the visible area of the display window can be determined according to the preset resolution and the current resolution of the display device, and the size relationship between the size of the page view presented by the page data can be determined, so that the size of the elements in the page data can be adjusted according to the size relationship, and the condition for the adjustment is that all elements in the page data can be located in the visible area.

In some examples of this embodiment, when the size of the elements included in the page data is adjusted based on the current resolution and the preset resolution of the page data, a first size ratio of the page data can be determined based on the preset resolution; a second size ratio of the display window can be determined based on the current resolution; a second adjustment parameter can be determined based on the first size ratio and the second size ratio; and the size of the elements included in the page data can be adjusted based on the second adjustment parameter.

The second adjustment parameter includes a scaling ratio in a height direction and a scaling ratio in a width direction.

Generally speaking, the resolution includes the size in the width direction and the size in the height direction, so the first size ratio and the second size ratio can both be the ratio of the width component to the height component in the resolution. For example, the preset resolution is 1920x1080, then the first size ratio is 1920/1080, assuming that the current resolution is 1680×1050, then the second size ratio is 1680/1050.

Among them, the second adjustment parameter can be understood as the value of transforming the first size ratio to the second size ratio, such as transforming 1920/1080 to 1680/1050. Specifically, the value can be represented by the second adjustment parameter, that is, the second adjustment parameter can be understood as: the view presented by the page data can be adapted to the current resolution after being transformed to which scale in the width and height directions respectively.

Then, the size of each element in the page data can be adjusted according to the second adjustment parameter. Specifically, different elements in the page data are adjusted according to the second adjustment parameter, that is, the second adjustment parameter is adapted to each element in the page data.

In some embodiments, adjusting the size of the element included in the page data includes scaling each element included in the page data. That is, the element can be scaled according to the second adjustment parameter, wherein the second adjustment parameter can include a scaling ratio of the width and a scaling ratio of the height. When scaling the element, the width can be scaled according to the scaling ratio of the width, and the height can be scaled according to the scaling ratio of the height.

In some embodiments, when the size of the element included in the page data is adjusted based on the second adjustment parameter, the second adjustment parameter can be mapped to the scaling function scale method as a scaling parameter in the scale method; and based on the scaling parameter in the scale method, calling The transform method adjusts the size of the elements included in the page data.

Specifically, when scaling the element according to the second adjustment parameter, it can be implemented based on the scale method in transform in CSS3, where the scale method focuses on achieving the scaling effect of the element (scaling is "reducing" and "enlarging"). The specific operations are as follows:

The scale method includes scaling parameters in the width direction and scaling parameters in the height direction. The scale method of the transform attribute in CSS3 is as follows:

1) scaleX(x): the element is scaled horizontally only (scaling in the width direction);

2) scaleY(y): the element is scaled vertically only (scaling in the height direction);

3) scale(x,y): the element is scaled horizontally and vertically at the same time (width and height are scaled at the same time);

Among them, scale(x,y) can accept two parameters to achieve simultaneous scaling of the element in width and height. Therefore, the width scaling ratio and the height scaling ratio in the second adjustment parameter can be passed to the x and y parameters respectively, and then the transform attribute is used to implement HTML mapping on the view, such as using the "div.style.transform＝`scale(${scale.width},${scale.height})" method to map, thereby changing the size of the elements in the page data.

Specifically, in one implementation, as described above, the display device may feed back the target resolution of the display window monitored by the web end (or APP) to the instance displaying the page data, wherein:

The example of display page data may include a preset ratio conversion algorithm, which may determine a second size ratio according to the target resolution of the display window fed back, and then determine a second adjustment parameter according to the relationship between the first size ratio and the second size ratio;

Specifically, the preset resolution corresponding to the page data can be carried in the page data as an attribute parameter of the page data. The instance displaying the page data can read the preset resolution and pass it to the proportional conversion algorithm to determine the first size ratio, and pass the target resolution of the display window fed back to the proportional conversion algorithm to determine the second size ratio. Then the proportional conversion algorithm determines the second adjustment parameter based on the relationship between the first size ratio and the second size ratio.

Among them, the obtained second adjustment parameter can continue to be passed to the scale method. After that, the scale method calls the transform attribute, that is, uses "div.style.transform＝`scale(${scale.width},${scale.height})" to map it to the original page data, so that each element in the original page data is scaled according to the second adjustment parameter.

With the technical solution of this embodiment, since the current resolution and the preset resolution of the page data correspond to the same measurement unit, that is, both use the measurement unit of pixel px, when the size of the element is adjusted according to the resolution of the display device and the preset resolution of the page data, the conversion is based on the same measurement unit, thereby simplifying the calculation process. In the case of simplifying the calculation process, compared with the related art, at least the following improvements are made:

In the related art, the responsive unit conversion based on rem is mainly used to realize the adaptation of page data to the display screen. Among them, the front-end rem is a relative unit relative to the pixel unit, which uses the font size of the root element as a benchmark instead of a fixed pixel value. In the conversion process, it is necessary to use units relative to the root element to define various sizes instead of using fixed pixel values. In the development process, it is necessary to use "rem" as a unit in the CSS code and set the font size in the root element. Since "rem" is required as a unit, and the display device uses px as a unit, it is necessary to convert rem to the corresponding px for display in the process of writing code. Therefore, the developer needs to convert between rem and px during the development process, which is relatively burdensome for the developer's mind and has a large development workload. In addition, the size that the browser can display is 12px, and the use of rem cannot break through this bottleneck. Even if rem is converted to less than 12px, the browser still displays it at 12px. In reality, the user may want to display it at 4px, but the use of rem cannot achieve this function, that is, the method of using rem cannot make the browser display it at 4px.

By adopting the above method disclosed in the present invention, on the one hand, since all of them are based on resolution conversion, that is, all of them are calculated based on px units, there is no process of converting px into other relative units, so the mental burden of developers can be reduced, that is, the workload in the development process is reduced, thereby improving development efficiency and saving development time. On the other hand, since it is based on the relative size relationship between the screen resolution and the preset resolution, the size of the element is adjusted according to this relative size relationship, so that the overall view of the page is fine-grainedly adjusted starting from the size of the element, thereby breaking through the bottleneck limit of 12px, so that the browser can display elements with a size smaller than 12px, thereby broadening the function of page display.

In actual situations, users will open browsing pages on multiple different display devices to browse page data, so the same page data needs to be displayed on different display devices. Among them, for different display devices, the size of the elements in the page data can be adjusted according to the current resolution of the display device so that all elements in the page data are located in the visible area of the display window. In some embodiments, the display device can be a spliced screen, which is composed of multiple display screens. When the page data needs to be displayed on the spliced screen, each display screen will display part of the content in the page data. In this case, the spliced screen can be regarded as a complete display screen to adaptively adjust the size of the elements in the page data.

Accordingly, the display window includes multiple sub-display areas, and different sub-display areas are located in different display devices; when the size of the elements included in the page data is adjusted based on the display window of the page data to be displayed, the window resolution of the display window can be determined in response to the display trigger of the page data based on the screen resolutions corresponding to each of the multiple display devices; and the size of the elements in the page data can be adjusted based on the window resolution and the preset resolution of the page data.

5 shows a schematic diagram of a display method in the case of a spliced screen. It is composed of display areas of multiple display devices spliced together. Each display device has its own corresponding screen resolution, which refers to the highest resolution inherent in the display device. In order to enable splicing between display devices, different display devices can have the same screen resolution. As shown in Figure 5, the screen resolutions of display devices 1-4 are all 1920x1080; then the window resolution of the spliced screen can be the resolution obtained after splicing: 3840x2160, so the size of each element in the page data can be adjusted according to the window resolution and the preset resolution.

The process of adjusting the size of each element in the page data according to the window resolution and the preset resolution can refer to the process of adjusting the size of the element in the page data according to the current resolution and the preset resolution, which will not be repeated here.

When this implementation scheme is adopted, for the spliced screen, the spliced screen can be regarded as a complete screen. According to the resolution of the complete screen, the sizes of all elements in the page data are adjusted so that all elements in the page data are located in the visible area of the display window. In this way, the user can see all the content contained in the web page on the large screen without moving the scroll bar.

An example of the above embodiment is given below. Referring to FIG. 6 , an overall flow chart of the exemplary display method is shown. The Scale object shown in FIG. 6 is the Scale method in this example. Specifically, the display may be performed in the following process:

S1. When making the UI design draft of the page data of a web page, determine a base resolution. Assume that the base resolution is 1920x1080, and specify the default scaling value as 1 (width and height scaling multiples). Under this base resolution, the base ratio can be approximately 1.77778 (1920/1080), which is named baseRatio; of course, in addition to this base resolution, the page data can also contain other basic parameters.

S2, upload the page data to the server to provide it to the web front end;

S3, monitoring the operation performed by the user on the display device, and when the operation of opening a web page by the user is monitored, obtaining the page data of the web page;

S4, obtaining the size of the display window for displaying the page data, wherein if the display window is maximized, the size is the screen resolution of the display device, and if the display window is not maximized, it is necessary to obtain the resolution of the display window relative to the display device; specifically, the width and height of the visible area of the current display window can be read through the innerWidth and innerHeight properties of the browser window object;

S5, the display device sends the acquired resolution of the display device to the instance of the display page data, and the ratio conversion algorithm in the instance of the display page data determines the size ratio of the element to be adjusted according to the acquired resolution and the preset resolution of the page data, and the process is as follows:

According to the width and height of the current window, a ratio is calculated, which is called currentRatio. At this time, currentRatio is determined. Then, the current aspect ratio currentRatio is compared with the base ratio baseRatio. If currentRatio is greater than baseRatio, such as currentRatio is 2, It means that the display ratio of the current terminal is wider, so the current width ratio that needs to be scaled is the display height of the visible area multiplied by the base ratio and then divided by the base width (i.e. 1920), that is, scale.width (scaled width ratio) = (display height of the visible area × baseRatio) / baseWidth (1920), where "×" means multiplication. The scaling height ratio does not need to be calculated by the base ratio, but directly uses the display height of the current display device divided by the base height. Because the current runtime state is a higher resolution scaling, the width needs to be calculated by the base ratio, and the height can be directly obtained through the window object, that is, the scaling ratio in the height direction = the height of the visible area / baseHeight (1080).

Another case is that if currentRatio is not greater than baseRatio, it means that the display ratio of the current display device is higher. In this case, the scaling height needs to be calculated, that is, the scaling ratio in the height direction = the width of the visible area/baseRatio/baseHeight(1080), and the width scaling ratio can be kept current and read directly through the window object, that is, the scaling ratio in the width direction = the width of the visible area/baseWidth(1080).

It can be seen that different display windows on the same display device can obtain different scaling ratios, and the scaling ratio is the second adjustment parameter.

S6, the second adjustment parameter is applied to the page data, for example, the second adjustment parameter is passed to the scale method of the transform attribute in CSS3, and the scale method will scale each element in the page data according to the size ratio. Specifically: the proportional conversion algorithm will pass the scaling ratio in the width direction and the scaling ratio in the height direction in the second adjustment parameter to the two parameters x and y in the scale object respectively. If scaling is only in the width direction, scaleX(x) is used; if scaling is only in the height direction, scaleY(y) is used; if scaling is in both the width and height directions, scale(x,y) is used: then the scale method uses the transform attribute to do HTML to achieve the mapping on the view, that is, div.style.transform = `scale(${scale.width},${scale.height})`, to scale each element in the page data.

S7: An instance of displaying the page data will render the scaled view of the page data into the display window. At this time, all elements in the page data are located in the visible area of the display window.

This example can be applied to various types of display devices such as mobile phones, 4K screens, spliced screens, computers, MP4s, etc. You only need to embed a program in the browser that converts the size ratio according to the resolution to achieve the effect of adaptive display window of page data. In other words, the view display can present the most perfect ratio according to the display window.

In a further embodiment, after all elements of the page data are displayed in the visible area of the display window, the page data may be adaptively adjusted in response to changes in the display window, so that no matter what changes occur in the display window, all elements of the page data are located in the visible area of the display window. For example, after the visible area is reduced, all elements of the page data are still located in the visible area after the size is changed. For example, after the visible area is enlarged, all elements of the page data are located in the visible area. domain and the size increases accordingly to fit the current visible area. For another example, when the resolution of the display device becomes lower, all elements of the page data become smaller but still all are in the visible area, and their sizes adapt to the current resolution to obtain a clearer display effect; for another example, when the resolution of the display device becomes higher, all elements of the page data become larger but still all are in the visible area, and their sizes adapt to the current resolution to obtain a clearer display effect.

In this way, when the resolution of the display window or the visible area changes, the view display will be proportionally presented in the most perfect proportion.

Accordingly, referring to FIG. 7 , a schematic flow chart of another display method is shown. As shown in FIG. 7 , after displaying the adjusted page data in the display window, the change of the display window may be monitored. When the change of the display window is monitored, the following steps may be performed:

Step 201: In response to a change in the display window, adaptively adjust the size of the elements included in the page data; wherein the change includes a change in the size of the visible area of the display window and a change in the display resolution;

Step 202: Displaying the adaptively adjusted page data in the changed display window, wherein all elements in the page data are located in the visible area of the changed display window.

Among them, the change of the display window includes the change of the height and width of the display window, and there are two situations that cause the display window to change in the width direction and the height direction. One is that the visible area of the display window is changed by manual operation. As shown in FIG8 , the resolution of the display device where the display window is located remains unchanged, which is 1920×1080. However, the display window is adjusted by the user from maximized display to non-maximized display, so that the visible area 200 of the display window is changed; the other is that the screen resolution of the display device where the display window is located is adjusted. As shown in FIG4 , the display device where the display window is located is adjusted from high resolution (1920×1080) to low resolution (1680×1050), which also changes the size of the display window.

Both of these changes will cause the size of the visible area of the display window to change. The size of the elements in the page data can be adaptively adjusted based on the size of the visible area of the display window after the change, so that all elements in the page data can always be located in the visible area of the display window.

Specifically, the size of the visible area of the changed display window can be obtained, and then, based on the size of the changed visible area, the size of the elements in the page data is adaptively adjusted, and the adaptively adjusted page data is displayed in the changed display window, wherein all elements in the page data are located in the visible area of the changed display window.

Specifically, the display device can call the monitoring interface built into the display device to monitor the size change of the visible area of the display window. When the size change is detected, the web end (or APP) can be notified to obtain the size of the visible area of the display window, such as the innerWidth and innerHeight properties of the window object described above, to obtain the size of the visible area after the change. Then, the innerWidth and innerHeight attributes of the window object can feed back the acquired size of the visible area to the instance displaying the page data, so that the instance displaying the page data readjusts the elements in the page data according to the process of the above step S5-57.

In some embodiments, the process of adaptively adjusting the size of the element in the page data based on the changed size of the visible area of the display window may refer to the process of step S101 described above.

By adopting this implementation method, a real-time response can be made to changes in the resolution of the display device and the size of the display window, so that after each change in the resolution of the display device or the size of the display window, the view display of the page data is proportionally presented in the most perfect proportion. In this way, after the user changes the size of the display window, and changes the resolution of the display device causing the size of the display window to change, the user can still see the entire content of the page data in the visible area of the changed display window, thereby optimizing the user's browsing experience.

In some embodiments, adaptive adjustment of the size of an element in page data may include: adjusting the size of the element in a first direction; and/or adjusting the size of the element in a second direction; wherein the first direction is the height direction or the width direction of the display window, and the first direction is perpendicular to the second direction.

That is to say, for the display window before and after the change, the size of the element in the page data displayed in the display window has changed in the first direction, and may also have changed in the second direction, or both in the first direction and the second direction. Specifically, it can be determined according to the change of the visible area of the display window. For example, if the visible area has changed in the width direction but not in the height direction, the size of the element has changed in the width direction before and after the display window has changed, while the size of the element has not changed in the height direction. For another example, if the visible area has changed in the height direction but not in the width direction, the size of the element has changed in the height direction before and after the display window has changed, while the size of the element has not changed in the width direction; if the visible area has changed in both the height and width directions, the size of the element has changed in both the height and width directions before and after the display window has changed.

That is to say, before and after the display window changes, the size changes of the elements in the visible area also adapt to the changes of the display window.

Accordingly, as described above, there are two situations that cause the width and length of the display window to change. Below, the situation shown in FIG8 is used to illustrate. Specifically, FIG8 shows a situation where the size of the display window is adjusted by the user. This adjustment causes the size of the visible area of the display window to change. Specifically, the monitoring interface built into the display device can monitor whether the size of the display window is adjusted. When the size adjustment operation is detected, the monitoring interface can respond to the size adjustment operation of the display window and determine the size parameters of the visible area of the display window after the size adjustment operation. Then, based on the size parameter, the size of the elements included in the page data is adaptively adjusted; wherein the size change includes a change in the width and/or height of the display window.

Accordingly, in response to a size adjustment operation performed on the display window, a size parameter of the display window after the size adjustment may be acquired, and the size of the element included in the page data may be adaptively adjusted based on the size parameter.

In this embodiment, the size adjustment operation may include an operation to extend or shorten the width of the display window. For example, if the user selects the edge of the display window with the mouse and drags the edge to the outside of the display window, the width increases; if the user moves the edge to the inside of the display window, the width decreases. Similarly, the size adjustment operation may include an operation to extend or shorten the height of the display window. Of course, in some other embodiments, the size adjustment operation may be a predetermined operation, such as double-clicking the left mouse button continuously to reduce the display window to a certain size; and clicking the left mouse button three times continuously to expand the display window to a certain size.

In practice, the innerWidth and innerHeight properties of the window object can obtain the size of the display window after resizing, and then obtain the size parameter, which can characterize the size transformation relationship between the display window and the page data. Then, according to the process of adjusting the size of the elements in the page data based on the second adjustment parameter in the above embodiment, the size of the elements can be adjusted according to the size parameter.

In some embodiments, the size of elements in the page data can be adjusted based on size parameters in two ways. One of the ways is that when a size adjustment operation is detected, the size of the elements in the adjusted page data displayed in the display window before the adjustment can be adjusted according to the size change of the visible area of the display window before and after the adjustment.

Specifically, a first size of the visible area of the display window before adjustment and a second size of the display window after the size adjustment operation can be determined, and a size parameter can be determined based on the first size and the second size. Then, the size of the element included in the adjusted page data can be adaptively adjusted based on the size parameter.

In this method, in step S102, when the instance of displaying page data displays the adjusted page data on the display window, it can save the first size of the visible area of the display window, and the first size can include the size in the width direction and the size in the height direction of the visible area of the display window; then, in response to the above-mentioned size adjustment operation, the second size of the visible area of the display window after adjustment can be obtained through the innerWidth and innerHeight properties of the window object, and the second size can also include the size in the width direction and the size in the height direction of the visible area of the display window, and the second size is passed to the instance of displaying page data.

Thus, the instance of displaying page data can determine the size change of the display window before and after adjustment based on the first size and the second size. Based on this size change, the size of the elements in the adjusted page data can be adjusted directly on the basis of the adjusted page data, without the need to adjust the original size. When this method is adopted, the size of the element in the page data is adjusted in step 101, and the adjusted page data is saved.

Specifically, the ratio between the dimension in the width direction and the dimension in the height direction in the first size can be taken as the ratio before adjustment, and then the ratio between the dimension in the width direction and the dimension in the height direction in the second size is determined, and this ratio can be called the ratio after adjustment; based on the size relationship between the ratio before adjustment and the ratio after adjustment, the change in the height direction and the change in the width direction of the visible area of the display window are determined.

In this method, the measurement unit of the first size and the second size can be a length unit. Specifically, if it is determined that only the height direction has changed according to the ratio before and after the adjustment, the size of the element in the height direction of the adjusted page data can be scaled according to the ratio before and after the change in the height direction. For example, the width of the visible area of the display window remains unchanged, and the height changes from the original 12cm to 10cm, then the ratio is 10/12=0.83, and the size of the element in the height direction can be scaled according to 0.83.

Similarly, if it is determined that the change occurs only in the width direction, the size of the element in the adjusted page data in the width direction may be scaled according to the ratio before and after the change in the width direction.

Of course, if it is determined that changes have occurred in both the width and height directions, the ratio before and after the change in the height direction and the ratio before and after the change in the width direction can be determined. Then, the size of the element in the height direction is scaled according to the ratio before and after the change in the height direction, and the size of the element in the width direction is scaled according to the ratio before and after the change in the width direction.

Thus, after the size change, the adaptively adjusted page data can be displayed in the visible area of the changed display window. Because the elements of the page data are resized to adapt to the change of the visible area of the display window, all elements in the page data are still located in the visible area of the changed display window.

Specifically, in an exemplary implementation of this embodiment, the instance of the display page data may be run in the display device, and when the instance of the display page data displays the adjusted page data on the display window, the first size of the visible area of the display window and the adjusted page data may be saved, such as saving the first size and the adjusted page data in the local of the display device;

Next, when the monitoring interface monitors that the size of the visible area of the display window changes, the innerWidth and innerHeight properties of the window object can be indicated to obtain the second size of the visible area of the display window after adjustment, and the second size is passed to the instance of displaying the page data;

A ratio conversion algorithm in an instance of displaying page data determines a size parameter based on a first size and a second size;

The size parameter is passed to the scale method in the instance that displays the page data. The method uses "div.style.transform = `scale(${scale.width},${scale.height})" to map to the adjusted page data stored locally, so that each element in the adjusted page data is scaled according to the size parameter.

Of course, in this implementation, an instance of the display page data can also run in the cloud, and the first size and the adjusted page data can also be saved in the cloud and correspond to the display device, so that when the second size is obtained after the visible area of the display window on the display device changes, the size of the elements in the adjusted page data can be adjusted in the cloud, and then the adaptively adjusted page data is fed back to the display device, so that the display device renders the adaptively adjusted page data into the display window.

When this method is used, the size of the elements in the adjusted page data before the change is adaptively adjusted directly according to the size change of the display window before and after the change, thereby simplifying the adjustment process and eliminating the need to adjust based on the original page data. Therefore, the speed of responding to changes in the display window can be improved.

Another method is: when a resizing operation is detected, a second size of the visible area of the display window after the resizing operation and a screen resolution of the display device where the display window is located are obtained; a preliminary ratio is determined based on the screen resolution and a preset resolution of the page data; and then, based on the preliminary ratio and the second size, the size of the elements included in the page data is adaptively adjusted.

In this manner, the second size may include the size of the visible area in the height direction and the size in the width direction. The initial ratio for preliminary adjustment of the page data may be determined according to the current resolution of the display device where the display window is located and the preset resolution of the page data. The initial ratio may include the scaling ratio in the height direction and the scaling ratio in the width direction. Specifically, the scaling ratio may be determined with reference to the process of step S5 above, which will not be described in detail here.

Among them, since the preliminary ratio refers to the ratio corresponding to when the page data is displayed on the display window when the display window is maximized, and since the size of the visible area of the display window is manually adjusted, after determining the preliminary ratio, the size of the element needs to be adjusted based on the second size of the visible area of the display window and the preliminary ratio.

Specifically, the size of the element in the page data may be preliminarily adjusted according to the preliminary ratio to obtain an adjusted element, wherein the adjusted element may be element A;

Next, the maximum size of the display window when it is maximized is determined, and the proportional relationship between the second size and the maximized size is determined. In this case, the proportional relationship between the second size and the maximized size can be regarded as the size change before and after the display window is adjusted in the above manner, that is, each size adjustment operation of the display window is regarded as its change relative to the maximized display window; thereby, it is possible to determine the size change in the height direction and the size change in the width direction of the visible area of the adjusted display window compared to the maximized size, thereby obtaining the change ratio in the height direction and the change ratio in the width direction.

Afterwards, the size of the element A is adjusted according to the change ratio in the height direction and the change ratio in the width direction, thereby obtaining the adjusted element A'. In this way, the element A' is adapted to the adjusted display window.

Specifically, in an exemplary implementation of this embodiment, the instance of displaying page data may be run in the cloud. When the instance of displaying page data displays the adjusted page data on the display window, the page data, the resolution of the display window, and the adjustment parameters used when obtaining the adjusted page data, that is, the second adjustment parameters mentioned above, may be saved. For example, the resolution and the second adjustment parameters may be saved locally in the display device.

Next, when the monitoring interface monitors that the size of the visible area of the display window changes, the innerWidth and innerHeight properties of the window object can be indicated to obtain the second size of the visible area of the display window after adjustment, and the second size is passed to the instance of displaying the page data;

The ratio conversion algorithm in the instance of displaying the page data determines the ratio relationship between the second size and the resolution based on the size between the second size and the saved resolution;

The instance of displaying page data may first pass the second adjustment parameter into the scale method, and the scale method uses "div.style.transform = `scale(${scale.width}, ${scale.height})" to map to the page data, so that each element in the page data is scaled according to the size parameter, and the adjusted page data is saved;

Next, the proportional conversion algorithm passes the proportional relationship between the second size and the resolution to the scale method. The scale method uses "div.style.transform = `scale(${scale.width},${scale.height})" to map the adjusted page data, so that each element in the adjusted page data is scaled according to the newly passed in proportional relationship.

Afterwards, the instance displaying the page data sends the adaptively adjusted page data to the display device, and the display device can display it on the front-end page.

When this implementation is adopted, there is no need to store the data after the last page data is adjusted, so that each time a size adjustment operation is responded to, the adjustment can be made based on the original page data, thereby reducing the storage requirements of the device.

The situation shown in Figure 4 is used for illustration. Specifically, Figure 4 shows the situation where the resolution of the display device where the display window is located changes. This resolution change causes the size of the visible area of the display window to change. Specifically, the display device can call a monitoring interface to monitor whether the resolution of the display device where the display window is located has changed. Accordingly, in response to the resolution change of the display device where the display window is located, the changed target resolution can be obtained, and the size of the elements included in the page data can be adaptively adjusted based on the target resolution.

The resolution change may include the change of the resolution of the same display device, such as the resolution of a computer is adjusted from 1920×1080 to 1680×1050; it may also include the display window The situation of dragging from one display device to another, such as projecting the display window from display device A to display device B.

Specifically, in response to a drag operation of moving the display window from the first display screen to the second display screen, the resolution of the second display screen is used as the target resolution; and/or, in response to an adjustment operation of the resolution of the display device where the display window is located, the resolution after the adjustment operation is used as the target resolution;

The resolution of the first display screen is different from that of the second display screen; and/or the size of the first display screen is different from that of the second display screen.

In this example, the drag operation of moving the display window from the first display screen to the second display screen may mean that the user selects the display window and drags it. When dragging to the edge of the first display screen, the display window jumps to the second display screen and displays the page data on the second display screen. The resolution of the second display screen can be used as the target resolution, which can be adapted to the collaborative display scenario of multiple display screens.

In this example, the monitoring interface can be located in the web end, for example, bound to a browser, and can be used to detect whether the display window used by the same user has undergone display screen migration, that is, to monitor whether the display window is in the same display screen. If it is monitored that the display window has migrated between two display screens, the innerWidth and innerHeight properties of the window object on the display device where the migrated display screen (the second display screen) is located can be indicated to obtain the target resolution of the second display screen. At this time, the target resolution can be informed of the instance of the display page data located in the cloud, so that the cloud can adaptively adjust the elements of the page data based on the target resolution and send them to the second display screen for display.

Specifically, in a specific implementation of this embodiment, the first display screen and the second display screen can be two display screens connected to the same display device, such as a computer host connected to two display screens. In this case, the monitoring interface can also be located in the display device to monitor whether the display window has migrated between the two connected display screens. If migration occurs, the innerWidth and innerHeight properties of the window object on the display device can be indicated to obtain the target resolution of the second display screen, and then the display device or the instance of the display page data on the cloud is informed to adaptively adjust the elements of the page data based on the target resolution, and then display the adjusted page data on the second display screen.

In some cases, the user may adjust the resolution of the display device, such as adjusting the resolution of the computer from 1920×1080 to 1680×1050, then the size of the display area of the display screen changes. In this case, the size of the displayed elements will also change accordingly. In this case, the adjusted resolution of the computer can be used as the target resolution.

In one implementation of this embodiment, when adjusting the size of elements in page data based on the target resolution, a first adjustment parameter can be determined based on the target resolution and a preset resolution of the page data; then, based on the first adjustment parameter, the size of the elements included in the page data is adjusted.

The first adjustment parameter includes a scaling ratio in the height direction and a scaling ratio in the width direction. example.

In this embodiment, the first adjustment parameter may be similar to the second adjustment parameter. Specifically, the process of adjusting the size of the elements included in the page data according to the first adjustment parameter may refer to the above-mentioned process of adjusting the size of the elements included in the page data according to the second adjustment parameter, and will not be repeated here.

When this implementation is adopted, when the resolution of the display device where the display window is located changes, the size of the elements in the displayed page data can be adaptively changed accordingly, so that all elements in the page data are always located in the visible area of the display window before and after the resolution changes; when the display window jumps from one display device to another display device, the size of the elements in the displayed page data can be adapted to the resolution of the other display device, so that all elements in the page data are always located in the visible area of the display window before and after the display device changes.

Specifically, since the size of the element of the page data is adjusted based on the size of the display window before and after the change, from a visualization perspective, the size of the same element in the page data in the display window before the change and the size in the display window after the change have a first ratio; the visible area of the first display window and the visible area of the second display window have a second ratio;

The first ratio is linearly correlated with the second ratio. Specifically, the linear correlation may mean that the first ratio is the same as the second ratio.

Hereinafter, an example of the above embodiment is given, as shown in FIG. 9 . As shown in FIG. 9 , in addition to steps S1-S7 shown in FIG. 6 , the following process may be included:

First, you need to add a resize event to the browser window object. The resize event is the monitoring interface mentioned above, which monitors the size changes of the visible area of the display window, which specifically includes monitoring the size adjustment operation of the display window and the resolution change of the display device where the display window is located.

S8: After rendering the scaled page data view to the display window as described in S7, a timer can be started to create a macro task, that is, to activate a resize event. When the resize event is activated, the innerWidth and innerHeight properties of the window object are notified, and the height and width of the display window before the change are recorded as (W1, H1); the (W1, H1) can be saved locally on the display device, or (W1, H1) can be fed back to the cloud through the connection between the display device and the cloud;

S9: After the resize event detects that the resolution of the display device where the display window is located has changed, it will notify the innerWidth and innerHeight properties of the window object, obtain the changed target resolution, and transmit the target resolution to the instance of the display page data located in the background of the display device, or transmit the target resolution to the cloud through the connection between the display device and the cloud, so that the instance of the display page data in the cloud can obtain this target resolution.

Next, the example of displaying the page data repeats the above steps S5-S7 to The size of the element is adaptively changed, as shown in FIG4 , and the page data after the size change is displayed in the changed display window, obtaining the display effect shown in FIG4 .

S10: When the resize event monitors that the display window has been resized, for example, if the user reduces the width of the display window, the innerWidth and innerHeight properties of the window object are notified to obtain the size of the display window after the width is reduced, including the size in the length direction and the size in the height direction, which is recorded as (W2, H2); and (W2, H2) is transmitted to the instance of the display page data located in the background of the display device, or (W2, H2) is transmitted to the cloud through the connection between the display device and the cloud, so that the instance of the display page data in the cloud obtains (W2, H2);

Next, the example of displaying the page data calculates the size parameters between (W1, H1) and (W2, H2), and adjusts the sizes of the elements in the pre-saved adjusted page data, i.e., the page data obtained in step S6, according to the size parameters. The page data after the size adjustment is displayed in the changed display window, and the display effect shown in Figure 8 is obtained.

S11: Go back to step S8 and activate the resize event, so that the resize event continues to monitor the size changes of the visible area of the display window. In this way, each size change of the display window can be monitored and quickly responded to, and the size of the elements in the page data can be adaptively adjusted, thereby ensuring that each view response is applied to the changes in the display window one by one.

Since the present disclosure adjusts the elements in the page data based on the ratio between the size of the visible area of the display window and the preset resolution corresponding to the page data, the calculation of the ratio can be performed by a ratio conversion algorithm. Specifically, when the instance displaying the page data is located locally on the display device, it can quickly respond to the size change of the visible area of the front display window. This is because the path for monitoring the size change of the visible area and informing the instance displaying the page data is shortened and does not rely on network communication. Therefore, the response time can be shortened, thereby achieving the purpose of the page data quickly responding to the size change of the visible area.

Among them, when the instance displaying page data is located in the cloud, the size change of the visible area of the front display window can be notified to the cloud by the display device. Since the cloud has more powerful hardware resources than the display device, for page data with more elements, adaptive adjustment of the page data in the cloud can improve the adjustment efficiency, thereby avoiding the problem of long response time caused by insufficient computing power resources on the display device side.

Of course, in some embodiments, instances of displaying page data may be deployed on both the display device side and the cloud side. When adaptively adjusting the page data based on the visible area, it may be determined whether to perform adaptive adjustment on the display device or on the cloud side according to the data volume of the page data. For example, when the data volume of the page data is greater than or equal to the preset data volume, the display device may inform the cloud side of the size of the visible area, and the cloud side may perform adaptive adjustment; when the data volume of the page data is less than the preset data volume, the display device may perform adaptive adjustment on the elements in the page data locally according to the size of the visible area.

When this embodiment is adopted, the amount of page data can be notified to the display device by the cloud in advance. If the display device side triggers a display request for the page data, the cloud determines the page data to be displayed and the amount of the page data based on the display request. Then, the amount of the page data can be notified to the display device first, and the display device decides whether to perform adaptive adjustment locally or in the cloud based on the amount of the notified page data. If the display device decides to perform adaptive adjustment locally, the cloud will send the page data to the display device; if the display device decides to inform the cloud to perform adaptive adjustment, the display device needs to inform the cloud of the size of the visible area of the display window, and the cloud will adjust the page data according to the size before sending it to the display device.

By adopting the solution of this embodiment, when the page data is adaptively adjusted, the performance of the display device can be adapted to achieve the optimal response efficiency.

Based on the same inventive concept, the present disclosure also provides a display system with an adaptive visual area, as shown in FIG10 , which shows a schematic diagram of the framework structure of the display system. As shown in FIG10 , it can specifically include a content provider and a display module, wherein the content provider is used to provide page data, and the display module is used to execute the above-mentioned display method.

Among them, the content provider is mainly used to support the data and business logic of the application. Its main function is to support the view in the application, provide page data for the view, and respond to the operations in the page in a timely manner. That is, the operation data of the user performing operations on the controls in the page can be fed back to the content provider. The content provider provides the corresponding page data based on the operation data, and hands it over to the display module to render the page data in the display window.

As shown in Figure 10, the display module can be adapted to various types of display devices, such as mobile display devices, including mobile phones and tablets, and APP (Application, mobile software) installed on the mobile terminal. And display devices with web terminals installed, such as high-definition screens, 4K screens; and large screens with web segments installed, such as spliced screens and 8K screens.

The display module in this embodiment may refer to an instance of the above-mentioned display page data, and the display module may be located in a display device or in the cloud.

In some embodiments, the display module may include a response unit and a view unit; wherein:

The response unit is used to determine a second adjustment parameter for adjusting an element in the page data based on a current resolution of a display device where the display window is located and a preset resolution of the page data;

The view unit is used to adjust the size of the element included in the page data based on the second adjustment parameter transmitted by the response unit.

Referring to FIG. 11 , another schematic diagram of the framework structure of the display system is shown. As shown in FIG. 11 , the response unit is located between the view unit and the content provider, and acts as a communication bridge between the view unit and the content provider.

Specifically, the response unit in this embodiment can be the unit where the above-mentioned scale conversion algorithm and scale method are located, and the view unit can be called a view unit, which can be used to monitor operations on page data, that is, to monitor operations within the display window, and to perform the operations described in the above-mentioned transform attribute, such as calling the transform attribute, that is, using "div.style.transform = `scale(${scale.width},${scale.height})" to map to the original page data, so that each element in the original page data is scaled.

The response unit is used to provide the second adjustment parameter to the view unit and input the user's operation data to the content provider. Specifically, in this embodiment, it is mainly used to determine the second adjustment parameter for adjusting the elements in the page data based on the window parameters of the display window to display the page data and the preset resolution of the page data, and then pass the second adjustment parameter to the view unit.

The view unit is used to process the view layer, that is, to define the structure of the user interface. In this embodiment, it is mainly used to adjust the size of the element in the page data based on the second adjustment parameter transmitted by the response unit and then render it into the page, so as to become a view that the user can see. Specifically, the process of adjusting the size of the element in the page data based on the second adjustment parameter can refer to the process described in the embodiment of the above display method, and will not be repeated here.

Specifically, the process can be:

The view unit monitors the operations performed on the controls in the page through DOM events. If it monitors that an operation is performed on a certain control, it means that a new page needs to be entered and the page data on the new page needs to be displayed. Then, the operation data of the operation can be fed back to the response unit. The response unit feeds back the operation data to the content provider. The content provider provides corresponding page data based on the operation data.

The response unit obtains the innerWidth and innerHeight properties of the browser window object to read the width and height of the current window, and determines the second adjustment parameter according to the preset resolution provided in the page data, and uses the second adjustment parameter as the x parameter and y parameter in the Scale method; then the Scale method is used to call the transform property of the view unit; for example, "div.style.transform = `scale(${scale.width},${scale.height})" is used to map to transform;

The view unit scales the size of the elements in the page data based on the mapping performed by the Scale method in the response unit according to the second adjustment parameter, and displays the adjusted page data in the display window.

With the display system in this embodiment, the response unit can realize content distribution between the web front end and the server. Such an architecture can make the display system easier to maintain and test, because only the program of the response unit can be changed to automatically reflect the change in the page view provided by the view unit, which is convenient for testing and maintenance of the display method. In addition, the content provider and the view unit can be decoupled, and the two are not connected, thereby ensuring their independence, so that they can be maintained separately.

Accordingly, in some embodiments, the display system may further include a monitoring unit, configured to monitor changes in the display window, and trigger the display module to perform an adaptive adjustment operation when changes in the display window are monitored;

The adaptive adjustment operation includes: adaptively adjusting the size of the elements included in the page data, and displaying the adaptively adjusted page data in the changed display window;

The changes include changes in the size of the visible area of the display window and changes in the display resolution.

As shown in FIG. 11 , the monitoring unit may monitor changes in the visible area of the display window, and upon detecting changes, the response unit may adaptively adjust the size of elements in the page data according to the size of the changed visible area.

In response, the display module can also be used to instruct the monitoring unit to monitor the changes in the display window again after performing the adaptive adjustment operation, and trigger the display module to perform the adaptive adjustment operation when the changes in the display window are monitored; or, monitor the changes in the display window again after a preset time after the monitoring unit triggers the display module to perform the adaptive adjustment operation, and trigger the display module to perform the adaptive adjustment operation when the changes in the display window are monitored.

In some embodiments, the response unit can be located in the web front end or server, the view unit can also be located in the web front end or server, and the monitoring unit can be located in the web front end. That is, the response unit and the view unit in this embodiment can be located in the display device and the cloud, respectively.

For example, the response unit in the display module may be located in the cloud, and the view unit may be located in the display device; or the response unit of the display module may be located in the display device, and the view unit may be located in the cloud; or both may be located in the display device or both may be located in the cloud.

Alternatively, as described in the above embodiments, a response unit, a monitoring unit and a view unit are included on both the cloud side and the display device side; and according to the performance of the display device, when adaptively adjusting the elements of the page data, adjustments can be made on the cloud side or on the display device side to improve response efficiency.

In this embodiment, the adaptive adjustment process may refer to the adjustment process related to FIG. 7 , which will not be described in detail here.

In this embodiment, after performing adaptive adjustment, the display module may instruct the monitoring unit to start monitoring changes in the display window, and when changes in the display window are monitored, the display module is triggered to perform the adaptive adjustment operation;

Alternatively, the monitoring unit may start a countdown of a preset duration when triggering the display module to perform an adaptive adjustment operation, and when the countdown is reached, monitor the changes in the display window again, and when monitoring the changes in the display window, trigger the display module to perform an adaptive adjustment operation.

The display system and display method disclosed in the present invention have the following advantages:

First, because all elements of the page data are located in the visible area of the display window, Users can see the entire content of the page data in the visible area of the display window without having to drag the scroll bar to browse. This simplifies user operations and further improves the user's browsing experience of web pages. Especially when applied to 4K large screens, spliced screens and other displays, it can simplify control operations and optimize the browsing experience.

Second, it is possible to monitor each size change of the display window and quickly respond to the size change of the display window, and adaptively adjust the size of the elements in the page data, thereby ensuring that each view response is applied one by one to the change of the display window. In this way, when the visible area of the display window changes in size, the size of the elements in the page data changes adaptively, so that each time the size of the visible area of the display window changes, all elements in the page data are located in the visible area.

Third, since the size of the elements is adjusted according to the resolution of the display device and the preset resolution of the page data, all calculations are based on px units, and there is no need to convert px into other relative units. This can reduce the mental burden of developers, that is, reduce the workload in the development process, thereby improving development efficiency and saving development time.

Fourth, since it is based on the relative size relationship between the screen resolution and the preset resolution, the size of the element is adjusted according to this relative size relationship, so that the overall view of the page is fine-grainedly adjusted starting from the size of the element, thereby breaking through the bottleneck limit of 12px and allowing the browser to display elements smaller than 12px, thereby broadening the page display function.

The present disclosure also provides a display device with an adaptive visible area, as shown in FIG12 , which shows a schematic diagram of the structure of the display device. As shown in FIG12 , the display device may specifically include the following modules:

An adjustment module, configured to adjust the size of the elements included in the page data based on the size of the visible area in the display window in response to a display trigger of the page data; wherein the display window is used to display the page data;

A display module, used for displaying the adjusted page data in the display window;

Wherein, all elements in the page data are located in the visible area of the display window.

Optionally, the device further comprises:

an adaptive adjustment module, configured to adaptively adjust the size of the elements included in the page data in response to a size change of the display window;

The display module is further used to display the adaptively adjusted page data in the changed display window, wherein all elements in the page data are located in the visible area of the changed display window.

Optionally, the adaptive adjustment module includes at least one of the following:

a first adjustment unit, configured to, in response to a size adjustment operation performed on the display window, obtain a size parameter of the display window after the size adjustment, and adaptively adjust the size of the element included in the page data based on the size parameter;

The second adjustment unit is used to obtain a changed target resolution in response to a change in the resolution of the display device where the display window is located, and adaptively adjust the size of the element included in the page data based on the target resolution.

Optionally, the first adjustment unit is specifically configured to, in response to a drag operation of moving the display window from the first display screen to the second display screen, use a resolution of the second display screen as the target resolution;

and/or, in response to an adjustment operation on the resolution of the display device where the display window is located, using the resolution after the adjustment operation as the target resolution;

The resolution of the first display screen is different from that of the second display screen; and/or the size of the first display screen is different from that of the second display screen.

Optionally, the first adjustment unit includes:

A first parameter determination unit, configured to determine a first adjustment parameter based on the target resolution and a preset resolution of the page data; wherein the first adjustment parameter includes a scaling ratio in a height direction and a scaling ratio in a width direction;

The third adjustment unit is used to adjust the size of the element included in the page data based on the first adjustment parameter.

Optionally, the first adjustment unit includes:

a size determination subunit, configured to determine a first size of a visible area of the display window before the size adjustment operation, and a second size of the display window after the size adjustment operation;

a parameter determination subunit, configured to determine the size parameter based on the first size and the second size;

The adjusting subunit is used to adaptively adjust the size of the elements included in the adjusted page data based on the size parameter.

Optionally, the first adjustment unit includes:

A resolution acquisition subunit, used to acquire a first size of a visible area of the display window after the size adjustment operation, and a current resolution of a display device where the display window is located;

a ratio determination subunit, configured to determine a preliminary ratio based on the current resolution and a preset resolution of the page data;

The size adjustment subunit is used to adaptively adjust the size of the element included in the page data based on the preliminary ratio and the first size.

Optionally, a size of the same element in the page data in the display window before the change and a size of the same element in the display window after the change have a first ratio;

A second ratio exists between the visible area of the first display window and the visible area of the second display window;

The first ratio is linearly correlated with the second ratio.

Optionally, the adaptive adjustment includes: adjusting the size of the element in a first direction; and/or adjusting the size of the element in a second direction; wherein the first direction is a height direction or a width direction of the display window, and the first direction is perpendicular to the second direction.

Optionally, the adjustment module includes:

A resolution acquisition unit, configured to acquire a current resolution of a display device where the display window is located in response to a display trigger of the page data;

The adjusting unit is used to adjust the size of the elements included in the page data based on the current resolution and the preset resolution of the page data.

Optionally, the adjustment unit is specifically configured to perform the following steps:

Based on the preset resolution, determining a first size ratio of the page data;

Based on the current resolution, determining a second size ratio of the display window;

Determining a second adjustment parameter based on the first size ratio and the second size ratio; wherein the second adjustment parameter includes a scaling ratio in a height direction and a scaling ratio in a width direction;

Based on the second adjustment parameter, the size of the element included in the page data is adjusted.

Optionally, the display window includes a plurality of sub-display areas, and different sub-display areas are located in different display devices; the adjustment unit is specifically configured to perform the following steps:

In response to a display trigger of the page data, determining a window resolution of the display window based on screen resolutions corresponding to each of the plurality of display devices;

Based on the window resolution and a preset resolution of the page data, the size of the element in the page data is adjusted.

Optionally, adjusting the size of the elements included in the page data includes: scaling each element included in the page data.

The disclosed embodiment also provides an electronic device, the computer program stored in the electronic device enables the processor to execute the display method of the adaptive visible area as described in the disclosed embodiment. Specifically, the electronic device may refer to an electronic device with a display function, thereby enabling the electronic device to adaptively adjust the size of the elements in the page data according to the visible area of the display window, and can respond to the change in the size of the visible area and also adaptively adjust the size of the elements according to the change.

The embodiment of the present disclosure further provides a computer-readable storage medium, which stores a computer program that enables a processor to execute the display method of the adaptive visible area as described in the embodiment of the present disclosure.

Specifically, the computer-readable storage medium may be located in the electronic device, or may be located in the cloud, thereby enabling the electronic device or the cloud to adjust the page number according to the visible area of the display window. The size of the elements in the data is adaptively adjusted, and the size of the elements can be adaptively adjusted according to the change in the size of the visible area.

The various embodiments in this specification are described in a progressive manner, and each embodiment focuses on the differences from other embodiments. The same or similar parts between the various embodiments can be referenced to each other.

Finally, it should be noted that, in this article, relational terms such as first and second, etc. are only used to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Moreover, the terms "include", "comprise" or any other variants thereof are intended to cover non-exclusive inclusion, so that a process, method, commodity or device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, commodity or device. In the absence of further restrictions, the elements defined by the sentence "comprise a ..." do not exclude the existence of other identical elements in the process, method, commodity or device including the elements.

The above is a detailed introduction to the display method, device, system and medium of an adaptive visible area provided by the present disclosure. Specific examples are used in this article to illustrate the principles and implementation methods of the present disclosure. The description of the above embodiments is only used to help understand the method of the present disclosure and its core idea. At the same time, for a person skilled in the art, according to the idea of the present disclosure, there will be changes in the specific implementation method and application scope. In summary, the content of this specification should not be understood as a limitation on the present disclosure.

Those skilled in the art will readily appreciate other embodiments of the present disclosure after considering the specification and practicing the invention disclosed herein. The present disclosure is intended to cover any variations, uses or adaptations of the present disclosure that follow the general principles of the present disclosure and include common knowledge or customary techniques in the art that are not disclosed in the present disclosure. The description and examples are to be considered exemplary only, and the true scope and spirit of the present disclosure are indicated by the following claims.

It should be understood that the present disclosure is not limited to the exact structures that have been described above and shown in the drawings, and that various modifications and changes may be made without departing from the scope thereof. The scope of the present disclosure is limited only by the appended claims.

References herein to "one embodiment," "embodiment," or "one or more embodiments" mean that a particular feature, structure, or characteristic described in conjunction with the embodiment is included in at least one embodiment of the present disclosure. In addition, please note that examples of the term "in one embodiment" do not necessarily all refer to the same embodiment.

In the description provided herein, numerous specific details are described. However, it is understood that embodiments of the present disclosure may be practiced without these specific details. In some instances, Well-known methods, structures and techniques have not been shown in detail in order not to obscure the understanding of this description.

In the claims, any reference signs placed between brackets shall not be construed as limiting the claims. The word "comprising" does not exclude the presence of elements or steps not listed in the claims. The word "a" or "an" preceding an element does not exclude the presence of a plurality of such elements. The present disclosure may be implemented by means of hardware comprising a number of different elements and by means of a suitably programmed computer. In a unit claim enumerating a number of means, several of these means may be embodied by the same item of hardware. The use of the words first, second, and third, etc. does not indicate any order. These words may be interpreted as names.

Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present disclosure, rather than to limit them. Although the present disclosure has been described in detail with reference to the aforementioned embodiments, those skilled in the art should understand that they can still modify the technical solutions described in the aforementioned embodiments, or make equivalent replacements for some of the technical features therein. However, these modifications or replacements do not deviate the essence of the corresponding technical solutions from the spirit and scope of the technical solutions of the embodiments of the present disclosure.

Claims (20)

A method for displaying an adaptive visual area, characterized in that the method comprises: In response to a display trigger of the page data, adjusting the size of the elements included in the page data based on the size of the visible area in the display window; wherein the display window is used to display the page data; Displaying the adjusted page data in the display window; Wherein, all elements in the page data are located in the visible area of the display window. The display method according to claim 1, characterized in that after displaying the adjusted page data in the display window, the method further comprises: In response to the size change of the display window, adaptively adjusting the size of the elements included in the page data; The adaptively adjusted page data is displayed in the changed display window, wherein all elements in the page data are located in the visible area of the changed display window. The display method according to claim 2, wherein the adaptively adjusting the size of the elements included in the page data in response to the size change of the display window comprises at least one of the following: In response to a size adjustment operation performed on the display window, acquiring size parameters of the display window after the size adjustment, and adaptively adjusting the size of the elements included in the page data based on the size parameters; In response to a change in the resolution of the display device where the display window is located, a changed target resolution is acquired, and sizes of elements included in the page data are adaptively adjusted based on the target resolution. The display method according to claim 3, characterized in that, in response to a change in the resolution of the display device where the display window is located, obtaining the changed target resolution comprises: In response to a drag operation of moving the display window from the first display screen to the second display screen, taking a resolution of the second display screen as the target resolution; and/or, in response to an adjustment operation on the resolution of the display device where the display window is located, using the resolution after the adjustment operation as the target resolution; The resolution of the first display screen is different from that of the second display screen; and/or the size of the first display screen is different from that of the second display screen. The display method according to claim 3, characterized in that the adaptively adjusting the size of the elements included in the page data based on the target resolution comprises: Determine a first adjustment parameter based on the target resolution and a preset resolution corresponding to the page data; wherein the first adjustment parameter includes a scaling ratio in a height direction and a scaling ratio in a width direction; Based on the first adjustment parameter, the size of the element included in the page data is adjusted. The display method according to claim 3, characterized in that, in response to the size adjustment operation performed on the display window, obtaining the size parameters of the display window after the size adjustment, and adaptively adjusting the size of the elements included in the page data based on the size parameters, comprises: Determining a first size of a visible area of the display window before the size adjustment operation, and a second size of the display window after the size adjustment operation; Determining the size parameter based on the first size and the second size; Based on the size parameter, the size of the element included in the adjusted page data is adaptively adjusted. The display method according to claim 3, characterized in that the acquiring the size parameters of the display window after the size adjustment and adaptively adjusting the size of the elements included in the page data based on the size parameters comprises: Acquire a second size of the visible area of the display window after the size adjustment operation, and a current resolution of the display device where the display window is located; Determining a preliminary ratio based on the current resolution and a preset resolution of the page data; Based on the preliminary ratio and the second size, the size of the element included in the page data is adaptively adjusted. The display method according to claim 2, characterized in that the size of the same element in the page data in the display window before the change and the size in the display window after the change have a first ratio; The visible area of the display window before the change and the visible area of the display window after the change There is a second ratio between them; The first ratio is linearly correlated with the second ratio. The display method according to claim 2 is characterized in that the adaptive adjustment includes: adjusting the size of the element in a first direction; and/or adjusting the size of the element in a second direction; wherein the first direction is the height direction or the width direction of the display window, and the first direction is perpendicular to the second direction. The display method according to claim 1, characterized in that, in response to the display trigger of the page data, adjusting the size of the elements included in the page data based on the size of the visible area of the display window, comprises: In response to a display trigger of the page data, obtaining a current resolution of the display device where the display window is located; Based on the current resolution and a preset resolution corresponding to the page data, sizes of elements included in the page data are adjusted. The display method according to claim 10, characterized in that the adjusting the size of the elements included in the page data based on the current resolution and the preset resolution corresponding to the page data comprises: Based on the preset resolution, determining a first size ratio of the page data; Based on the current resolution, determining a second size ratio of the display window; Determining a second adjustment parameter based on the first size ratio and the second size ratio; wherein the second adjustment parameter includes a scaling ratio in a height direction and a scaling ratio in a width direction; Based on the second adjustment parameter, the size of the element included in the page data is adjusted. The display method according to claim 10, wherein adjusting the size of the element included in the page data based on the second adjustment parameter comprises: Mapping the second adjustment parameter to a scaling function scale method as a scaling parameter in the scale method; Based on the scaling parameters in the scale method, the transform method is called to adjust the size of the elements included in the page data. The display method according to any one of claims 1 to 10, characterized in that the display window The interface comprises a plurality of sub-display areas, and different sub-display areas are located in different display devices; and the size of the elements included in the page data is adjusted based on the display window to display the page data, including: In response to a display trigger of the page data, determining a window resolution of the display window based on screen resolutions corresponding to each of the plurality of display devices; Based on the window resolution and a preset resolution of the page data, the size of the element in the page data is adjusted. The display method according to any one of claims 1-10 is characterized in that adjusting the size of the elements included in the page data comprises: scaling each element included in the page data. A display system with an adaptive visual area, characterized by comprising: Content provider, used to provide page data; A display module is used to execute the display method according to any one of claims 1 to 14 based on the page data. The display system according to claim 15, characterized in that the display module comprises a response unit and a view unit; wherein: The response unit is used to determine a second adjustment parameter for adjusting an element in the page data based on a current resolution of a display device where the display window is located and a preset resolution of the page data; The view unit is used to adjust the size of the element included in the page data based on the second adjustment parameter transmitted by the response unit. The display system according to claim 15, further comprising: A monitoring unit, used for monitoring changes of the display window, and triggering the display module to perform an adaptive adjustment operation when changes of the display window are monitored; The adaptive adjustment operation includes: adaptively adjusting the size of the elements included in the page data, and displaying the adaptively adjusted page data in the changed display window. The display system according to claim 17, characterized in that the display module is further used to instruct the monitoring unit to monitor the display again after performing the adaptive adjustment operation. When the display window is changed, the display module is triggered to perform an adaptive adjustment operation; or, After a preset time period after the monitoring unit triggers the display module to perform the adaptive adjustment operation, the display window changes are monitored again, and when the display window changes are monitored, the display module is triggered to perform the adaptive adjustment operation. A display device with adaptive visible area, characterized in that the method comprises: In response to a display trigger of the page data, adjusting the size of the elements included in the page data based on the size of the visible area in the display window; wherein the display window is used to display the page data; Displaying the adjusted page data in the display window; Wherein, all elements in the page data are located in the visible area of the display window. A computer-readable storage medium, characterized in that the computer program stored therein enables a processor to execute the display method of the adaptive visible area as described in any one of claims 1-14.