CN116909505A

CN116909505A - Display method, device, system and medium of self-adaptive visual area

Info

Publication number: CN116909505A
Application number: CN202310922858.2A
Authority: CN
Inventors: 曹宝童
Original assignee: BOE Technology Group Co Ltd; Chongqing BOE Smart Technology Co Ltd
Current assignee: BOE Technology Group Co Ltd; Chongqing BOE Smart Technology Co Ltd
Priority date: 2023-07-25
Filing date: 2023-07-25
Publication date: 2023-10-20

Abstract

The disclosure provides a display method, a device, a system and a medium for a self-adaptive visual area, which belong to the technical field of display and aim to improve a display effect, wherein the display method comprises the following steps: responding to display triggering of page data, and adjusting the sizes of elements included in the page data based on the sizes of visible areas in a display window; the display window is used for displaying the page data; displaying the adjusted page data in the display window; wherein all elements in the page data are located in a viewable area of the display window.

Description

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

Technical Field

The disclosure relates to the technical field of display, and in particular relates to a display method, device, system and medium for a self-adaptive visual area.

Background

With the development of display technologies, various types of display devices, such as mobile phones, computers, 4K large screens, etc., have appeared, wherein it is required to display page data on these different display devices, such as opening a browser of a mobile phone, and it is required to display page data in a window of the browser, and for example, when displaying page data with a 4K large screen, it is required to display page data in a browser window located on a large screen.

Disclosure of Invention

Based on the background technology, the disclosure provides a display method, a device, a system and a medium for a self-adaptive visual area.

In a first aspect of the present disclosure, there is provided a method for displaying an adaptive visual area, the method comprising:

responding to display triggering of page data, and adjusting the sizes of elements included in the page data based on a display window for displaying the page data;

displaying the adjusted page data in the display window;

wherein all elements in the page data are located in a viewable area of the display window.

Optionally, after the adjusted page data is displayed on the display window, the method further includes:

responding to the size change of the display window, and adaptively adjusting the size of the element included in the page data;

and displaying the adaptively adjusted page data into a changed display window, wherein all elements in the page data are positioned in a visible area of the changed display window.

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

Responding to the size adjustment operation executed on the display window, acquiring the size parameter of the display window after the size adjustment, and adaptively adjusting the size of the element included in the page data based on the size parameter;

and responding to the resolution change of the display equipment where the display window is positioned, acquiring the changed target resolution, and adaptively adjusting the size of the element included in the page data based on the target resolution.

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

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

and/or responding to the adjustment operation of the resolution of the display device where the display window is located, and taking the resolution after the adjustment operation as the target resolution;

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

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

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

and adjusting the size of the element included in the page data based on the first adjustment parameter.

Optionally, the responding to the resizing operation performed on the display window obtains a size parameter of the resized display window, and adaptively adjusts the size of the element included in the page data based on the size parameter, including:

determining a first size of a visual area of the display window before the resizing operation and a second size of the display window after the resizing operation;

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

and adaptively adjusting the size of the element included in the page data after adjustment based on the size parameter.

Optionally, the obtaining the size parameter of the resized display window, and adaptively adjusting the size of the element included in the page data based on the size parameter includes:

Acquiring a first size of a visual area of the display window after the size adjustment operation and a current resolution of display equipment where the display window is located;

determining a preliminary proportion based on the current resolution and a preset resolution of the page data;

and adaptively adjusting the sizes of elements included in the page data based on the preliminary proportion and the first size.

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

a second ratio is arranged between the visible area of the first display window and the visible area of the second display window;

wherein the first ratio is linearly related to the second ratio.

Optionally, the adapting includes: adjustment of the dimensions of the element in a first direction; and/or adjusting the dimension of the element in a second direction; 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.

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

Responding to the display trigger of the page data, and acquiring the current resolution of the display equipment where the display window is located;

and adjusting the size of the element included in the page data based on the current resolution and the preset resolution of the page data.

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

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

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

determining a second adjustment parameter based on the first dimension ratio and the second dimension ratio; wherein the second adjustment parameters include a scaling in a height direction and a scaling in a width direction;

and adjusting the size of the element included in the page data based on the second adjustment parameter.

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

Responding to display triggering of the page data, and determining window resolution of the display window based on screen resolutions corresponding to a plurality of display devices;

and adjusting the size of the element in the page data based on the window resolution and the preset resolution of the page data.

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

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

mapping the second adjustment parameter into a scaling function Scale method as a scaling parameter in the Scale method;

and calling a Transform method to adjust the size of the elements included in the page data based on the scaling parameters in the Scale method.

The present disclosure also provides a display system of an adaptive viewable area, comprising;

the content providing end is used for providing page data;

and the display module is used for executing the display method based on the page data.

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

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

and the view unit is used for adjusting the size of the element included in the page data based on the second adjustment parameter transmitted by the response unit.

Optionally, the display system further comprises:

the monitoring unit is used for monitoring the change of the display window and triggering the display module to execute adaptive adjustment operation when monitoring the change of the display window;

wherein the adapting operation comprises: and carrying out adaptive adjustment on the sizes of the elements included in the page data, and displaying the page data subjected to the adaptive adjustment in a changed display window.

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

or alternatively, the process may be performed,

monitoring the change of the display window again in a preset time period after the monitoring unit triggers the display module to execute the adaptive adjustment operation, and triggering the display module to execute the adaptive adjustment operation when monitoring the change of the display window

According to the display method provided by the embodiment of the disclosure, when the page data is required to be displayed in the display window, the sizes of the elements included in the page data are adjusted according to the display window, so that 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, the size of the page view of the display device is enabled to be matched with the display window, and all the elements of the page data after adjustment are located in the visible area of the display window; because all elements of the page data are positioned in the visible area of the display window, a user can see all contents of the page data in the visible area of the display window without dragging a scroll bar to browse, so that the operation of the user is simplified, and the browsing experience of the user on the webpage is further improved.

The embodiment of the disclosure also discloses an electronic device, which comprises: comprising a memory, a processor and a computer program stored on the memory and executable on the processor, which processor when executed implements the method of displaying an adaptive visual area as described.

In an embodiment of the disclosure, a computer readable storage medium is also disclosed, which stores a computer program for causing a processor to execute the display method of the adaptive visual area according to the disclosure.

Drawings

In order to more clearly illustrate the technical solutions of the embodiments of the present disclosure, the drawings that are needed in the description of the embodiments of the present disclosure will be briefly introduced below, and it is obvious that the drawings in the following description are only some embodiments of the present disclosure, and other drawings may be obtained according to these drawings without inventive effort to a person of ordinary skill in the art.

FIG. 1 is a flow chart illustrating steps of a method for displaying an adaptive visual area in an embodiment of the present disclosure;

fig. 2 is a schematic view of an application scenario of a display method of an adaptive visual area in an embodiment of the disclosure;

fig. 3 is a diagram showing a display interface in the related art and a comparative diagram of a display interface displayed by the display method of the present embodiment;

FIG. 4 is a schematic diagram of a display interface of a computer at two resolutions in an embodiment of the disclosure;

FIG. 5 is a schematic diagram of a display method in the case of a tiled screen in an embodiment of the present disclosure;

FIG. 6 illustrates an exemplary flow diagram of a method of displaying an adaptive visual area in an embodiment of the present disclosure;

FIG. 7 is a flowchart illustrating steps of a method for displaying an adaptive visual area in an embodiment of the present disclosure;

FIG. 8 illustrates a schematic diagram of a dimensional change of a viewable area of a display window in an embodiment of the disclosure;

FIG. 9 is a flowchart illustrating steps of a method for displaying an adaptive visual field according to yet another embodiment of the present disclosure;

FIG. 10 illustrates yet another exemplary flow chart of a method of displaying an adaptive visual area in an embodiment of the disclosure;

FIG. 11 is a schematic diagram of a frame structure of a display system with an adaptive viewable area according to an embodiment of the disclosure;

fig. 12 is a schematic diagram showing a frame structure of a display device of an adaptive viewing area in an embodiment of the present disclosure.

Detailed Description

In order that the above-recited objects, features and advantages of the present disclosure will become more apparent, a more particular description of embodiments of the disclosure will be rendered by reference to the appended drawings, which together with the appended drawings illustrate embodiments of the disclosure, wherein it is obvious that the described embodiments are some, but not all, of the embodiments of the disclosure. All other embodiments, which can be made by one of ordinary skill in the art without inventive effort, based on the embodiments in this disclosure are intended to be within the scope of this disclosure.

