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

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 for adaptive visual area

[0001] This application claims priority to the Chinese patent application filed with the China 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 into this application. Technical Field

[0002] The present disclosure relates to the field of display technology, and in particular to a display method, device, system, and medium for adaptively viewing an area. Background Art

[0003] 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 browser on a mobile phone, 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.

[0004] Overview

[0005] The present disclosure provides a display method, device, system and medium for adaptive visual area.

[0006] In a first aspect, the present disclosure provides a method for displaying an adaptive visual area, the method comprising:

[0007] 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;

[0008] Displaying the adjusted page data in the display window;

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

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

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

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

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

[0014] 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 sizes of elements included in the page data based on the size parameters;

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

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

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

[0018] 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;

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

[0020] Optionally, adaptively adjusting the size of the elements included in the page data based on the target resolution includes:

[0021] 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;

[0022] Based on the first adjustment parameter, the size of the elements included in the page data is adjusted.

[0023] Optionally, in response to a size adjustment operation performed on the display window, obtaining size parameters of the resized display window, and adaptively adjusting sizes of elements included in the page data based on the size parameters includes:

[0024] determining a first size of a visible area of ​​the display window before the resizing operation and a second size of the display window after the resizing operation;

[0025] determining the size parameter based on the first size and the second size;

[0026] Based on the size parameter, the size of the elements included in the adjusted page data is adaptively adjusted.

[0027] 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:

[0028] Acquire a first 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;

[0029] determining a preliminary scale based on the current resolution and a preset resolution of the page data;

[0030] Based on the preliminary ratio and the first size, sizes of elements included in the page data are adaptively adjusted.

[0031] 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;

[0032] A second ratio exists between the visible area of ​​the first display window and the visible area of ​​the second display window;

[0033] The first ratio is linearly correlated with the second ratio.

[0034] 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 the height direction or width direction of the display window, and the first direction is perpendicular to the second direction.

[0035] 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:

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

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

[0038] Optionally, adjusting the size of the elements included in the page data based on the current resolution and a preset resolution of the page data includes:

[0039] Determining a first size ratio of the page data based on the preset resolution;

[0040] determining a second size ratio of the display window based on the current resolution;

[0041] 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;

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

[0043] 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:

[0044] 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;

[0045] The sizes of the elements in the page data are adjusted based on the window resolution and the preset resolution of the page data.

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

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

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

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

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

[0051] Content provider, used to provide page data;

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

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

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

[0055] The view unit is configured to adjust the size of the elements included in the page data based on the second adjustment parameter transmitted by the response unit.

[0056] Optionally, the display system further includes:

[0057] a monitoring unit, configured to monitor changes in the display window and, when changes in the display window are monitored, trigger the display module to perform an adaptive adjustment operation;

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

[0059] Optionally, the display module is further configured to, after performing the adaptive adjustment operation, instruct the monitoring unit to monitor changes in the display window again, and trigger the display module to perform the adaptive adjustment operation when changes in the display window are monitored;

[0060] or,

[0061] After a preset time period has passed since the monitoring unit triggered the display module to perform the adaptive adjustment operation, the display module is again monitored for changes in the display window, and when the display window is monitored for changes, the display module is triggered to perform the adaptive adjustment operation.

[0062] The display method proposed in the embodiment of the present disclosure adjusts the sizes 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 sizes 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 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, thereby simplifying the user's operation and further improving the user's browsing experience of the web page.

[0063] An embodiment of the present disclosure further discloses an electronic device, comprising: a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein when executed by the processor, the method for displaying an adaptive visual area as described above is implemented.

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

[0065] 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 in accordance with 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.

[0066] BRIEF DESCRIPTION OF THE DRAWINGS

[0067] 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 the description of the embodiments or related technologies. Obviously, the drawings described below are some embodiments of the present disclosure. For those skilled in the art, other drawings can be obtained based on these drawings without inventive efforts. It should be noted that the scales in the drawings are for illustration only and do not represent the actual scale.

[0068] FIG1 is a flowchart showing the steps of a method for displaying an adaptive visual area in an embodiment of the present disclosure;

[0069] FIG2 is a schematic diagram showing an application scenario of the method for displaying an adaptive visual area according to an embodiment of the present disclosure;

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

[0071] FIG4 is a schematic diagram showing a display interface of a computer at two resolutions according to an embodiment of the present disclosure;

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

[0073] FIG6 shows a schematic diagram of an exemplary process of a method for displaying an adaptive visual area in an embodiment of the present disclosure;

[0074] FIG7 shows a flowchart of a method for displaying an adaptive visual area according to an embodiment of the present disclosure;

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

[0076] FIG9 shows a flowchart of the steps of another method for displaying an adaptive visual area according to an embodiment of the present disclosure;