In the related art, it is required to display page data, also called web page data, on a plurality of different types of display devices, which is data displayed when a user opens a web page in a browser, and it is required that the web page data is adapted to the size of the different display devices, such as when the browser is opened on a mobile phone, because the different display devices are different in size and screen resolution, and the view layout of the displayed web page is adapted to the screen of the mobile phone.

In view of this, the present disclosure proposes a display method that may adapt page data to different display devices, specifically, referring to fig. 1, fig. 2, and fig. 3, fig. 1 shows a step flow diagram of the display method of the adaptive visual area, fig. 2 shows an application scenario diagram of the display method of the adaptive visual area, and fig. 3 shows a comparison diagram of a display interface diagram in the related art and a display interface displayed by using the display method; as shown in fig. 1, the present adaptive visual area display method may be applied to a display device, and in particular, may be applied to a browser or a front-end interface of an application on the display device.

The display equipment can comprise a mobile phone, a computer, a tablet, a 4K large screen, an MP4, an intelligent television and the like. Specifically, the method can be applied to a web front end or front end interfaces of various applications, wherein the web front end generally refers to the front end of a browser, the front end interfaces of various applications refer to the front end interfaces of an APP or a client installed on a display device, and if the display device is a mobile phone, the applications are APPs, including APPs adapting to an android system and APPs adapting to an IOS system. If the display device is a computer, the application is a client located on the computer. The display method of the self-adaptive visual area can be applied to both web front ends and front end interfaces of various APP applications.

As shown in fig. 1, the display method of the adaptive visual area of the present disclosure may specifically include the following steps:

step 101: responding to display triggering of page data, and adjusting the sizes of elements included in the page data based on the sizes of visible areas in a display window;

the display window is used for displaying the page data.

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

In this embodiment, the display triggering of the page data may be performed on the display device, specifically, may occur on a web front end or a front end interface of various applications, where the web front end generally refers to a front end of a browser, and the front end interface of various applications refers to a front end interface of an APP or a client installed on the display device. A browser is generally installed on the display device, a user can browse a webpage through the browser, various applications can be installed on the display device, corresponding services are provided for the user through the various applications, such as installation of social communication type applications, social services can be provided for the user, such as installation of news type applications, and news contents can be pushed for the user.

The web page of the browser may include, but is not limited to, an H5 page, and the like, where the H5 page refers to a web page 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 may be referred to as a web page in this disclosure, and data in the interface may be referred to as page data.

The display trigger of the page data may include an opening operation of a browser, a trigger operation of a control in the browser, an opening operation of an application (APP and a client), and a trigger operation of a control in the application. Taking a browser (web end) as an example, when the browser is opened, the page data to be displayed is the page data of the first page of the web page, for example, when the IE browser is opened, the page data of the first page is displayed in the first page, and the browser can enter the first page of the IE browser. The triggering operation, such as clicking or double clicking, of the control in the browser can enter a webpage where the control is located, and the webpage data to be displayed is data associated with the control, such as entering a first page of an IE browser, after a search word is input in a search field and clicking, a result searched for the search word is displayed, one of the results is selected, and a webpage corresponding to the result is entered.

As shown in fig. 2, an APP on a mobile phone is taken as an example, a plurality of APPs are preset on the mobile phone, and when one APP1 is opened to enter a top page provided by the APP1, if the networknews APP is opened, the APP can enter a top page of the networknews, and one term in the networknews is triggered, then the news corresponding to the term can be displayed.

In this embodiment, the display device may monitor, through the web side (or the APP client), an operation that occurs on the front-end page, and when an operation that needs to open page data is monitored on the front-end page, such as a trigger operation of a control, the operation may be sent to a cloud side connected to the web side (or the APP client) based on the monitored operation and a control identifier for which the operation is performed, and then the cloud side may feed back, to the display device, page data corresponding to the control identifier. Or in an example, the display device may monitor, through a web end (or an APP client), an operation that occurs on a front-end page, and when an operation that needs to open page data is monitored on the front-end page, such as a trigger operation of a control, page data corresponding to the triggered control may be obtained from locally cached page data based on the monitored operation and a control identifier for which the operation is directed.

In still another example, the display device may monitor, through the web side (or the APP client side), an operation that occurs on the front-end page, when an operation that needs to open page data is monitored on the front-end page, such as a triggering operation of a control, the display device may first search, based on the monitored operation and a control identifier targeted by the operation, page data corresponding to the triggered control from the locally cached page data, extract, if found, the corresponding page data from the local cache, and, if not found, send the control identifier to the cloud, and receive the page data fed back by the cloud.

When the display of the page data is triggered, the acquired page data needs to be displayed in a display window, and in this embodiment, the size of a visual area in the display window for displaying the page data may be determined, where the visual area refers to an area of the display window that can be visually observed, that is, an area reached by a user. In general, for computers, 4K large screens, web-ends on tiled screens, and applications, a display window can be maximized and minimized, and its size can be adjusted between maximized and minimized. Under the condition of maximization, the visible area generally refers to the whole display area of the computer, under the condition of minimization, the display window is invisible when entering the menu bar, and the user can also adjust the length and the 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 surrounded by four sides of the display window.

As shown in fig. 2, for the web end and APP application on the mobile phone, the display window may refer to the screen area 200 of the mobile phone, and then the visible area generally refers to the screen area 200 of the mobile phone; of course, for a mobile phone capable of changing the size of the display window of the APP, the display window may also be located in a part of the display area of the mobile phone screen, and the visible area refers to an area surrounded by four sides of the display window.

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

The elements in the page data may include text, icons, controls, and other elements, and of course, in some examples, besides text, icons, controls, the page data may also be embedded with a playing window for playing multimedia data, where corresponding multimedia content is played in the playing window. Specifically, any content that needs to be displayed on a page can be referred to as an element, regardless of the type of content. As shown in fig. 2, 3 and 4, a schematic diagram of page data 300 is shown, wherein horizontal line portions represent text, and icons such as pentagons, hexagons, pentagons, etc. represent elements such as icons, controls, etc. in the page data.

The adjustment of the size of the element may include adjustment of the width of the element and/or adjustment of the height of the element, and in particular, depending on the size of the visible region of the display window, only the size of the element in the width direction may be adjusted, or only the size of the element in the height direction may be adjusted, or both the size of the element in the width direction and the size of the element in the height direction may be adjusted.

It should be noted that the width direction is understood to be the width direction of the display screen of the electronic device, i.e., the lateral direction in fig. 2, 3 and 4; the height direction may be understood as the height direction of the display screen of the electronic device, i.e. the longitudinal direction in fig. 2, 3 and 4.

In one example, the display device needs to pass the size of the viewable area of the display window of the web side (or APP) in operation to the instance for displaying the page data, where the instance for displaying the page data may be operating on the display device or on the cloud. When the display device is operated, the example of the display page data can adjust the sizes of the elements in the acquired page data in the width direction and/or the height direction according to the size of the visible area, and then the adjusted elements are rendered into the display window according to the original layout; when the display device runs on the cloud, the size of the elements in the width direction and/or the height direction can be adjusted by the cloud according to the size of the visual area, and new page data are formed after the adjusted elements are combined according to the original view layout and are sent to the display device, so that the display device can render the received new page data into the display window.

The overall size of the view formed by the page data is adjusted by adjusting the size of each element, so that the view can be adapted to the size of the visual area of the display window, and all the elements of the page data can be located in the visual area of the display window.

Then, after the size of each element is adjusted, adjusted page data can be obtained, and then the adjusted page data can be displayed in a display window. As shown in fig. 2, when the APP is triggered on the mobile phone, all elements in the home page data of the APP are located in the display screen of the mobile phone, so that a scroll bar may not exist in the user interaction interface of the APP, or a scroll bar exists in the user interaction interface of the APP, but because all elements in the home page data are located in the display screen of the mobile phone, a user can see all data contained in the home page in the display screen, and the user does not need to slide the scroll bar up and down or slide the scroll bar left and right, so that for pages with more page data, the user can be helped to quickly browse contents contained in the page by adopting the display mode.

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

It should be noted that, for the 4K large screen, the user generally uses gesture control to perform interaction control on the web page, for example, when displaying page data on the 4K large screen in a manner of 301, if the user needs to slide the scroll bar up and down to browse the page data, the user needs to draw the gesture to select the scroll bar, and drag the scroll bar 303 up and down by the gesture, which requires a set of equipment and algorithm to identify the gesture of the user, and then starts corresponding control logic according to the identified gesture, and generates corresponding operation data according to the control logic to control the web page to slide up and down or switch pages, in general, the user needs to draw the gesture multiple times to slide the scroll bar up and down successfully to complete web browsing. By adopting the display method, as the whole content of the page data is already in the visible area, the user does not need to frequently make gesture to browse the data, thereby optimizing the browsing experience of the user.