[0077] FIG10 shows another exemplary flowchart of a method for displaying an adaptive visual area according to an embodiment of the present disclosure;

[0078] FIG11 shows a schematic diagram of the framework structure of a display system with adaptive visual area according to an embodiment of the present disclosure;

[0079] FIG12 shows a schematic diagram of the framework structure of a display device with adaptive visual area according to an embodiment of the present disclosure.

[0080] Detailed description

[0081] To make the objectives, technical solutions, and advantages of the embodiments of the present disclosure more clear, the technical solutions in the embodiments of the present disclosure will be clearly and completely described below in conjunction with the accompanying drawings. Obviously, the described embodiments are only part of the embodiments of the present disclosure, not all of the embodiments. All other embodiments obtained by ordinary technicians in this field based on the embodiments of the present disclosure without making any creative efforts shall fall within the scope of protection of the present disclosure.

[0082] In related technologies, page data needs to be displayed on multiple different types of display devices. This 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, 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.

[0083] 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 step flow diagram of the display method of the adaptive visual area, Figure 2 shows an application scenario diagram of the display method of the adaptive visual area, and Figure 3 shows a display interface diagram in the related technology and a comparative 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, it can be applied to the front-end interface of a browser or application on a display device.

[0084] 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 the APP, including the APP adapted to the Android system and the APP adapted to the IOS system. If the display device is a computer, the application is the client located on the computer. Among them, whether it is the web front end or the front-end interface of various APP applications, the display method of the adaptive visual area disclosed in this disclosure can be applied.

[0085] As shown in FIG1 , the method for displaying an adaptive visual area of ​​the present disclosure may specifically include the following steps:

[0086] 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;

[0087] Wherein, the display window is used to display the page data.

[0088] Step 102: Display 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.

[0089] In this embodiment, the triggering of the display of page data can be performed on the display device, specifically, on a web front end or on the front end interface of various applications, wherein the web front end generally refers to the front end of a browser, and the front end interface of various applications refers to the front end interface of an APP or client installed on the display device. A browser is generally installed on the display device, through which a user can browse web pages, and various applications can be installed on the display device to provide corresponding services to the user, such as installing a social communication application to provide social services to the user, or installing a news application to push news content to the user.

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

[0091] Among them, the display trigger of page data may include the opening operation of the browser, the triggering operation of the control in the browser, the opening operation of the application (APP and client), and the triggering operation of the control in the application. Taking the browser (web side) as an example, opening the browser will generally enter the homepage of the web page, and the page data that needs to be displayed is the page data of the homepage of the web page. For example, when opening the IE browser, you 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 web page 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 web page corresponding to the result.

[0092] As shown in Figure 2, Figure 2 takes the APP on the mobile phone as an example. There are multiple APPs preset on the mobile phone. Opening one of the APP1 will enter the home page provided by APP1. For example, opening the NetEase News APP will enter the home page of NetEase News. If an entry in NetEase News is triggered, the news corresponding to the entry will be displayed.

[0093] 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 an operation that requires opening page data is monitored on the front-end page, such as the triggering operation of a certain control, the monitored operation and the control identifier targeted by the operation can be sent 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 one example, the display device can monitor the operations occurring on the front-end page through the web end (or APP client), and when an operation that requires opening page data is monitored on the front-end page, such as the triggering operation of a certain control, the page data corresponding to the triggered control can be obtained from the locally cached page data based on the monitored operation and the control identifier targeted by the operation.

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

[0095] 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 computers, 4K large screens, and web terminals and applications on 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.

[0096] Among them, as shown in Figure 2, for the web and APP applications on the mobile phone, the display window can 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 mobile phones that can change the size of the APP display window, the display window can also be located in part of the display area of ​​the mobile phone screen, and the visible area refers to the area enclosed by the four sides of the display window.

[0097] 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 sizes 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 in 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.

[0098] 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, regardless of its type, 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.

[0099] Among them, adjusting the size of the element may include adjusting the width of the element and / or adjusting 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 the size of the element in both the width and height directions may be adjusted at the same time.

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

[0101] 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, where 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.

[0102] Among them, 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.

[0103] 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 APP's homepage data are located within the mobile phone's display screen. In this way, there may be no scroll bar in the APP's user interaction interface, or there may be a scroll bar, but because all elements in the homepage data are already located within the mobile phone's display screen, the user can see all the data contained in the homepage on the display screen without sliding the scroll bar up and down or left and right. For pages with a lot of page data, this display method can help users quickly browse the content contained on the page.

[0104] 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 for 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 for 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 methods 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 the scroll bar 303 up and down 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 the scroll bar up and down.