When the embodiment is adopted, the sizes of the elements included in the page data are adjusted according to the sizes of the visible areas of the display window, so that the sizes of the page views formed by the elements in the page data are matched with the display window after the sizes of the elements in the page data are adjusted for different display devices, and all the elements of the page data after adjustment are positioned in the visible areas of the display window; because all elements of the page data are positioned in the visible area of the display window, a user can see all contents of the page data in the visible area of the display window without dragging a scroll bar to browse, so that the operation of the user is simplified, and the browsing experience of the user on the webpage is further improved.

In some embodiments, when the size of the element in the page data is adjusted based on the size of the viewable area of the display window, it may be determined based on the current resolution of the display device in which the display window is located. Specifically, the current resolution of the display device where the display window is located may be obtained in response to a display trigger for the page data, and the size of the element included in the page data may be adjusted based on the current resolution and the preset resolution of the page data.

In this embodiment, for the display window, the default state is generally maximized, where the visual 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, the display device is a computer, where the screen resolution of the computer is 1920x1080, the display resolution of the computer may be set to 1920x1080, or may be set to a resolution less than 1920x1080, such as 1680×1050, and if set to 1680×1050, the display area is smaller than the resolution of 1920x1080. Referring to FIG. 4, a schematic diagram of a display interface of a computer at two resolutions is shown, wherein the resolution on the left side is 1920x1080 and the resolution on the right side is 1680 x1050 as shown in FIG. 4; for the display window, the size of the visual area of the display window on the left side is 1920x1080, and the size of the visual area of the display window on the right side is 1680 x 1050. Thus, the current resolution of the display device can be taken as the size of the viewable area.

The page data may have a preset resolution, which may be a resolution that is pre-agreed when designing a UI design draft of the page data, and it should be noted that, when the page data is designed, the preset resolution refers to a resolution standard that is referred to when the page data is designed, if the agreed preset resolution is 1920x1080, the size of an element in the designed page data is designed according to 1920x1080.

The size of the visual area of the display window can be determined according to the preset resolution and the current resolution of the display device, and the size relation between the size of the page view presented by the page data is relative to the size relation, so that the sizes of the elements in the page data are adjusted according to the size relation, and the adjustment condition is that all the elements in the page data can be located in the visual area.

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

Wherein the second adjustment parameter includes a scaling in the height direction and a scaling in the width direction.

In general, the resolution includes a width-direction dimension and a height-direction dimension, and the first dimension ratio and the second dimension ratio may be ratios of a width-direction component and a height-direction component in the resolution, and for example, the preset resolution is 1920x1080, the first dimension ratio is 1920/1080, and assuming that the current resolution is 1680×1050, the second dimension ratio is 1680/1050.

The second adjustment parameter may be understood as a value for transforming the first dimension ratio to the second dimension ratio, such as 1920/1080 to 1680/1050, and in particular, the value may be represented by the second adjustment parameter, that is, the second adjustment parameter may be understood as: after transforming which scale the view presented by the page data is in the width and height directions, respectively, the current resolution can be adapted.

The size of each element in the page data, in particular for different elements in the page data, may then be adjusted according to the second adjustment parameter, i.e. the second adjustment parameter is adapted to each element in the page data.

Wherein in some embodiments, resizing elements included in the page data includes: each element included in the page data is scaled. That is, the element may be scaled according to a second adjustment parameter, where the second adjustment parameter may include a scaling of the width and a scaling of the height, and when the element is scaled, the width may be scaled according to the scaling of the width and the height may be scaled according to the scaling of the height, respectively.

In some embodiments, when the size of the element included in the page data is adjusted based on the second adjustment parameter, the second adjustment parameter may be mapped into a scaling function Scale method as a scaling parameter in the Scale method; and based on the scaling parameters in the Scale method, invoking a Transform method to adjust the size of the elements included in the page data.

Specifically, when scaling the element according to the second adjustment parameter, it may be implemented based on the Scale method in Transform in CSS3, where the Scale method focuses on implementing the scaling effect (scaling, i.e. "zoom-in" and "zoom-out") of the element. The specific operation is as follows:

The Scale method includes a Scale parameter in the width direction and a Scale parameter in the height direction, and the Scale method of the Transform attribute in CSS3 is as follows:

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

2) ScaleY (y): elements scale vertically only (scaling in the height direction);

3) Scale (x, y): element horizontal and vertical directions are scaled simultaneously (width and height directions are scaled simultaneously);

the Scale (x, y) can accept two parameters to realize simultaneous scaling of the element in the width direction and the height direction, so that the scaling of the width and the scaling of the height in the second adjustment parameter can be respectively transmitted to the x and the y parameters, and then the mapping on the view is realized through the Transform attribute acting as HTML, for example, the mapping is performed by adopting a method of' div.

Specifically, in one implementation, as described above, the display device may feedback the target resolution of the display window on which the web end (or APP) is monitored to the instance of the display page data, where the instance of the display page data may include a preset scaling algorithm that 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;

Specifically, the preset resolution corresponding to the page data may be carried in the page data, as an attribute parameter of the page data, the instance displaying the page data may read the preset resolution and transmit the preset resolution to the scaling algorithm, thereby determining a first size ratio, and transmit the target resolution of the fed back display window to the scaling algorithm, determine a second size ratio, and then the scaling algorithm determines a second adjustment parameter according to a relationship between the first size ratio and the second size ratio.

The obtained second adjustment parameter may be continuously transferred to the Scale method, and then the Scale party invokes a Transform attribute, that is, maps "div.style.transform=" Scale ($ { scale.width }, $ { scale.height }) "to the original page data, so that each element in the original page data is scaled according to the second adjustment parameter.

By adopting the technical scheme of the embodiment, the current resolution and the preset resolution of the page data correspond to the same measurement unit, namely, the measurement units of the pixels px are adopted, so that when the sizes of the elements are adjusted according to the resolution of the display device and the preset resolution of the page data, the conversion is performed under the same measurement unit, thereby simplifying the calculation process, and compared with the related art, the method has at least the following steps:

In the related art, the adaptation of page data to a display screen is mainly realized by adopting rem-based responsive unit conversion. Where the front end rem is a relative unit to a pixel unit, which uses the font size of the root element as a reference, instead of a fixed pixel value. Instead of using fixed pixel values, instead of using units relative to the root element to define various sizes during the conversion process. In the development process, it is necessary to use "rem" as a unit in the CSS code and set a font size in the root element. Since "rem" is required as a unit and the display device is also required to be in px as a unit, rem is required to be finally converted into corresponding px for display in the process of writing codes. Therefore, in the development process, a developer is required to convert between rem and px, the mental burden on the developer is relatively large, and the development workload is high. In addition, the size that can be displayed by the browser is 12px, and the use of rem does not break through this bottleneck, and even if rem is scaled to be smaller than 12px, the browser is displayed at 12px, whereas in practice, the user may wish to display at 4px, but this function cannot be achieved using rem, i.e., the browser cannot be caused to display at 4px using the rem method.

On the one hand, the method disclosed by the invention is based on resolution conversion, namely calculation based on the px unit, and a process of converting the px into other relative units does not exist, so that mental burden of a developer can be reduced, namely workload in the development process is reduced, development efficiency is improved, and development time is saved. On the other hand, the size of the element is adjusted according to the relative size relation based on the relative size relation between the screen resolution and the preset resolution, so that the whole view of the page is subjected to fine granularity adjustment from the size of the element, the bottleneck limit of 12px can be broken through, and the browser can display the element with the size smaller than 12px, thereby widening the page display function.

In practice, a user may open a browsing page on a plurality of different display devices to browse page data, so that the same page data needs to be displayed on the different display devices. For different display devices, the sizes of the elements in the page data can be adjusted according to the current resolution of the display device, so that all the elements in the page data are located in the visible area of the display window. In some embodiments, the display device may be a tiled screen, where the tiled screen is formed by stitching multiple display screens, and when it is required to display the page data on the tiled screen, each display screen may display a portion of the content in the page data.

Correspondingly, the display window comprises a plurality of sub-display areas, and different sub-display areas are positioned in different display devices; when the size of the element included in the page data is adjusted based on the display window of the page data to be displayed, the window resolution of the display window can be determined based on the screen resolutions corresponding to the display devices in response to the display trigger of the page data; and adjusting the size of the element in the page data based on the window resolution and the preset resolution of the page data.

Referring to fig. 5, a schematic diagram of a display method in the case of a tiled screen is shown, since a display window is tiled by display areas of a plurality of display devices, each display device has its own corresponding screen resolution, which is the highest resolution inherent to the display device, so that different display devices may have the same screen resolution in order to enable the tiling between the display devices. As shown in fig. 5, the screen resolutions of the display device 1 to the display device 4 are 1920x1080; the window resolution of the spliced screen may be the resolution obtained after splicing: 3840x 2160, whereby the size of each element in the page data can be adjusted according to the window resolution and the preset resolution.

The process of adjusting the size of each element in the page data according to the window resolution and the preset resolution may refer to the process of adjusting the size of each element in the page data according to the current resolution and the preset resolution, which is not described herein.

With such an embodiment, the spliced screen can be regarded as a complete screen, and the size of all elements in the page data is adjusted according to the resolution of the complete screen so that all elements in the page data are located in the visible area of the display window, thereby enabling the user to see all the contents contained on the web page on the large screen without moving the scroll bar.

Next, an example of the above embodiment is given, and referring to fig. 6, an overall flowchart of the exemplary display method is shown, where the Scale object shown in fig. 6 is the Scale method in this example, and specifically, the following procedure may be adopted for display:

s1, determining a reference resolution when manufacturing a UI design draft of page data of a webpage, and designating a default scaling value as 1 (wide-high scaling factor) assuming that the reference resolution is 1920x 1080. At this reference resolution, a reference ratio of about 1.77778 (1920/1080) is available, which is designated as baseRatio; of course, the page data may contain other basic parameters in addition to this reference resolution.

S2, uploading the page data to a server to provide for the web front end for use;

s3, monitoring operation executed by a user on the display equipment, and acquiring page data of the webpage when the operation of opening the webpage by the user is monitored;

s4, acquiring the size of a display window for displaying page data, wherein if the display window is maximized, the size is the screen resolution of the display device, and if the display window is not maximized, the resolution of the display window relative to the display device is required to be acquired; specifically, the width and height of the visual area of the current display window can be read through the innewwidth and innewheight attributes of the browser window object;

s5, the display equipment sends the acquired resolution of the display equipment to an instance of display page data, and a scaling algorithm in the instance of display page data determines the size proportion for adjusting the elements according to the acquired resolution and the preset resolution of the page data, wherein the process is as follows:

based on the width and height of the current window, a ratio is calculated, which is called currentRatio, at which time currentRatio is determined. Then, comparing the current aspect ratio currentRatio with the base ratio, if currentRatio is greater than base ratio, if currentRatio is 2, it means that the display scale of the current terminal is wider, the currently required width scale is that the display height of the visual area is multiplied by the base ratio and divided by the base width (i.e. 1920), that is, scale.width= (the display height of the visual area is equal to base ratio)/base width (1920), and the scaling height scale is not required to be calculated by the base ratio, and the display height of the current display device is directly used divided by the base height, because the current running state is higher resolution scaling, the width is required to be calculated by the base ratio, and the height is directly obtained by the window object, that is, the scaling in the height direction = the height of the visual area/base height (1080).

Another case is that if the currentRatio is not greater than the baseRatio, it indicates that the display scale of the current display device is higher, then the zoom height needs to be calculated at this time, that is, the zoom scale in the height direction=the width of the visual area/baseRatio/baseHeight (1080), while the width zoom scale is kept current, and is directly read by the window object, that is, the zoom scale in the width direction=the width of the visual area/baseWidth (1080).

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

S6, applying the second adjustment parameter to the page data, for example, transferring the second adjustment parameter to a Scale method of a Transform attribute in the CSS3, wherein the Scale method scales each element in the page data according to a size ratio. Specifically: the scaling algorithm will transmit the scaling in the width direction and the scaling in the height direction in the second adjustment parameters to the x and y parameters in the Scale object, respectively, if scaling is only performed in the width direction, the scaling x (x) is used; if only scaling in the height direction, then Scale Y (y) is used; if scaling is performed in both the width and height directions, scale (x, y) is used: the Scale method then implements the mapping on the view by acting as HTML through the Transform attribute, i.e., div.style.transform=' Scale ($ { scale.width }, $ { scale.height }) to Scale each element in the page data.

S7: displaying an instance of the page data renders a view of the scaled page data into a display window, where all elements of the page data are located in a viewable area of the display window.

The example can be applied to various display devices such as mobile phones, 4K screens, spliced screens, computers, MP4 and the like, and the effect of self-adapting page data display windows can be achieved only by implanting a program for performing size scaling according to resolution into a browser, namely, view display can show the most perfect proportion according to the display windows.

In a further embodiment, after all the elements in the page data are displayed in the visible area of the display window, the page data may be adaptively adjusted in response to the change of the display window, so that all the elements in the page data are located in the visible area of the display window no matter what change is generated in the display window. If the visual area is reduced, all elements of the page data are still located in the visual area after the size is changed, if the visual area is enlarged, all elements of the page data are located in the visual area and the size is correspondingly increased so as to be suitable for the current visual area. For another example, after the resolution of the display device becomes low, all elements of the page data are still located in the visible area after being reduced, and the size of the elements is adapted to the current resolution so as to obtain a clearer display effect; for another example, after the resolution of the display device becomes high, all the elements of the page data are still located in the visible area after the size of the elements is large, and the size of the elements is adapted to the current resolution so as to obtain a clearer display effect.

Thus, after the resolution or viewable area of the display window is changed, the view presentation is scaled to the most perfect scale.

Accordingly, referring to fig. 7, a step flow diagram of another display method is shown, and as shown in fig. 7, after the adjusted page data is displayed on the display window, the change of the display window may be monitored, and when the change of the display window is monitored, the following steps may be executed:

step 201: responsive to a change in the display window, adaptively adjusting a size of an element included in the page data; wherein the change includes a change in a size of a viewable area of the display window and a change in display resolution;

step 202: and displaying the adaptively adjusted page data in the changed display window, wherein all elements in the page data are positioned in a visible area of the changed display window.

The change of the display window includes a change of the height and the width of the display window, and the conditions of causing the display window to change in the width direction and the height direction include two conditions, that is, the visual area of the display window is changed by manual operation, referring to fig. 8, the resolution of the display device where the display window is located is not changed, but the display window is adjusted from the maximized display to the non-maximized display by the user, so that the visual area 200 of the display window is changed; another is that the screen resolution of the display device in which the display window is located is adjusted, as shown in fig. 4, from a high resolution (1920×1080) to a low resolution (1680×1050), and the size of the display window is also changed.

Both changes can change the size of the visual area of the display window, so that the sizes of the elements in the page data can be adaptively adjusted according to the changed size of the visual area of the display window, so that all the elements in the page data can be always located in the visual area of the display window.

Specifically, the size of the visual area of the changed display window may be obtained, then, based on the size of the changed visual area, the size of the element in the page data is adaptively adjusted, and the page data after the adaptation is displayed in the changed display window, where all the elements in the page data are located in the visual area of the changed display window.

Specifically, the display device may call a monitor interface built in the display device to monitor a change in a size of a visual area of the display window, and when the change in the size is monitored, may notify an instance of obtaining the size of the visual area of the display window of the web end (or APP), for example, the incnerwidth and incnerheight attributes of the window object described above, to obtain the changed size of the visual area. Then, the incarnation width and incarnation height attributes of the window object may feed back the acquired size of the visible region to the instance of displaying the page data, so that the instance of displaying the page data may readjust the elements in the page data according to the above-mentioned procedure of steps S5-57.

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

By adopting the implementation manner, real-time response can be made to the resolution change of the display device and the size change of the display window, so that the view display of the page data is in the perfect proportion after each time of the resolution change of the display device or the size change of the display window, and thus, after the size of the display window is changed and the resolution of the display device is changed, the user can still see the whole content of the page data in the visual area of the changed display window, and the browsing experience of the user is optimized.

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

That is, for the display window before and after the change, the size of the element in the page data displayed in the display window in the first direction may be changed, the size in the second direction may be changed, or the sizes in both the first direction and the second direction may be changed. Specifically, the display window may be determined according to the change condition of the visible area of the display window, if the visible area is changed in the width direction and the height direction is not changed, the dimension of the element in the width direction is changed and the dimension of the element in the height direction is not changed before and after the change of the display window. If the visible area is changed in the height direction and the width direction is unchanged, the dimension of the element in the height direction is changed and the dimension of the element in the width direction is unchanged before and after the display window is changed; if the visible region is changed in both the height direction and the width direction, the dimensions of the element in both the height direction and the width direction are changed before and after the display window is changed.