[0105] It should be noted that for 4K large screens, users usually use gesture control to interactively control web pages. For example, when displaying page data in the manner of 301 on a 4K large screen, 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 gestures, and then start the corresponding control logic according to the recognized gestures, 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 multiple gestures to successfully slide the scroll bar up and down to complete the web page browsing. This process is very cumbersome and the success rate of controlling the page is not high. However, 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.

[0106] 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 having to drag the scroll bar to browse, thus simplifying the user's operation and further improving the user's browsing experience of the web page.

[0107] In some embodiments, when adjusting the size of elements in the page data based on the size of the visible area of ​​the display window, the size can be determined based on the current resolution of the display device where the display window is located. Specifically, in response to a display trigger for 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.

[0108] In this embodiment, the default state of the display window is generally maximized. As described above, when maximized, 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 a computer as the display device, the screen resolution of the computer is 1920x1080. The display resolution of the computer can be set to 1920x1080, or it can be set to a resolution smaller than 1920x1080, such as 1680×1050. If it is set to 1680×1050, its display area is smaller than that of 1920x1080. Referring to FIG4, a schematic diagram of the display interface of a computer at two resolutions is shown. As shown in FIG4, the resolution on the left is 1920x1080 and the resolution on the right is 1680×1050. 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 viewable area.

[0109] Among them, for page data, it can have a preset resolution, which can be the resolution agreed 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 referred to when designing the page data. For example, if the agreed preset resolution is 1920x1080, the size of the elements in the designed page data will be designed according to 1920x1080.

[0110] Among them, the size of the visible area of ​​the display window can be determined based on 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 adjusted based on the size relationship. The condition for the adjustment is that all elements in the page data can be located in the visible area.

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

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

[0113] Generally speaking, the resolution includes the size in the width direction and the size in the height direction, and 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, if the preset resolution is 1920x1080, the first size ratio is 1920 / 1080. Assuming the current resolution is 1680×1050, the second size ratio is 1680 / 1050.

[0114] 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 is transformed to which scale in the width and height directions respectively so as to adapt to the current resolution.

[0115] 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 adapts to each element in the page data.

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

[0117] In some embodiments, when the size of the elements 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 the scaling parameter in the scale method; and based on the scaling parameter in the scale method, the transform method is called to adjust the size of the elements included in the page data.

[0118] Specifically, when scaling an 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 "zooming in" and "zooming in"). The specific operations are as follows:

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

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

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

[0122] 3) scale(x,y): Scales the element horizontally and vertically (width and height at the same time);

[0123] Among them, scale(x,y) can accept two parameters to achieve simultaneous scaling of the element in the width and height directions. 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 element in the page data.

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

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

[0126] 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 into the proportional conversion algorithm to determine the first size ratio, and pass the target resolution of the feedback display window into 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.

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