That is, the dimensional change of the element located in the viewable area is also adapted to the change of the display window before and after the change of the display window.

Accordingly, as described above, the case of causing the display window to change in width and length includes two cases, and the case shown in fig. 8 will be described first. Specifically, fig. 8 shows a case where the size of the display window is adjusted by the user, the adjustment causes a change in the size of the visual area of the display window, and specifically, a listening interface built in the display device may listen to whether the size of the display window has been adjusted, and when the size adjustment operation is monitored, may determine a size parameter of the visual area of the display window after the size adjustment operation in response to the size adjustment operation of the display window; then, based on the size parameter, adaptively adjusting the size of the element included in the page data; wherein the dimensional change includes a change in the width of the display window, and/or a change in the height.

Accordingly, the size parameters of the display window after the size adjustment can be acquired in response to the size adjustment operation performed on the display window, and the sizes of the elements included in the page data are adaptively adjusted based on the size parameters.

In this embodiment, the resizing operation may include an extending operation and a shortening operation for the width of the display window, for example, when the user holds the mouse to select the edge of the display window and drags the edge to the outside of the display window, the width increases, and when the edge moves to the inside of the display window, the width decreases. Similarly, the resizing operation may include an extending operation and a shortening operation for the height of the display window. Of course, in still other embodiments, the resizing operation may be a predetermined operation, such as a continuous double click of the left mouse button, which reduces the display window to a certain size; and continuously clicking the left button of the mouse three times, and expanding the display window to a certain size.

In practice, the incarnation width and incarnation height attributes of the window object may obtain the size of the display window after the size adjustment, so as to obtain a size parameter, where the size parameter may represent a size transformation relationship between the display window and the page data, and then the size of the element in the page data may be adjusted according to the size parameter in the process of adjusting the size of the element based on the second adjustment parameter in the above embodiment.

In some embodiments, the size of the element in the page data may be adjusted based on the size parameter in two ways, where one way is to adjust the size of the element in the adjusted page data displayed in the display window before adjustment according to the size change of the visible area of the display window before and after adjustment when the size adjustment operation is detected.

Specifically, a first size of a visual area of the display window before the resizing operation and a second size of the display window after the resizing operation may be determined; and determining a size parameter based on between the first size and the second size. The size of the elements included in the adjusted page data may then be adaptively adjusted based on the size parameter.

In this manner, in step S102, when the adjusted page data is displayed on the display window, the instance of the display page data may save a first size of the visual area of the display window, which may include a size in the width direction and a size in the height direction of the visual area of the display window; then, in response to the above-described resizing operation, a second size of the visual area of the display window after being resized, which may also include a size in the width direction and a size in the height direction of the visual area of the display window, may be acquired through the incerwidth and incerheight attributes of the window object, and the second size may be transferred to an instance of the display page data.

Thus, the example of displaying the page data can determine the size change before and after the display window is adjusted based on the first size and the second size, and based on the size change, the size of the element in the adjusted page data can be directly adjusted based on the adjusted page data, and the size of the element in the original page data can be not adjusted. In this way, the size of the element in the page data may be adjusted in step 101, and the adjusted page data may be saved.

Specifically, the ratio between the dimension in the width direction and the dimension in the height direction in the first dimension may be taken as a pre-adjustment ratio, and then, the ratio between the dimension in the width direction and the dimension in the height direction in the second dimension, which may be referred to as a post-adjustment ratio, is determined; and determining the change of the visual area of the display window in the height direction and the change of the visual area in the width direction according to the size relation between the proportion before adjustment and the proportion after adjustment.

In this embodiment, the measurement units of the first size and the second size may be length units. Specifically, if it is determined that the change occurs only in the height direction according to the pre-adjustment ratio and the post-adjustment ratio, the size of the element in the page data after adjustment in the height direction may be scaled according to the ratio before and after the change in the height direction. For example, if the width of the visible region of the display window is unchanged and the height is changed from 12cm to 10cm, the ratio thereof is 10/12=0.83, and the dimension of the element in the height direction can be scaled by 0.83.

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

Of course, if it is determined that the change has occurred in both the width direction and the height direction, the ratio before and after the change in the height direction and the ratio before and after the change in the width direction may be determined, and then the dimension of the element in the height direction may be scaled according to the ratio before and after the change in the height direction and the dimension of the element in the width direction may be scaled according to the ratio before and after the change in the width direction.

Thus, after the size is changed, the page data after the adaptation can be displayed in the visible area of the changed display window. As the elements of the page data are resized to adapt to the change based on the change in the viewable area of the display window, all elements in the page data remain in the changed viewable area of the display window.

Specifically, in one exemplary implementation of this embodiment, an instance of display page data may be run in the display device, and when the instance of display page data is displaying adjusted page data to the display window, the first size of the viewable area of the display window, the adjusted page data may be saved, such as saving the first size and the adjusted page data in a local area of the display device;

Then, when the monitoring interface monitors that the size of the visual area of the display window changes, the InnerWidth and InnerHeight attributes of the window object can be indicated, a second size of the adjusted visual area of the display window is obtained, and the second size is transmitted to an instance of the display page data;

a scaling algorithm in the instance of displaying page data, determining a size parameter based on the first size and the second size;

the size parameter is passed to the Scale method in the instance of displaying page data, after which the Scale method maps to locally stored adjusted page data using "div.style.transform=" Scale ($ { scale.width }, $ { scale.height }) ", such that each element in the adjusted page data is scaled according to the size parameter.

Of course, in this embodiment, the instance of the display page data may also be run in the cloud, and the first size and the adjusted page data may also be stored in the cloud and correspond to the display device, so that when the second size of the display window on the display device after the visible area of the display window is changed is obtained, the size of the element in the adjusted page data may 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.

In this way, the size of the element in the page data after adjustment before the change is directly adaptively adjusted according to the size change of the display window before and after the change, so that the adjustment process can be simplified, and the adjustment is not required to be performed according to the original page data, thereby improving the speed of responding to the change of the display window.

Another way is that: when the size adjustment operation is detected, acquiring a second size of a visual area of the display window after the size adjustment operation and screen resolution of display equipment where the display window is positioned; determining a preliminary proportion based on the screen resolution and the preset resolution of the page data; next, the sizes of the elements included in the page data are adaptively adjusted based on the preliminary proportion and the second size.

In this manner, the second dimension may include a dimension of the visible region in the height direction and a dimension in the width direction. The preliminary proportion for preliminary adjustment of the page data may be determined according to the current resolution of the display device where the display window is located and the preset resolution of the page data, where the preliminary proportion may include a scaling proportion in the height direction and a scaling proportion in the width direction, and specifically, may be determined by referring to the process of the step S5, which is not described herein again.

The preliminary proportion is a proportion corresponding to the page data when the page data is displayed on the display window under the condition of maximization of the display window, and the size of the element is required to be adjusted according to the second size of the visual area of the display window and the preliminary proportion after the preliminary proportion is determined because the size of the visual area of the display window is manually adjusted.

Specifically, the sizes of the elements in the page data can be initially adjusted according to the initial proportion to obtain adjusted elements, wherein the adjusted elements can be element A;

next, the maximum size at the time of maximizing the display window is determined, and the proportional relationship between the second size and the maximized size is determined, in which case the proportional relationship between the second size and the maximized size can be regarded as a change in size before and after the display window is adjusted in the above manner, that is, each time the display window is resized, it is regarded as a change with respect to the maximized display window; thus, the dimensional change in the height direction and the dimensional change in the width direction of the adjusted visible region of the display window can be determined as compared with the maximized size, and the ratio of the change in the height direction and the ratio of the change in the width direction can be obtained.

Then, the size of the element a is adjusted in accordance with the ratio of the change in the height direction and the ratio of the change in the width direction, thereby obtaining an adjusted element a'. Thus, element A' is adapted to the adjusted display window.

Specifically, in an exemplary implementation of this embodiment, an instance of the display page data may run in the cloud, and when the instance of the display page data is displaying the adjusted page data to the display window, the page data, the resolution of the display window, and the adjustment parameters adopted when obtaining the adjusted page data, that is, the second adjustment parameters described above, for example, the resolution and the second adjustment parameters are stored in the local area of the display device;

a scaling algorithm in the example of the display page data determines a scaling relationship between the second size and the resolution based on the size between the second size and the saved resolution;

The example of displaying the page data may first transfer the second adjustment parameter to the Scale method, where the Scale method maps "div.style.transform=" Scale ($ { scale.width }, $ { scale.height }) "to the page data, so that each element in the page data is scaled according to the size parameter, and stores the adjusted page data;