[0128] 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 pixels (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. This simplifies the calculation process. In the case of simplifying the calculation process, compared with the related art, at least the following improvements are achieved:

[0129] Related technologies primarily use responsive unit conversion based on rem (rem) to adapt page data to the display screen. In the front-end, rem is a relative unit relative to pixels, using the root element's font size as a benchmark rather than a fixed pixel value. During the conversion process, various dimensions must be defined using units relative to the root element, rather than fixed pixel values. During development, it's necessary to use "rem" as a unit in CSS code and set the font size on the root element. Because "rem" is used as a unit, and display devices use pixels (px) as a unit, the code must be converted to the corresponding pixel size for display. Consequently, developers must constantly convert between rem and px during development, which places a significant mental burden and significant development workload on developers. Furthermore, browsers are limited to displaying sizes of 12px, and using rem doesn't overcome this bottleneck. Even if rem is converted to a value smaller than 12px, the browser still displays it at 12px. In reality, users may prefer 4px, but using rem doesn't achieve this. In other words, using rem doesn't make the browser display at 4px.

[0130] The above-mentioned method disclosed in the present invention, on the one hand, is based on the conversion of resolution, that is, the calculation is based on the px unit, and there is no need to convert px to other relative units. Therefore, 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, because 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 function of page display.

[0131] In actual situations, users will open browsing pages on multiple different display devices to browse page data. In this way, 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 of 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.

[0132] Accordingly, the display window includes multiple sub-display areas, and different sub-display areas are located in different display devices; when adjusting the size of the elements included in the page data based on the display window of the page data to be displayed, the window resolution of the display window can be determined based on the screen resolutions corresponding to each of the multiple display devices in response to the display trigger of the page data; 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.

[0133] Referring to Figure 5, a schematic diagram of the display method for a spliced ​​screen is shown. Because the display window is composed of the display areas of multiple display devices, each display device has its own corresponding screen resolution, which refers to the maximum resolution inherent in the display device. 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; the window resolution of the spliced ​​screen can be the resulting resolution of 3840x2160. Therefore, the size of each element in the page data can be adjusted based on the window resolution and the preset resolution.

[0134] Among them, 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 above-mentioned process of adjusting the size of the element in the page data according to the current resolution and the preset resolution, and will not be repeated here.

[0135] When adopting this implementation scheme, for the splicing screen, the splicing 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.

[0136] An example of the above embodiment is given below. Referring to FIG6 , a flowchart of the exemplary display method is shown. The Scale object shown in FIG6 is the Scale method in this example. Specifically, the display can be performed using the following process:

[0137] S1. When creating the UI design for a web page, determine a base resolution. For example, let's say the base resolution is 1920x1080 and the default scaling factor is 1 (width / height scaling). At this base resolution, the base ratio is approximately 1.77778 (1920 / 1080), which we'll call baseRatio. Of course, in addition to this base resolution, page data can also include other basic parameters.

[0138] S2, uploads the page data to the server to provide it to the web front end;

[0139] S3, monitoring the user's operations on the display device, and obtaining the page data of the web page when the user opens the web page;

[0140] S4. Obtain the size of the display window displaying the page data. If the display window is maximized, the size is the screen resolution of the display device. 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.

[0141] S5, the display device sends the obtained resolution of the display device to the instance displaying the page data. The scaling algorithm in the instance displaying the page data determines the size ratio of the element to be adjusted based on the obtained resolution and the preset resolution of the page data. The process is as follows:

[0142] Based on the current window's width and height, a ratio is calculated, called currentRatio. At this point, currentRatio is determined. The current aspect ratio, currentRatio, is then compared with the baseRatio. If currentRatio is greater than baseRatio, such as 2, the current terminal's display ratio is wider. The current width ratio to be scaled is the visible area's display height multiplied by the baseRatio, then divided by the base width (i.e., 1920). For scaled height, the baseRatio is calculated by multiplying the visible area's display height by the baseRatio and then dividing it by the baseWidth (i.e., 1920). The "×" here indicates multiplication. The height ratio does not require the baseRatio to be calculated; instead, the current display device's display height is divided by the baseHeight. Because the current runtime is scaling at a higher resolution, the width needs to be calculated using the baseRatio, while the height can be obtained directly from the window object: height ratio = visible area's height / baseHeight (1080).

[0143] 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).

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

[0145] 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 of the second adjustment parameter into the x and y parameters 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 mapping on the view, that is, div.style.transform = `scale(${scale.width},${scale.height})`, to scale each element in the page data.

[0146] S7: An instance of displaying the page data renders 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.

[0147] This example can be applied to various types of display devices, such as mobile phones, 4K screens, spliced ​​screens, computers, and MP4s. By simply embedding a program in the browser that converts the size ratio according to the resolution, the page data can be adaptively displayed in the display window. In other words, the view can be displayed in the most perfect proportion according to the display window.

[0148] In a further embodiment, after all elements of the page data are displayed in the visible area of ​​the display window, the page data can also 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 still 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 changing their size. For example, after the visible area is enlarged, all elements of the page data are located in the visible area and their size is increased accordingly to adapt to the current visible area. For another example, after the resolution of the display device is reduced, all elements of the page data are still located in the visible area after being reduced, and their size is adapted to the current resolution to obtain a clearer display effect. For another example, after the resolution of the display device is increased, all elements of the page data are still located in the visible area after being enlarged, and their size is adapted to the current resolution to obtain a clearer display effect.

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

[0150] Accordingly, referring to FIG7 , a flow chart of another display method is shown. As shown in FIG7 , after displaying the adjusted page data in the display window, changes in the display window may be monitored. When changes in the display window are detected, the following steps may be performed:

[0151] Step 201: adaptively adjusting the size of elements included in the page data in response to changes in the display window; wherein the changes include changes in the size of the visible area of ​​the display window and changes in the display resolution;

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

[0153] 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 Figure 8, the resolution of the display device where the display window is located remains unchanged, both are 1920×1080, but 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 changes; the other is that the screen resolution of the display device where the display window is located is adjusted. As shown in Figure 4, the display device where the display window is located is adjusted from high resolution (1920×1080) to low resolution (1680×1050), which also causes the size of the display window to change.

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

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

[0156] Specifically, the display device can call the monitoring interface built into the display device to monitor the size changes 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 attributes of the window object described above, to obtain the changed size of the visible area. Then, the innerWidth and innerHeight attributes of the window object can feed back the obtained size of the visible area to the instance of the display page data, so that the instance of the display page data can readjust the elements in the page data according to the process of the above steps S5-57.

[0157] In some embodiments, the process of adaptively adjusting the size of the elements in the page data based on the changed size of the visible area of ​​the display window can refer to the process of step S101 above.

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

[0159] 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 width direction of the display window, and the first direction is perpendicular to the second direction.