then, the scaling algorithm transfers the scaling relation between the second size and the resolution to the Scale method, and the Scale method maps the scaling relation into the adjusted page data by adopting the ' div. Style. Transform= ' Scale ($ { Scale. Width }, $ { Scale. Height }) ', so that each element in the adjusted page data is scaled again according to the newly transferred scaling relation.

And then, the example of the display page data sends the self-adaptive adjusted page data to the display device, and the display device can display the page data on the front page.

By adopting the embodiment, the data after the page data is adjusted in the previous time can be saved, so that each time the size adjustment operation is responded, the adjustment can be carried out based on the original page data, and the storage requirement on the equipment can be reduced.

Here, the case shown in fig. 4 will be described. Specifically, fig. 4 shows a case where the resolution of the display device where the display window is located is changed, where the change in resolution causes a change in the size of the visible area of the display window, specifically, the display device may call the listening interface to monitor whether the resolution of the display device where the display window is located is changed, and accordingly, may obtain the target resolution after the change in response to the change in resolution of the display device where the display window is located, and adaptively adjust the size of the element included in the page data based on the target resolution.

The case where the resolution is changed may include a change in the resolution of the same display device, such as a computer with a resolution adjusted from 1920×1080 to 1680×1050; it may also include the case where a display window is dragged from one display device to another, such as where the display window drops from display device a to display device B.

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

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, when dragging to the edge of the first display screen, the display window jumps to the second display screen, and displays the page data on the second display screen, and then the resolution of the second display screen may be taken as the target resolution, which may be adapted to the collaborative display scene of multiple display screens.

In this example, the listening interface may be located in a web end, for example, bound to a browser, and may be used to detect whether a display window used by the same user has a migration of a display screen, that is, whether the listening display window is in the same display screen, if it is detected that the listening display window has a migration in two display screens, an inwidth attribute and an innewheight attribute of a window object on a display device where the migrated display screen (the second display screen) is located may be indicated to obtain a target resolution of the second display screen, and at this time, the target resolution may be notified to an instance of display page data located in a cloud end, so that the cloud end performs adaptive adjustment on an element of the page data based on the target resolution and then sends the element to the second display screen for display.

Specifically, in one implementation of this embodiment, the first display screen and the second display screen may be two display screens connected to the same display device, for example, a host computer connects the two display screens, where in this case, the listening interface may also be located in the display device to monitor whether a display window migrates in the two connected display screens, and if migration occurs, the display device may instruct an incorder width attribute and an incorder height attribute of a window object to obtain a target resolution of the second display screen, and then inform an instance of display page data on the display device or the cloud to display the adjusted page data on the second display screen after adaptively adjusting an element of the page data based on the target resolution.

In some cases, the user may adjust the resolution of the display device, for example, when the resolution of the computer is adjusted from 1920×1080 to 1680×1050, the size of the display area of the display screen changes, in which case the size of the displayed element also changes accordingly, in which case the adjusted resolution of the computer may be used as the target resolution.

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

Wherein the first adjustment parameter includes a scaling in a height direction and a scaling in a width direction.

In this embodiment, the first adjustment parameter may be similar to the second adjustment parameter, specifically, the process of adjusting the size of the element included in the page data according to the first adjustment parameter may refer to the process of adjusting the size of the element included in the page data according to the second adjustment parameter, which is not described herein.

When the implementation mode is adopted, when the resolution of the display equipment where the display window is positioned is changed, the sizes of the elements in the displayed page data are changed in a fitting way, so that all the elements in the page data are always positioned in the visible area of the display window before and after the resolution is generated; the size of the elements in the displayed page data may also be adapted to the resolution of the other display device when the display window jumps from being located in one display device to being located in the other display device, so that all the elements in the page data are always located in the viewable area of the display window before and after the display device changes.

Specifically, the sizes of the elements of the page data are adjusted based on the sizes before and after the change of the display window, so that a first proportion exists between the sizes of the same element in the page data in the display window before the change and the sizes in the display window after the change in the visual angle; a second proportion is arranged between the visible area of the first display window and the visible area of the second display window;

wherein the first proportion and the second proportion are linearly related, in particular, the linear relation may mean that the first proportion and the second proportion are the same.

Next, an example of the above embodiment is given again, and referring to fig. 9, as shown in fig. 9, in addition to including steps S1 to S7 shown in fig. 6, the following procedure may be included:

firstly, a size event needs to be added to the browser window object, where the size event is the above-mentioned monitoring interface, and specifically includes monitoring the size adjustment operation of the display window and monitoring the resolution change of the display device where the display window is located, by monitoring the size change of the visual area of the display window.

S8: after the view of the scaled page data is rendered to the display window in the step S7, a timer may be started to create a macro task, that is, activate a resize event, and notify the Innerwidth and Innerheight properties of the window object when the resize event is activated, and record the height and width of the display window before the change, which is recorded as (W1, H1); the (W1, H1) can be stored locally on the display device or fed back to the cloud through the connection between the display device and the cloud;

s9: after the resolution of the display device where the display window is located is monitored by the resize event, the display device is informed of the incarnation width and incarnation height attributes of the window object, the changed target resolution is obtained, the target resolution is transmitted to an instance of display page data located at the background of the display device, or the target resolution is transmitted to the cloud through connection between the display device and the cloud, so that the instance of display page data in the cloud can obtain the target resolution.

Next, the example of displaying the page data repeatedly performs the above steps S5 to S7 to adaptively change the sizes of the elements in the page data, as shown in fig. 4, and displays the page data with the changed sizes in the changed display window, thereby obtaining the display effect as shown in fig. 4.

S10: when the size adjustment operation is performed on the display window through the resize event, if the user reduces the width of the display window, notifying the InnerWidth and InnerHeight attributes of the window object, and acquiring the size of the display window after the width is reduced, wherein the size comprises the size in the length direction and the size in the height direction, and the size is recorded as (W2, H2); transmitting (W2, H2) to an instance of display page data located in the background of the display device, or transmitting (W2, H2) to the cloud through connection between the display device and the cloud so as to acquire (W2, H2) from the instance of display page data in the cloud;

next, the size parameter between (W1, H1) and (W2, H2) is calculated by the example of the display page data, and the size of the element in the page data obtained in step S6, which is the previously stored adjusted page data, is adjusted according to the size parameter, and the page data after the size adjustment is displayed in the changed display window, so that the display effect as shown in fig. 8 is obtained.

S11: returning to step S8, activating the size event to enable the size event to continue to monitor the size change of the visual area of the display window, so that each time of size change of the display window can be monitored, the size change of the display window can be responded quickly, the size of elements in the page data can be adjusted adaptively, and accordingly the fact that each time of view response is acted on the change of the display window one by one is guaranteed.

Since the present disclosure adjusts elements in page data based on a ratio between a size of a visual area of a display window and a preset resolution corresponding to the page data, the calculation of the ratio may be performed by a scaling algorithm, and in particular, when an instance of the display page data is located at a location of a display device, it is possible to quickly respond to a change in the size of the visual area of a front display window, because a path for informing the change in the size of the visual area to be monitored, which is informing of the instance of the display page data, is shortened, independent of network communication, and thus, a response time period may be shortened, and an objective of quickly responding to the change in the size of the visual area of the page data may be achieved.

When the instance of displaying the page data is located in the cloud, the display device can inform the cloud of the size change of the visual area of the front display window, and as the cloud has more hardware resources than the display device, for the page data with more elements, the self-adaptive adjustment is performed on the page data in the cloud, so that the adjustment efficiency can be improved, and the problem of long response time caused by insufficient computing power resources at the display device end can be avoided.

Of course, in some embodiments, an instance of displaying the page data may be deployed on both the display device side and the cloud side, and when the page data is adaptively adjusted based on the visual area, it may be determined whether to adaptively adjust the display device or to adaptively adjust the cloud according to the data size of the page data. For example, when the data amount of the page data is greater than or equal to the preset data amount, the display device may inform the cloud of the size of the visible area, and the cloud performs adaptive adjustment; when the data amount of the page data is smaller than the preset data amount, the display device may perform adaptive adjustment on elements in the page data locally according to the size of the visible region.

When the embodiment is adopted, the cloud end can inform the display equipment of the data quantity of the page data in advance, if the display equipment side triggers a display request of the page data, the cloud end determines the page data to be displayed and the data quantity of the page data according to the display request, then the display equipment can inform the data quantity of the page data first, the display equipment decides whether to carry out self-adaptive adjustment locally or carry out self-adaptive adjustment locally according to the informed data quantity of the page data, and if the display equipment decides to carry out self-adaptive adjustment locally, the cloud end sends the page data to the display equipment; if the display device determines to inform the cloud end of self-adaptive adjustment, the display device needs to inform the cloud end of the size of the visual area of the display window, and the cloud end adjusts the page data according to the size and then sends the page data to the display device.

By adopting the scheme of the embodiment, the performance of the display equipment can be adapted when the page data is adaptively adjusted, so that the optimal response efficiency is achieved.

Based on the same inventive concept, the present disclosure further provides a display system of an adaptive visual area, and referring to fig. 10, a schematic frame structure of the display system is shown, and as shown in fig. 10, the display system may specifically include a content providing end and a display module, where the content providing end is used to provide page data, and the display module is used to execute the above display method.

The content providing end is mainly used for supporting data and business logic of an application program, and has the main functions of supporting views in the application program, providing page data for the views and timely responding to operations in the page, namely, operation data of a user for executing operations on a control in the page can be fed back to the content providing end, the content providing end provides corresponding page data based on the operation data, and the page data is rendered in a display window by a display module.

As shown in fig. 10, the display module may be adapted to various types of display devices, such as a display device of a mobile terminal, including a mobile phone and a tablet, and adapted to APP (Application) installed on the mobile terminal. And web-side-mounted display devices such as high definition screens, 4K screens; and large screens with installed web segments, such as splice screens and 8K screens.

The display module in this embodiment may refer to the example of displaying the page data, and the display module may be located in the display device or may be located in the cloud.

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

Referring to fig. 11, there is shown still another frame structure diagram of the display system, as shown in fig. 11, in which a response unit is located between a view unit and a content providing end, and a communication bridge is provided between the view unit and the content providing end.

Specifically, the response unit in this embodiment may be a unit where the scaling algorithm and Scale method described above are located, and the view unit may be referred to as a view unit, which may be used to monitor an operation on page data, that is, monitor an operation located in a display window, and execute an operation described in the above-mentioned Transform attribute, such as invoking the Transform attribute, that is, mapping "div.style.transform=" Scale ($ { scale.width }, $ { scale.height }) "into the original page data, so that each element in the original page data is scaled.

The response unit is used for providing a second adjustment parameter for the view unit and inputting operation data of a user to the content providing end. Specifically, in this embodiment, the method is mainly used for determining a second adjustment parameter for adjusting an element in the page data based on a window parameter of a display window of the page data to be displayed and a preset resolution of the page data, and then transmitting the second adjustment parameter to a view unit.

The view unit is used for processing a view layer, namely defining a structure of a user interface, and in the embodiment, is mainly used for adjusting the sizes of elements in page data based on the second adjustment parameters transmitted by the response unit and then rendering the elements into a page, so that the view is visible to a user. Specifically, the process of adjusting the size of the element in the page data based on the second adjustment parameter may refer to the process described in the embodiment of the display method, which is not described herein.

Specifically, the process may be:

the view unit monitors the operation executed on the control in the page through the DOM event, if the operation executed on a certain control is monitored, the view unit indicates that a new page needs to be entered and displays page data on the new page, the operation data of the operation can be fed back to the response unit, the response unit feeds back the operation data to the content providing end, and the content providing end provides corresponding page data based on the operation data;

The response unit acquires the InnerWidth and InnerHeight attributes of the browser window object, reads the width and the height of the current window, determines a second adjustment parameter according to the preset resolution provided in the page data, and takes the second adjustment parameter as an x parameter and a y parameter in a Scale method; then, invoking a Transform attribute of the view unit by using a Scale method; if "div.style.transform=" Scale ($ { scale.width }, $ { scale.height }) "is used, mapping to Transform;

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

With the adoption of the display system in the embodiment, the response unit can realize content distribution between the web front end and the server, and the display system can be maintained and tested more easily by adopting the architecture, because the change can be automatically reflected in the page view provided by the view unit only by changing the program of the response unit, and the test and maintenance of the display method are convenient. And the content providing end and the view unit can be decoupled and are not connected, so that the independence of the content providing end and the view unit is ensured, and the content providing end and the view unit are maintained respectively.

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

wherein the adapting operation comprises: performing adaptive adjustment on the sizes of elements included in the page data, and displaying the adaptively adjusted page data in a changed display window;

wherein the change includes a change in a size of a viewable area of the display window and a change in display resolution.

As shown in fig. 11, the monitoring unit may monitor the change of the visual area of the display window, and when the change is monitored, the response unit may adaptively adjust the size of the element in the page data according to the size of the visual area after the change.

The display module is also used for indicating the monitoring unit to monitor the change of the display window again after the adaptive adjustment operation is executed, and triggering the display module to execute the adaptive adjustment operation when the change of the display window is monitored; or triggering the display module to execute the adaptive adjustment operation by the monitoring unit when the monitoring unit monitors the change of the display window again for a preset time after the display module is triggered to execute the adaptive adjustment operation.

In some embodiments, the response unit may be located in a web front end or server, the view unit may also be located in a web front end or server, and the listening unit may be located in a web front end. That is, the response unit and the view unit in the present embodiment may be located in the display device and the cloud, respectively.

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

Or, as described in the above embodiment, the cloud and the display device sides include a response unit, a listening unit, and a view unit; according to the performance of the display device, when elements of the page data are adjusted in a self-adaptive mode, the elements can be adjusted at the cloud end or at the side of the display device, so that response efficiency is improved.

In this embodiment, the adaptive adjustment process may refer to the adjustment process related to fig. 7, which is not described herein.

In this embodiment, after performing the adaptive adjustment, the display module may instruct the monitoring unit to start monitoring the change of the display window, and when monitoring that the change occurs in the display window, trigger the display module to perform the adaptive adjustment operation;

Or the monitoring unit may start the countdown of the preset duration when the display module is triggered to perform the adaptive adjustment operation, monitor the change of the display window again when the countdown arrives, and trigger the display module to perform the adaptive adjustment operation when the monitor display window changes.

The display system and the display method have the following advantages:

firstly, because all elements of the page data are located in the visible area of the display window, a user can see all the contents of the page data in the visible area of the display window without dragging a scroll bar to browse, so that the operation of the user is simplified, the browsing experience of the user on the webpage is further improved, and the method is particularly applied to the display of a 4K large screen, a spliced screen and the like, the control operation can be simplified, and the browsing experience is optimized.

Secondly, the size change of the display window can be monitored every time, the size change of the display window is responded quickly, the sizes of the elements in the page data are adaptively adjusted, and accordingly the view response of every time is guaranteed to be one-to-one acted on the change of the display window, when the size of a visual area of the display window is changed, the sizes of the elements in the page data are adaptively changed, and all the elements in the page data are located in the visual area when the size of the visual area of the display window is changed every time.

Thirdly, the sizes of the elements are adjusted according to the resolution of the display device and the preset resolution of the page data, so that the elements are calculated based on the px units, and the process of converting the px into other relative units is not needed, so that mental burden of a developer can be reduced, namely, the workload in the development process is reduced, the development efficiency is improved, and the development time is saved.

Fourth, since the size of the element is adjusted based on the relative size relationship between the screen resolution and the preset resolution, the whole view of the page is fine-grained adjusted starting from the size of the element, so that the bottleneck limit of 12px can be broken through, and the browser can display the element with the size smaller than 12px, thereby widening the page display function.

The disclosure further provides a display device with an adaptive visual area, and referring to fig. 12, a schematic structural diagram of the display device is shown, and as shown in fig. 12, the display device may specifically include the following modules:

the adjusting module is used for responding to the display trigger of the page data and adjusting the sizes of elements included in the page data based on the sizes of the visible areas in the display window; the display window is used for displaying the page data;

The display module is used for displaying the adjusted page data into the display window; wherein all elements in the page data are located in a viewable area of the display window.

Optionally, the apparatus further comprises:

the adaptation module is used for responding to the size change of the display window and adapting the size of the element included in the page data;

the display module is further configured to display the adaptively adjusted page data to a changed display window, where all elements in the page data are located in a visible area of the changed display window.

Optionally, the adaptation module comprises at least one of:

the first adjusting unit is used for responding to the size adjusting operation executed on the display window, acquiring the size parameter of the display window after the size adjustment, and adaptively adjusting the size of the element included in the page data based on the size parameter;

and the second adjusting unit is used for responding to the resolution change of the display equipment where the display window is positioned, acquiring the changed target resolution and adaptively adjusting the size of the element included in the page data based on the target resolution.