[0160] That is to say, for the display window before and after the change, the size of the elements 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 the size in both the first and second directions has changed. Specifically, it can be determined based on the change in 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, then the size of the element has changed in the width direction before and after the display window has changed, while the size in the height direction has not changed. For another example, if the visible area has changed in the height direction but not in the width direction, then the size of the element has changed in the height direction before and after the display window has changed, while the size in the width direction has not changed; if the visible area has changed in both the height and width directions, then the size of the element has changed in both the height and width directions before and after the display window has changed.

[0161] That is, 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.

[0162] Accordingly, as described above, there are two situations that cause the width and length of the display window to change. The following will first illustrate the situation shown in Figure 8. Specifically, Figure 8 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 has been adjusted. When the size adjustment operation is monitored, 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 parameters, 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.

[0163] Accordingly, in response to a size adjustment operation performed on the display window, size parameters of the resized display window may be acquired, and sizes of elements included in the page data may be adaptively adjusted based on the size parameters.

[0164] In this embodiment, the resizing operation may include extending or shortening the width of the display window. For example, if a user selects an edge of the display window with a mouse and drags the edge toward the outside of the display window, the width increases; if the user drags the edge toward the inside of the display window, the width decreases. Similarly, the resizing operation may include extending or shortening the height of the display window. Of course, in other embodiments, the resizing operation may be a predetermined operation, such as repeatedly double-clicking the left mouse button to reduce the display window to a certain size; and repeatedly clicking the left mouse button three times to expand the display window to a certain size.

[0165] In practice, the innerWidth and innerHeight properties of the window object can obtain the size of the display window after size adjustment, and then obtain the size parameters, 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 parameters.

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

[0167] 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 difference between the first size and the second size. Then, the size of the elements included in the adjusted page data can be adaptively adjusted based on the size parameter.

[0168] 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 adjusted visible area of ​​the display window 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.

[0169] Thus, the instance of the displayed 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 based on the adjusted page data, without adjusting the size of the elements in the original page data. When using this method, after adjusting the size of the elements in the page data in step 101, the adjusted page data can be saved.

[0170] Specifically, the ratio between the dimension in the width direction and the dimension in the height direction of the first size can be used as the ratio before adjustment. Then, the ratio between the dimension in the width direction and the dimension in the height direction of the second size is determined, and this ratio can be called the ratio after adjustment. According to 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.

[0171] In this method, the measurement units of the first dimension and the second dimension can be length units. Specifically, if it is determined based on the ratio before and after adjustment that the change only occurs in the height direction, then the height of the element in the adjusted page data can be scaled according to the ratio before and after the change in the height direction. For example, if the width of the visible area of ​​the display window remains unchanged, but the height changes from 12 cm to 10 cm, the ratio is 10 / 12 = 0.83, and the height of the element can be scaled according to 0.83.

[0172] 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 can be scaled according to the ratio before and after the change in the width direction.

[0173] 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, as well as the ratio before and after the change in the width direction, can be determined. Then, the size of the element in the height direction can be scaled according to the ratio before and after the change in the height direction, and the size of the element in the width direction can be scaled according to the ratio before and after the change in the width direction.

[0174] 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 in the visible area of ​​the display window, all elements in the page data remain within the visible area of ​​the changed display window.

[0175] Specifically, in an exemplary implementation of this embodiment, the instance of displaying page data may be run in a display device. When the instance of displaying page data displays the adjusted page data in a 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 a local file of the display device.

[0176] Next, when the monitoring interface detects that the size of the visible area of ​​the display window has changed, the innerWidth and innerHeight properties of the window object can be indicated to obtain the second size of the adjusted visible area of ​​the display window, and the second size is passed to the instance displaying the page data;

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

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

[0179] Of course, in this embodiment, 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.

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

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

[0182] In this method, the second size may include the height and width dimensions of the visible area. A preliminary ratio for preliminary adjustment of the page data may be determined based on the current resolution of the display device where the display window is located and the preset resolution of the page data. The preliminary ratio may include a height scaling ratio and a width scaling ratio. Specifically, the determination may be made with reference to the process of step S5 above, which will not be further described here.

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

[0184] 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;

[0185] Next, the maximum size of the display window when 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-mentioned manner. That is, each size adjustment operation of the display window is regarded as its change relative to the maximized display window; thereby, 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 can be determined, thereby obtaining the change ratio in the height direction and the change ratio in the width direction.

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

[0187] Specifically, in an exemplary implementation of this embodiment, the instance displaying the page data may be run in the cloud. When the instance displaying the 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, i.e., the second adjustment parameters mentioned above, may be saved. For example, the resolution and the second adjustment parameters may be saved locally on the display device.