Optionally, the first adjusting unit is specifically configured to respond to a drag operation of moving the display window from the first display screen to the second display screen, and take the resolution of the second display screen as the target resolution; and/or responding to the adjustment operation of the resolution of the display device where the display window is located, and taking the resolution after the adjustment operation as the target resolution;

Optionally, the first adjusting unit includes:

a first parameter determining 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 in a height direction and a scaling in a width direction;

and the third adjusting unit is used for adjusting the size of the element included in the page data based on the first adjusting parameter.

Optionally, the first adjusting unit includes:

a size determining subunit configured to determine a first size of a visual area of the display window before the resizing operation, and a second size of the display window after the resizing operation;

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

and the adjustment subunit is used for adaptively adjusting the sizes of the elements included in the page data after adjustment based on the size parameters.

Optionally, the first adjusting unit includes:

a resolution obtaining subunit, configured to obtain a first size of a visual area of the display window after the size adjustment operation, and a current resolution of a display device where the display window is located;

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

and a resizing subunit adapted to adaptively resize the element included in the page data based on the preliminary proportion and the first size.

a second ratio is arranged between the visible area of the first display window and the visible area of the second display window; wherein the first ratio is linearly related to the second ratio.

Optionally, the adjusting module includes:

the resolution obtaining unit is used for responding to the display trigger of the page data and obtaining the current resolution of the display equipment where the display window is located;

and the adjusting unit is used for adjusting the sizes of the elements included in the page data based on the current resolution and the preset resolution of the page data.

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

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

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

The embodiment of the disclosure also provides an electronic device, and a stored computer program causes a processor to execute the display method of the adaptive visual area according to the embodiment of the disclosure. Specifically, the electronic device may refer to an electronic device having a display function, so that the electronic device may self-adaptively adjust the size of an element in the page data according to a visual area of a display window, and may respond to a change in the size of the visual area, and adaptively adjust the size of the element according to the change.

The embodiments of the present disclosure also provide a computer-readable storage medium storing a computer program to cause a processor to perform the method for displaying an adaptive visual area according to the embodiments of the present disclosure.

Specifically, the computer readable storage medium may be located in the electronic device or may be located in the cloud end, so that the electronic device or the cloud end may adaptively adjust the size of the element in the page data according to the visual area of the display window, and may respond to the change in the size of the visual area and adaptively adjust the size of the element according to the change.

In this specification, each embodiment is described in a progressive manner, and each embodiment is mainly described by differences from other embodiments, and identical and similar parts between the embodiments are all enough to be referred to each other.

It will be apparent to those skilled in the art that embodiments of the present disclosure may be provided as a method, apparatus, or computer program product. Accordingly, the disclosed embodiments may take the form of an entirely hardware embodiment, an entirely software embodiment, or an embodiment combining software and hardware aspects. Furthermore, embodiments of the present disclosure may take the form of a computer program product on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, etc.) having computer-usable program code embodied therein.

Embodiments of the present disclosure are described with reference to flowchart illustrations and/or block diagrams of methods, terminal devices (systems), and computer program products according to embodiments of the disclosure. It will be understood that each flow and/or block of the flowchart illustrations and/or block diagrams, and combinations of flows and/or blocks in the flowchart illustrations and/or block diagrams, can be implemented by computer program instructions. These computer program instructions may be provided to a processor of a general purpose computer, special purpose computer, embedded processor, or other programmable data processing terminal device to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing terminal device, create means for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.

These computer program instructions may also be stored in a computer-readable memory that can direct a computer or other programmable data processing apparatus to function in a particular manner, such that the instructions stored in the computer-readable memory produce an article of manufacture including instruction means which implement the function specified in the flowchart flow or flows and/or block diagram block or blocks.

These computer program instructions may also be loaded onto a computer or other programmable data processing apparatus to cause a series of operational steps to be performed on the computer or other programmable apparatus to produce a computer implemented process such that the instructions which execute on the computer or other programmable apparatus provide steps for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.

While the preferred embodiments of the disclosed embodiments have been described, additional variations and modifications in those embodiments may occur to those skilled in the art once they learn of the basic inventive concepts. It is therefore intended that the following claims be interpreted as including the preferred embodiment and all such alterations and modifications as fall within the scope of the disclosed embodiments.

Finally, it is further noted that relational terms such as first and second, and the like are used solely to distinguish one entity or action from another entity or action without necessarily requiring or implying any actual such relationship or order between such entities or actions. Moreover, the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or terminal that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or terminal. Without further limitation, an element defined by the phrase "comprising one … …" does not exclude the presence of other like elements in a process, method, article or terminal device comprising the element.

The foregoing has described in detail the method, apparatus, system and medium for displaying an adaptive visual area provided by the present disclosure, and specific examples have been applied to illustrate the principles and embodiments of the present disclosure, and the description of the foregoing examples is only for helping to understand the method and core ideas of the present disclosure; meanwhile, as one of ordinary skill in the art will have variations in the detailed description and the application scope in light of the ideas of the present disclosure, the present disclosure should not be construed as being limited to the above description.

Claims

1. A method of displaying an adaptive viewable area, the method comprising:

responding to display triggering of page data, and adjusting the sizes of elements included in the page data based on the sizes of visible areas in a display window; the display window is used for displaying the page data;

displaying the adjusted page data in the display window;

2. The display method according to claim 1, wherein after the adjusted page data is displayed to the display window, the method further comprises:

3. The display method according to claim 2, wherein the adaptively adjusting the size of the element included in the page data in response to the change in the size of the display window includes at least one of:

4. A display method according to claim 3, wherein, in response to a change in resolution of a display device in which the display window is located, obtaining the changed target resolution comprises:

5. A display method according to claim 3, wherein said adaptively adjusting the size of an element included in the page data based on the target resolution includes:

determining a first adjustment parameter based on the target resolution and a preset resolution corresponding to the page data; wherein the first adjustment parameter includes a scaling in a height direction and a scaling in a width direction;

6. A display method according to claim 3, wherein the obtaining, in response to the resizing operation performed on the display window, a size parameter of the resized display window, and adaptively adjusting the size of the element included in the page data based on the size parameter, comprises:

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

and adaptively adjusting the sizes of the elements included in the adjusted page data based on the size parameters.

7. A display method according to claim 3, wherein the obtaining the size parameter of the resized display window and adaptively adjusting the size of the element included in the page data based on the size parameter includes:

acquiring a second size of a visual area of the display window after the size adjustment operation and the current resolution of the display device where the display window is located;

and adaptively adjusting the sizes of elements included in the page data based on the preliminary proportion and the second size.

8. The display method according to claim 2, wherein the same element in the page data has a first ratio between a size in the display window before the change and a size in the display window after the change;

A second proportion is arranged between the visible area of the display window before the change and the visible area of the display window after the change;

wherein the first ratio is linearly related to the second ratio.

9. The display method according to claim 2, wherein the adapting comprises: adjustment of the dimensions of the element in a first direction; and/or adjusting the dimension of the element in a second direction; 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, wherein the adjusting the size of the element included in the page data based on the size of the visible area of the display window in response to the display trigger of the page data includes:

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

11. The display method according to claim 10, wherein 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:

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

12. The display method according to claim 10, wherein the adjusting the size of the element included in the page data based on the second adjustment parameter includes:

13. The display method according to any one of claims 1 to 10, wherein the display window includes a plurality of sub-display areas, different sub-display areas being located in different display devices; the adjusting the size of the element included in the page data based on the display window of the page data to be displayed includes:

14. The display method according to any one of claims 1 to 10, wherein resizing the element included in the page data includes: scaling each element included in the page data.

15. A display system for an adaptive viewable area, comprising;

the content providing end is used for providing page data;

a display module for performing the display method of any one of claims 1-14 based on the page data.

16. The display system of claim 15, wherein the display module comprises a response unit and a view unit; wherein:

17. The display system of claim 15, further comprising:

18. The display system according to claim 17, wherein the display module is further configured to instruct the monitor unit to monitor the change of the display window again after the adaptive adjustment operation is performed, and trigger the display module to perform the adaptive adjustment operation when the change of the display window is monitored;

or alternatively, the process may be performed,

and when the monitoring unit triggers the display module to execute the adaptive adjustment operation, monitoring the change of the display window again for a preset time length, and triggering the display module to execute the adaptive adjustment operation when monitoring that the display window changes.

19. A display device for adapting a viewable area, the method comprising:

displaying the adjusted page data in the display window;

20. A computer readable storage medium storing a computer program for causing a processor to perform the method of displaying an adaptive visual area according to any one of claims 1-14.