[0188] Next, when the monitoring interface detects that the size of the visible area of ​​the display window has changed, the innerWidth and innerHeight properties of the window object can be indicated to obtain the second size of the adjusted visible area of ​​the display window, and the second size is passed to the instance displaying the page data;

[0189] The scaling algorithm in the instance of displaying the page data determines a proportional relationship between the second size and the resolution based on the size between the second size and the stored resolution;

[0190] The instance displaying the 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 it 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;

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

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

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

[0194] The situation shown in Figure 4 is used for illustration. Specifically, Figure 4 shows a change in the resolution of the display device where the display window is located. 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 change in the resolution of the display device where the display window is located, the display device can obtain the changed target resolution and adaptively adjust the size of the elements included in the page data based on the target resolution.

[0195] Among them, the change in resolution may include the change in resolution of the same display device, such as adjusting the computer resolution from 1920×1080 to 1680×1050; it may also include the situation where a display window is dragged from one display device to another, such as projecting a display window from display device A to display device B.

[0196] Specifically, in response to a drag operation of moving a display window from a first display screen to a 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 a display device where the display window is located, the resolution after the adjustment operation is used as the target resolution;

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

[0198] 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 it is dragged 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.

[0199] In this example, the monitoring interface can be located in the web end, for example, bound to the browser, which 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 to 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 it to the second display screen for display.

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

[0201] In some cases, the user may adjust the resolution of the display device. For example, if the computer resolution is adjusted from 1920×1080 to 1680×1050, the size of the display area of ​​the display will change. 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.

[0202] 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 the 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.

[0203] The first adjustment parameter includes a scaling ratio in a height direction and a scaling ratio in a width direction.

[0204] In this embodiment, the first adjustment parameter can 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 can 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.

[0205] When this embodiment 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.

[0206] Specifically, since the size of the elements 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; and the visible area of ​​the first display window and the visible area of ​​the second display window have a second ratio;

[0207] The first ratio and the second ratio are linearly correlated. Specifically, the linear correlation may mean that the first ratio and the second ratio are the same.

[0208] Hereinafter, an example of the above embodiment is given, as shown in FIG9 . As shown in FIG9 , in addition to steps S1 to S7 shown in FIG6 , the following process may be included:

[0209] 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, including monitoring the size adjustment operation of the display window and the resolution changes of the display device where the display window is located.

[0210] 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 fed back to the cloud through the connection between the display device and the cloud;

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

[0212] Next, the instance displaying the page data repeats the above steps S5-S7 to adaptively change the size of the elements in the page data, as shown in FIG4 , and displays the page data after the size change in the changed display window, obtaining the display effect shown in FIG4 .

[0213] 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);

[0214] Next, the size parameters between (W1, H1) and (W2, H2) are calculated for the instance of the display page data. According to the size parameters, the sizes of the elements in the pre-saved adjusted page data, i.e., the page data obtained in step S6, are adjusted. The size-adjusted page data is displayed in the changed display window, and the display effect shown in Figure 8 is obtained.

[0215] S11: Return 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 the size change of the display window, 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.

[0216] 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-end display window. This is because the path for monitoring the size change of the visible area to inform 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.

[0217] Among them, when the instance displaying page data is located in the cloud, the size change of the visible area of ​​the front-end 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.

[0218] Of course, in some embodiments, instances of displaying page data may be deployed on both the display device and the cloud. When adaptively adjusting the page data based on the visible area, the size of the page data may determine whether to perform the adaptive adjustment on the display device or on the cloud. For example, when the size of the page data is greater than or equal to a preset size, the display device may notify the cloud of the size of the visible area, and the cloud may perform the adaptive adjustment. When the size of the page data is less than the preset size, the display device may locally perform adaptive adjustment on the elements in the page data based on the size of the visible area.

[0219] 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 page data based on the display request. Then, the amount of 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 page data notified. 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.

[0220] By adopting the solution of this embodiment, when adaptively adjusting page data, the performance of the display device can be adapted, thereby achieving optimal response efficiency.

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

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

[0223] 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 APPs (Applications) installed on mobile devices. It can also be adapted to display devices with web terminals, such as HD screens and 4K screens; and large screens with web segments, such as spliced ​​screens and 8K screens.

[0224] The display module in this embodiment may refer to the above-mentioned instance of displaying page data. The display module may be located in a display device or in the cloud.

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

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

[0227] The view unit is configured to adjust the size of the elements included in the page data based on the second adjustment parameter transmitted by the response unit.

[0228] 11 , another schematic diagram of the framework structure of the display system is shown. As shown in FIG11 , 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.

[0229] 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, monitor operations within the display window, and 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.

[0230] The response unit is configured 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, the response unit is configured to determine the second adjustment parameter for adjusting 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 transmit the second adjustment parameter to the view unit.

[0231] 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 primarily used to adjust the size of elements in the page data based on the second adjustment parameter transmitted by the response unit, and then render them into the page, thereby forming a view visible to the user. Specifically, the process of adjusting the size of elements in the page data based on the second adjustment parameter can be referred to the process described in the embodiment of the display method above, and will not be repeated here.

[0232] Specifically, the process can be:

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

[0234] 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 a second adjustment parameter based on the preset resolution provided in the page data. This second adjustment parameter is used as the x parameter and y parameter in the Scale method; the Scale method is then 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;

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

[0236] Using the display system of this embodiment, the response unit can implement content distribution between the web front-end and the server. This architecture makes the display system easier to maintain and test. This is because changes can be automatically reflected in the page view provided by the view unit by simply changing the response unit program, facilitating testing and maintenance of this display method. It also decouples the content provider and the view unit, ensuring their independence and allowing for separate maintenance.

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

[0238] 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;

[0239] The changes include changes in the size of the visible area of ​​the display window and changes in the display resolution.

[0240] As shown in FIG11 , the monitoring unit can monitor changes in the visible area of ​​the display window, and when changes are detected, the response unit can adaptively adjust the size of elements in the page data according to the size of the changed visible area.

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

[0242] 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. In other words, the response unit and the view unit in this embodiment can be located in the display device and the cloud, respectively.

[0243] For example, the response unit in the display module can be located in the cloud, and the view unit can be located in the display device, or the response unit of the display module can be located in the display device, and the view unit can be located in the cloud, or both can be located in the display device or both can be located in the cloud.

[0244] Alternatively, as described in the above embodiment, 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.

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

[0246] 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 adaptive adjustment operations;

[0247] 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 trigger the display module to perform an adaptive adjustment operation when monitoring changes in the display window.

[0248] The display system and display method disclosed herein have the following advantages:

[0249] First, because all 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 having to drag the scroll bar to browse. This simplifies the user's operation and further improves the user's browsing experience of the web page. Especially when applied to 4K large screens, spliced ​​screens and other displays, it can simplify control operations and optimize the browsing experience.

[0250] Second, it can monitor every 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.

[0251] 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. There is no need to convert px into other relative units. Therefore, it can reduce the mental burden of developers, that is, reduce the workload in the development process, thereby improving development efficiency and saving development time.

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

[0253] The present disclosure further provides a display device with an adaptive visual area, as shown in FIG12 , which shows a schematic structural diagram of the display device. As shown in FIG12 , the display device may specifically include the following modules:

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

[0255] A display module, configured to display the adjusted page data in the display window;

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

[0257] Optionally, the device further comprises:

[0258] 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;

[0259] The display module is further configured to display the adaptively adjusted page data in a changed display window, wherein all elements in the page data are located in a visible area of ​​the changed display window.

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

[0261] a first adjusting unit, configured to, in response to a size adjustment operation performed on the display window, obtain size parameters of the display window after the size adjustment, and adaptively adjust the sizes of elements included in the page data based on the size parameters;

[0262] The second adjustment unit is configured 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 elements included in the page data based on the target resolution.

[0263] 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 the resolution of the second display screen as the target resolution;

[0264] 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;

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

[0266] Optionally, the first adjustment unit includes:

[0267] 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;

[0268] The third adjustment unit is configured to adjust the size of the elements included in the page data based on the first adjustment parameter.

[0269] Optionally, the first adjustment unit includes:

[0270] a size determining 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;

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

[0272] The adjusting subunit is configured to adaptively adjust the sizes of the elements included in the adjusted page data based on the size parameters.

[0273] Optionally, the first adjustment unit includes:

[0274] a resolution acquisition subunit, configured 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;

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

[0276] The size adjustment subunit is configured to adaptively adjust the size of the elements included in the page data based on the preliminary ratio and the first size.

[0277] 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;

[0278] A second ratio exists between the visible area of ​​the first display window and the visible area of ​​the second display window;

[0279] The first ratio is linearly correlated with the second ratio.

[0280] 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 the height direction or width direction of the display window, and the first direction is perpendicular to the second direction.

[0281] Optionally, the adjustment module includes:

[0282] a resolution acquiring unit, configured to acquire a current resolution of a display device where the display window is located in response to a display trigger of page data;

[0283] An adjusting unit is configured to adjust the size of the elements included in the page data based on the current resolution and a preset resolution of the page data.

[0284] Optionally, the adjusting unit is specifically configured to perform the following steps:

[0285] Determining a first size ratio of the page data based on the preset resolution;

[0286] determining a second size ratio of the display window based on the current resolution;

[0287] 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;

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

[0289] Optionally, the display window includes multiple 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:

[0290] 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;

[0291] The sizes of the elements in the page data are adjusted based on the window resolution and the preset resolution of the page data.

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

[0293] The present disclosure also provides an electronic device having a computer program stored therein that causes a processor to execute the method for displaying an adaptive visible area as described in the present disclosure. Specifically, the electronic device may be an electronic device with a display function, thereby enabling the electronic device to adaptively adjust the size of elements in page data according to the visible area of ​​a display window, and to adaptively adjust the size of elements in response to changes in the size of the visible area.

[0294] 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 visual area as described in the embodiment of the present disclosure.

[0295] Specifically, the computer-readable storage medium can be located in an electronic device or in the cloud, thereby enabling the electronic device or the cloud to adaptively adjust the size of elements in the page data according to the visible area of ​​the display window, and can respond to changes in the size of the visible area and adaptively adjust the size of the elements based on the changes.

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

[0297] Finally, it should be noted that, in this document, relational terms such as first and second, etc., are used only to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any actual relationship or order between these entities or operations. Moreover, the terms "comprises," "comprising," or any other variations thereof are intended to cover non-exclusive inclusion, so that a process, method, commodity, or device that includes a series of elements includes not only those elements, but also other elements not explicitly listed, or elements inherent to such process, method, commodity, or device. In the absence of further limitations, an element defined by the phrase "comprising a ..." does not exclude the presence of additional identical elements in the process, method, commodity, or device that includes the element.

[0298] The above is a detailed introduction to the display method, device, system and medium of an adaptive visual area provided by the present disclosure. Specific examples are used herein 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 and core ideas of the present disclosure. At the same time, for those skilled in the art, according to the ideas of the present disclosure, there will be changes in the specific implementation methods and application scopes. In summary, the content of this specification should not be understood as a limitation on the present disclosure.

[0299] Other embodiments of the present disclosure will readily occur to those skilled in the art after considering the specification and practicing the invention disclosed herein. This 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 not disclosed herein. The description and examples are to be considered as exemplary only, with the true scope and spirit of the present disclosure being indicated by the following claims.

[0300] 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 can be made without departing from the scope thereof. The scope of the present disclosure is limited only by the appended claims.

[0301] References herein to "one embodiment," "an embodiment," or "one or more embodiments" mean that a particular feature, structure, or characteristic described in connection with the embodiment is included in at least one embodiment of the present disclosure. Furthermore, please note that instances of the phrase "in one embodiment" do not necessarily all refer to the same embodiment.

[0302] 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 are not shown in detail so as not to obscure the understanding of this description.

[0303] In the claims, any reference signs placed between parentheses shall not be construed as limiting the claim. The word "comprising" does not exclude the presence of elements or steps not listed in the claim. 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 several different elements and by means of a suitably programmed computer. In a unit claim enumerating several 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.

[0304] 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 various embodiments of the present disclosure.

Claims

1. 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.

2. The display method according to claim 1, characterized in that: 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.

3. The display method according to claim 2, characterized in that: 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, a changed target resolution is acquired, and sizes of elements included in the page data are adaptively adjusted based on the target resolution.

4. The display method according to claim 3, characterized in that: In response to a change in the resolution of a display device where the display window is located, obtaining 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.

5. The display method according to claim 3, characterized in that: The adaptively adjusting the size of the element included in the page data based on the target resolution includes: 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.

6. The display method according to claim 3, characterized in that: The step of acquiring, in response to a size adjustment operation performed on the display window, a size parameter of the display window after the size adjustment, and adaptively adjusting the size of an 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.

7. 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 sizes of the elements included in the page data based on the size parameters, includes: 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.

8. The display method according to claim 2, characterized in that: There is a first ratio between the size of the same element in the page data in the display window before the change and the size of the same element in the display window after the change; 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.

9. The display method according to claim 2, 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.

10. The display method according to claim 1, characterized in that: In response to triggering the 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 corresponding to the page data, sizes of elements included in the page data are adjusted.

11. The display method according to claim 10, characterized in that: The adjusting the size of the element included in the page data based on the current resolution and the preset resolution corresponding to 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.

12. The display method according to claim 10, characterized in that: The 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.

13. The display method according to any one of claims 1 to 10, characterized in that: 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.

14. The display method according to any one of claims 1 to 10, characterized in that: Adjusting the size of the elements included in the page data includes: scaling each element included in the page data.

15. A display system with adaptive visual area, characterized in that: include; 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.

16. The display system according to claim 15, characterized in that: 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.

17. The display system according to claim 15, characterized in that: Also 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.

18. The display system according to claim 17, characterized in that: 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 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.

19. A display device with 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.

20. A computer-readable storage medium, characterized in that: The computer program stored therein enables the processor to execute the display method of the adaptive visible area as described in any one of claims 1-14.

Images