Display method and device, electronic equipment and storage medium

Abstract

The invention provides a display method and device, electronic equipment and a storage medium. The method comprises the following steps: acquiring a page size of a display interface and a picture size of a display picture in the display interface; determining a first aspect ratio of the display interface, a second aspect ratio of the display picture and a scaling ratio between the first aspect ratio and the second aspect ratio; displaying the display picture in a first display page in the display interface, the first display page being a page determined in the display interface according to the scaling and the page size; and displaying the target display picture in a second display page in the display interface, wherein the display picture size of the target display picture and the display page size of the second display page are the same as the page size. According to the method, the current display mode is improved, and the problem of blank leaving of the page is solved.

Description

Technical Field

[0001] The present application relates to the field of computer technology, and in particular to a display method, device, electronic device and storage medium. Background Art

[0002] With the rapid growth of social informatization, it has become increasingly common to display related images on display interfaces of different types and sizes. At the same time, it also demonstrates its value in many commercial fields, such as conference and exhibition halls, park management, urban traffic management centers, enterprise production monitoring and other important places.

[0003] With the growth of market demand and the diversification of application scenarios, the existing mainstream display interface display method is generally to determine the size of page elements according to the size of the design draft when the front-end page is developed. When the page is placed in a display interface that is inconsistent with the size of the design drawing, there are three display methods. The first is the vw / vh solution. According to the size of the design draft, px is converted into vw and vh according to the screen ratio, and the size of each element is converted; the second is the CSS scale solution, which scales the page according to the actual width or height of the screen; the third is the rem+vw / vh solution, which converts the px of each element into rem during development.

[0004] However, the current display method has problems such as leaving blank space, affecting the layout of elements in the interface, and not being universal. Summary of the invention

[0005] The present application provides a display method, device, electronic device and storage medium to solve the problems of current display methods such as leaving blank space, affecting the layout of elements in the interface, and not having universal applicability.

[0006] In a first aspect, the present application provides a display method, applied to a display interface, comprising:

[0007] Obtaining the page size of the display interface and the screen size of the display screen in the display interface;

[0008] Determine, according to the page size and the screen size, a first aspect ratio of the display interface, a second aspect ratio of the display screen, and a scaling ratio between the first aspect ratio and the second aspect ratio, wherein when the first aspect ratio is greater than the second aspect ratio, the scaling ratio is a height ratio of the display interface and the display screen, and when the first aspect ratio is less than the second aspect ratio, the scaling ratio is a width ratio of the display interface and the display screen;

[0009] Displaying a display image in a first display page in the display interface, where the first display page is a page determined in the display interface according to a zoom ratio and a page size;

[0010] The target display screen is displayed in the second display page in the display interface. The second display page is a page obtained by scaling the first display page according to the scaling ratio. The target display screen is a page obtained by scaling the display screen according to the scaling ratio. The display screen size of the target display screen and the display page size of the second display page are the same as the page size.

[0011] In the present application, before obtaining the page size of the display interface and the screen size of the display screen in the display interface, the method further includes:

[0012] Obtaining display screen requirements, where the display screen requirements represent requirements for display screen layout modes, wherein the display screen layout modes include percentage layout modes or flex layout modes;

[0013] Configure the display screens in the display interface according to the display screen layout mode.

[0014] In the present application, determining a first aspect ratio of the display interface, a second aspect ratio of the display screen, and a scaling ratio between the first aspect ratio and the second aspect ratio according to the page size and the screen size includes:

[0015] Determine a first aspect ratio of the display interface according to the page size;

[0016] Determine a second aspect ratio of the displayed picture according to the picture size;

[0017] Comparing the first aspect ratio and the second aspect ratio to determine a target aspect ratio, the target aspect ratio being the aspect ratio having a larger ratio between the first aspect ratio and the second aspect ratio;

[0018] Based on the target aspect ratio, a scaling factor representing the width ratio or the height ratio is determined.

[0019] In the present application, a display screen is displayed in the first display page in the display interface, including:

[0020] Divide the width of the page size by the zoom ratio to obtain the width of the first displayed page;

[0021] Divide the height of the page size by the zoom ratio to obtain the height of the first displayed page;

[0022] A first display page is displayed in a display interface, and a display screen is displayed in the first display page, wherein when the scaling ratio represents the height ratio of the display interface and the display screen, the height of the first display page is the same as the height of the display screen, and the width of the first display page is wider than the width of the display interface, and when the scaling ratio represents the width ratio of the display interface and the display screen, the width of the first display page is the same as the width of the display screen, and the height of the first display page is higher than the height of the display interface.

[0023] In the present application, displaying a target display screen in a second display page in a display interface includes:

[0024] According to the zoom ratio, the first display page is reduced to obtain a second display page;

[0025] The display picture in the second display page is adjusted to display the target display picture in the second display page.

[0026] In the present application, adjusting the display screen in the second display page to display the target display screen in the second display page includes:

[0027] Determine a target scaling element in the display screen, where the target scaling element includes an element that is not to be adjusted and an element that is to be adjusted by a user;

[0028] According to the zoom ratio, determine the target size of the target zoom element;

[0029] The target zoom element is displayed in the second display page according to the target size of the target zoom element.

[0030] In the present application, before determining the target zoom element in the display screen, the method further includes:

[0031] Configure the ignore parameter. The ignore parameter is used to receive the pre-configured ignore array. The ignore array includes the target scaling element and the scaling ratio of the target scaling element.

[0032] The ignore array is stored to perform the step of determining the target scaling element in the display screen.

[0033] In a second aspect, the present application provides a display device, including:

[0034] An acquisition module, used to acquire the page size of the display interface and the screen size of the display screen in the display interface;

[0035] a determination module, configured to determine, according to the page size and the screen size, a first aspect ratio of the display interface, a second aspect ratio of the display screen, and a scaling ratio between the first aspect ratio and the second aspect ratio, wherein when the first aspect ratio is greater than the second aspect ratio, the scaling ratio is a height ratio of the display interface and the display screen, and when the first aspect ratio is less than the second aspect ratio, the scaling ratio is a width ratio of the display interface and the display screen;

[0036] A first display module, used to display a display image in a first display page in the display interface, where the first display page is a page determined in the display interface according to a zoom ratio and a page size;

[0037] The second display module is used to display the target display screen in the second display page in the display interface. The second display page is a page that is scaled according to the zoom ratio of the first display page. The target display screen is a page that is scaled according to the zoom ratio. The display screen size of the target display screen and the display page size of the second display page are the same as the page size.

[0038] In a third aspect, the present application provides an electronic device, comprising: a processor, and a memory communicatively connected to the processor;

[0039] Memory stores computer-executable instructions;

[0040] The processor executes the computer-executable instructions stored in the memory to implement the method of the present application.

[0041] In a fourth aspect, the present application provides a computer-readable storage medium, in which computer-executable instructions are stored. When the computer-executable instructions are executed by a processor, they are used to implement the method of the present application.

[0042] The display method, device, electronic device and storage medium provided by the present application obtain the page size of the display interface and the screen size of the display screen in the display interface; determine the first aspect ratio of the display interface, the second aspect ratio of the display screen, and the scaling ratio between the first aspect ratio and the second aspect ratio according to the page size and the screen size, wherein when the first aspect ratio is greater than the second aspect ratio, the scaling ratio is the height ratio of the display interface and the display screen, and when the first aspect ratio is less than the second aspect ratio, the scaling ratio is the width ratio of the display interface and the display screen; display the display screen in a first display page in the display interface, the first display page being a page determined in the display interface according to the scaling ratio and the page size; display a target display screen in a second display page in the display interface, the second display page being a page after scaling the first display page according to the scaling ratio, the target display screen being a screen after scaling the display screen according to the scaling ratio, the display screen size of the target display screen and the display page size of the second display page The method adopts a method for making the size of the first display page the same as the page size, based on calculating the first aspect ratio of the page size of the display interface and the second aspect ratio of the screen size of the display screen in the display interface, and selecting the scaling ratio as the height ratio or width ratio of the display interface and the display screen according to the size comparison result of the first aspect ratio of the display interface and the second aspect ratio of the display screen. After determining the scaling ratio, the display screen displayed in the first display page is processed to achieve the result of adapting to the first display page. At this time, the elements in the first display page return to normal proportion as the first display page recovers, and the style layout will not change. Therefore, the element layout and style of the first display page are adapted normally, but there is blank space. For the blank space, the first display page is processed according to the scaling ratio to obtain the second display page. At this time, the size of the second display page is consistent with the page size of the display interface, so that the target display screen displayed in the second display page can fill the display interface, thereby eliminating the blank space of the display interface and the solution is easy to implement, which meets the structural layout of the elements in the interface and has a universal effect. BRIEF DESCRIPTION OF THE DRAWINGS

[0043] The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the present application and, together with the description, serve to explain the principles of the present application.

[0044] Figure 1 A schematic diagram of a flow chart of a display method provided in an embodiment of the present application;

[0045] Figure 2 A schematic diagram of another display method provided in an embodiment of the present application;

[0046] Figure 3 A schematic diagram of the structure of a display device provided in an embodiment of the present application;

[0047] Figure 4 A schematic diagram of the structure of an electronic device provided in an embodiment of the present application.

[0048] The above drawings have shown clear embodiments of the present application, which will be described in more detail later. These drawings and text descriptions are not intended to limit the scope of the present application in any way, but to illustrate the concept of the present application to those skilled in the art by referring to specific embodiments. DETAILED DESCRIPTION

[0049] Exemplary embodiments will be described in detail herein, examples of which are shown in the accompanying drawings. When the following description refers to the drawings, the same numbers in different drawings represent the same or similar elements unless otherwise indicated. The implementations described in the following exemplary embodiments do not represent all implementations consistent with the present application. Instead, they are merely examples of devices and methods consistent with some aspects of the present application as detailed in the appended claims.

[0050] In the prior art, when displaying a picture in a display interface, it is necessary to consider whether the sizes of the design draft and the display interface are compatible. If the sizes are inconsistent, an adapter tool is required to adapt the display. This may cause white edges to appear on the display interface or affect the structure of the elements in the interface.

[0051] In order to solve the above problems, the display method, device, electronic device and storage medium provided in the present application can adopt a percentage layout method or a flex layout method for the display page, so as to adjust the size of the display page, that is, the outermost elements, while the internal elements will be filled or squeezed according to the outermost elements. On the premise of satisfying the layout method, the first aspect ratio of the display interface and the second aspect ratio of the display screen are calculated, and then the two are compared in size. According to the size comparison result, the scaling ratio is determined as the height ratio or width ratio of the display interface and the display screen. After the layout method and scaling ratio are determined, the display page is processed, that is, the width and height of the page size are first divided by the scaling ratio For example, the width and height of the first display page are obtained, thereby satisfying that the width or height of the first display page is consistent with the display screen, and the other size condition exceeds the display interface. At this time, the structure of the elements in the first display page can be kept unchanged, and the style layout will not be disordered, so as to achieve the effect of element layout and style adaptation of the first display page. Then, by reducing the width and height of the first display page, the second display page is obtained, and the width and height of the second display page are made consistent with the page size. This makes the size of the second display page adapt to the page size, and the structure and style layout of the elements also meet the display screen requirements. At this point, the page blank can be cleared without affecting the element layout in the interface, and the solution has a universal effect.

[0052] The technical solution of the present application and how the technical solution of the present application solves the above-mentioned technical problems are described in detail below with specific embodiments. The following specific embodiments can be combined with each other, and the same or similar concepts or processes may not be repeated in some embodiments. The embodiments of the present application will be described below in conjunction with the accompanying drawings.

[0053] The display method, device, electronic device, and storage medium provided in the embodiments of the present application may be executed by a server, which may be a computer, a mobile phone, a tablet, or other device. This embodiment does not impose any particular restriction on the implementation method of the execution subject, as long as the execution subject can obtain the page size of the display interface and the screen size of the display screen in the display interface; determine the first aspect ratio of the display interface, the second aspect ratio of the display screen, and the scaling ratio between the first aspect ratio and the second aspect ratio according to the page size and the screen size, wherein when the first aspect ratio is greater than the second aspect ratio, the scaling ratio is the height ratio of the display interface and the display screen, and when the first aspect ratio is less than the second aspect ratio, the scaling ratio is the width ratio of the display interface and the display screen; display the display screen in a first display page in the display interface, the first display page being a page determined in the display interface according to the scaling ratio and the page size; display the target display screen in a second display page in the display interface, the second display page being a page obtained by scaling the first display page according to the scaling ratio, the target display screen being a screen obtained by scaling the display screen according to the scaling ratio, and the display screen size of the target display screen and the display page size of the second display page being the same as the page size.

[0054] First, some of the nouns involved are explained below.

[0055] CSS (Cascading Style Sheets) is a computer language used to express the style of HTML (HyperTextMarkup Language) documents. Browsers recognize CSS styles to add visual effects such as color to web pages seen by human eyes.

[0056] scale() can refer to a CSS function that is used to modify the size of an element. The element can be enlarged or reduced by a scaling value defined in vector form, and different scaling values ​​can be set in different directions.

[0057] px can refer to CSS pixels, which is the most commonly used unit in CSS. Without scaling, 1px = 1dip, and the conversion relationship is dip = px / scale.

[0058] vw / vh (viewpoint width / viewpoint height) is one of the CSS units, which can refer to the width / height of the viewport.

[0059] em is a relative length unit, which can refer to the font size relative to the text in the current object. If the font size of the current inline text is not set manually, then the value of em is not fixed relative to the default font size of the browser and will inherit the font size of the parent element.

[0060] rem (root em) may refer to one of the CSS units, indicating a unit relative to the font size (font-size) of the HTML root element. Assuming that the font-size of the root element html is 100px, 1rem=100px.

[0061] Percentage layout, also known as flow layout or non-fixed pixel layout, refers to changing the original fixed-size and fixed-position elements to percentages of the screen and parent elements, and changing fixed px to em that changes with the size of the parent element or rem that changes with the font-size of the root element, so that a very similar effect can be achieved on devices with similar resolutions.

[0062] Flex layout, also known as elastic layout or elastic box layout, will have display:flex in CSS when used. The element with display as flex will become a flexible box, which will automatically scale with the change of resolution, so that the web page can be displayed very similarly on devices with different resolutions.

[0063] Figure 1 This is a flow chart of a display method provided in an embodiment of the present application. The execution subject of this method may be a server, such as Figure 1 As shown, the method may include:

[0064] S101, obtaining a page size of a display interface and a screen size of a display screen in the display interface.

[0065] Among them, the page size of the display interface can refer to the size of the web page displayed on the screen. Usually, a web page contains various elements. In an embodiment of the present application, the web page elements are obtained by using CSS layout technology, and the position of the elements and the page layout are controlled. The element can refer to the whole composed of the start tag (start tag) to the end tag (end tag), and all the codes between them. The element is used to mark the content in the web page. In CSS, elements are divided into three types, including block elements, inline elements (also known as inline elements), and inline block elements (also known as inline block elements). Among them, the width and height of block elements can be directly set, and they occupy a single line by default and are arranged from top to bottom; the width and height of inline elements cannot be directly set, and the size is determined by their content. By default, they are displayed one by one in a line; the width and height of inline block elements can be directly set, and they are displayed one by one in a line by default.

[0066] The screen size of the display screen in the display interface may refer to the size of the design draft. After obtaining the screen size of the display screen in the display interface, the page size of the display interface may be processed based on the size to make the width of the page size consistent with the width of the screen size, thereby restoring the normal proportion of the elements.

[0067] In the embodiment of the present application, before obtaining the page size of the display interface and the screen size of the display screen in the display interface, the method further includes:

[0068] Obtaining display screen requirements, where the display screen requirements represent requirements for display screen layout modes, wherein the display screen layout modes include percentage layout modes or flex layout modes;

[0069] Configure the display screens in the display interface according to the display screen layout mode.

[0070] In an embodiment of the present application, by using a percentage layout method or a flex layout method for display screen layout, the display page size can be adjusted in the method steps involved later, and the outermost elements of the page can also be adjusted, and the internal elements will also be adjusted accordingly with the outermost elements, that is, the element size will be automatically adjusted according to the screen size in the display page.

[0071] If percentage layout is used, when the width of the outermost element is inconsistent with the width of the page size, it will not have a significant impact on the overall layout, because the internal elements will be enlarged or reduced according to the percentage of the width of the outermost element.

[0072] If a flex layout is used, and the width of the outermost element is inconsistent with the width of the page size, it may cause the elements to wrap when arranged horizontally, or change from wrapping to not wrapping. However, this situation can be avoided during development, that is, setting the internal elements not to allow wrapping and to be evenly distributed.

[0073] S102. Determine, based on the page size and the screen size, a first aspect ratio of the display interface, a second aspect ratio of the display screen, and a scaling ratio between the first aspect ratio and the second aspect ratio, wherein when the first aspect ratio is greater than the second aspect ratio, the scaling ratio is a height ratio of the display interface and the display screen, and when the first aspect ratio is less than the second aspect ratio, the scaling ratio is a width ratio of the display interface and the display screen.

[0074] Among them, the first aspect ratio of the display interface may refer to the ratio of the width of the page size of the display interface divided by the height, and the second aspect ratio of the display screen may refer to the ratio of the width of the screen size of the display screen in the display interface divided by the height, that is, the zoom ratio is dynamically set according to the page size of the display interface, so that no matter how the page size of the display interface is changed, the size of the content in the page will be scaled proportionally, and there will be no deformation or misalignment of elements.

[0075] In the embodiment of the present application, determining the first aspect ratio of the display interface, the second aspect ratio of the display screen, and the scaling ratio between the first aspect ratio and the second aspect ratio according to the page size and the screen size includes:

[0076] Determine a first aspect ratio of the display interface according to the page size;

[0077] Determine a second aspect ratio of the displayed picture according to the picture size;

[0078] Comparing the first aspect ratio and the second aspect ratio to determine a target aspect ratio, the target aspect ratio being the aspect ratio having a larger ratio between the first aspect ratio and the second aspect ratio;

[0079] Based on the target aspect ratio, a scaling factor representing the width ratio or the height ratio is determined.

[0080] The scaling ratio may refer to the ratio of scaling adjustment of the page element. The scaling ratio is determined according to the target aspect ratio, and then the size of the page element is adjusted to obtain a result that the page element fills the display interface.

[0081] S103: Display a display image on a first display page in the display interface, where the first display page is a page determined in the display interface according to a zoom ratio and a page size.

[0082] Among them, the first display page may refer to a page obtained by scaling the page elements according to the scaling ratio and the page size so that the page elements fill the display page. At this time, the height or width of the first display page will be stretched, but since its internal elements will be stretched along with the height or width of the first display page, the layout within the first display page will not be changed, thereby achieving the effect of adapting the layout and style of the first display page elements.

[0083] Among them, in the embodiment of the present application, displaying a display screen in the first display page in the display interface includes:

[0084] Divide the width of the page size by the zoom ratio to obtain the width of the first displayed page;

[0085] Divide the height of the page size by the zoom ratio to obtain the height of the first displayed page;

[0086] A first display page is displayed in a display interface, and a display screen is displayed in the first display page, wherein when the scaling ratio represents the height ratio of the display interface and the display screen, the height of the first display page is the same as the height of the display screen, and the width of the first display page is wider than the width of the display interface, and when the scaling ratio represents the width ratio of the display interface and the display screen, the width of the first display page is the same as the width of the display screen, and the height of the first display page is higher than the height of the display interface.

[0087] Among them, the width of the first display page may refer to the width of the outermost element in the first display page, and the height of the first display page may refer to the height of the outermost element in the first display page. In the embodiment of the present application, the size of the first display page obtained by dividing the page size by the scaling ratio can completely fill the display interface. Although there is a situation where the height or width exceeds the display interface, under the premise of adopting a percentage layout or a flex layout, it can be ensured that the layout of elements in the first display page can remain normal without confusion, and blank space on the page is prevented.

[0088] S104. Display a target display screen in a second display page in the display interface. The second display page is a page obtained by scaling the first display page according to the scaling ratio. The target display screen is a page obtained by scaling the display screen according to the scaling ratio. The display screen size of the target display screen and the display page size of the second display page are both the same as the page size.

[0089] Among them, the target display screen can refer to the screen obtained by scaling down the screen displayed in the first display page. Since the second display page is a page obtained by scaling the first display page according to the scaling ratio, the size of the second display page is consistent with the page size. When scaling, all elements in the second display page are processed, thereby also making the height or width of the display screen size of the target display screen that exceeds the interface in the aforementioned steps return to normal and be consistent with the page size of the display interface, that is, the display screen size of the target display screen and the display page size of the second display page are the same as the page size.

[0090] Among them, in the embodiment of the present application, displaying the target display screen in the second display page in the display interface includes:

[0091] According to the zoom ratio, the first display page is reduced to obtain a second display page;

[0092] The display picture in the second display page is adjusted to display the target display picture in the second display page.

[0093] Among them, according to the zoom ratio, the first display page is reduced, and the second display page can refer to the size obtained by multiplying the size of the first display page in the aforementioned step by the zoom ratio, that is, the size of the second display page, and the display screen in the second display page is scaled along with the second display page, so that the part exceeding the display interface returns to normal, and the obtained target display screen is consistent with the page size of the display interface. The target display screen can be displayed normally, and the size of the internal elements can also be consistent with the screen size.

[0094] In the embodiment of the present application, adjusting the display screen in the second display page to display the target display screen in the second display page includes:

[0095] Determine a target scaling element in the display screen, where the target scaling element includes an element that is not to be adjusted and an element that is to be adjusted by a user;

[0096] According to the zoom ratio, determine the target size of the target zoom element;

[0097] The target zoom element is displayed in the second display page according to the target size of the target zoom element.

[0098] Among them, the target zoom element may refer to the elements that are not adjusted and the elements that are custom adjusted according to the ignore array described later, such as chart elements, canvas elements, map elements, etc. The canvas element may refer to an HTML element that uses a script to draw graphics. It can be used to draw charts, make picture compositions, or make simple animations. In an embodiment of the present application, after the page is zoomed, these elements may be distorted or the event hot zone may be offset. Therefore, these elements are pre-configured in the ignore array, and the target zoom element is further restored after the zoom process is completed.

[0099] For elements that are not adjusted, the scaling ratio may refer to the inverse of the scaling ratio of the scaling process in the aforementioned step. For elements that are custom adjusted, the scaling ratio may refer to the custom scaling ratio pre-configured in the ignore array.

[0100] In the embodiment of the present application, before determining the target zoom element in the display screen, the method further includes:

[0101] Configure the ignore parameter. The ignore parameter is used to receive the pre-configured ignore array. The ignore array includes the target scaling element and the scaling ratio of the target scaling element.

[0102] The ignore array is stored to perform the step of determining the target scaling element in the display screen.

[0103] Among them, the ignore parameter is configured, and the ignore parameter is used to receive a pre-configured ignore array. The ignore array includes the target scaling element and the scaling ratio of the target scaling element, which can mean that when the page size of the display interface is obtained, the ignore parameter configuration is performed synchronously. Therefore, after the scaling process is completed, the ignore array can be received and read, the target scaling element is further scaled, and the element size of the target scaling element is restored.

[0104] The display method provided by the present application is applied to a display interface to obtain the page size of the display interface and the screen size of the display screen in the display interface; according to the page size and the screen size, a first aspect ratio of the display interface, a second aspect ratio of the display screen, and a scaling ratio between the first aspect ratio and the second aspect ratio are determined, wherein when the first aspect ratio is greater than the second aspect ratio, the scaling ratio is the height ratio of the display interface and the display screen, and when the first aspect ratio is less than the second aspect ratio, the scaling ratio is the width ratio of the display interface and the display screen; the display screen is displayed in a first display page in the display interface, the first display page being a page determined in the display interface according to the scaling ratio and the page size; the target display screen is displayed in a second display page in the display interface, the second display page being a page after scaling the first display page according to the scaling ratio, the target display screen being a page after scaling the first display page according to the scaling ratio, The scaling process is used to scale the display screen. The display screen size of the target display screen and the display page size of the second display page are the same as the page size. Thus, the size of the target display screen displayed in the second display page is consistent with the page size of the display interface, solving the problem of blank space in the current display method. The use of percentage layout or flex layout can prevent the layout of elements in the interface from changing as the first display page and the second display page are scaled, so that the layout and style of elements are adapted to meet the display screen requirements. This method can be applied to display interfaces of task sizes, has universality and flexibility, and can be packaged as a plug-in to achieve installation and use after the project dependency package is installed, without affecting the internal element layout and event hotspots. In the process of implementing the entire method, there is no need to convert or convert CSS size units, and it can be completed with a low amount of code, so it is easy to use.

[0105] Figure 2 A flow chart of another display method provided in an embodiment of the present application is shown as follows: Figure 2 As shown, the method may include:

[0106] S201. Obtain the width and height of the screen, and determine the scaling ratio by comparing the aspect ratio of the design drawing with the aspect ratio of the screen. If the former is greater than the latter, the scaling ratio is screen width / design drawing width; otherwise, the scaling ratio is screen height / design drawing height.

[0107] Among them, obtaining the width and height of the screen can refer to using clientHeigh=document.documentElement.clientHeight in front-end development to obtain the height of the visible area, and the obtained height of the visible area is the height of the screen, and using clientWidth=document.documentElement.clientWidth to obtain the width of the visible area, and the obtained width of the visible area is the width of the screen.

[0108] The scaling ratio may refer to the scaling ratio of the outermost element, which may be confirmed by using currScale=(clientWidth / clientHeight<dw / dh)?(clientWidth / dw):(clientHeight / dh), where currScale is the scaling ratio, dw is the width of the design, and dh is the height of the design.

[0109] S202. Set the width and height of the outermost element, where the width is the screen width / zoom ratio, and the height is the screen height / zoom ratio. The inner elements use percentage layout or flex layout.

[0110] Among them, setting the width and height of the outermost element can refer to setting the width of the outermost element to dom.style.width = `${clientWidth / currScale}px`, and setting the height of the outermost element to dom.style.height = `${clientHeight / currScale}px`. At this time, the entire page will fill the screen, among which dom refers to the outermost element that needs to be adapted.

[0111] S203, reducing the enlarged outermost element, and the reduction multiple is the value of the scaling ratio.

[0112] Among them, shrinking the enlarged outermost element may refer to using the scale() method of CSS, dom.style.transform = `scale(${currScale})` to shrink the DOM element enlarged in the previous step, that is, the outermost element, so that the element just fills the screen.

[0113] Among them, in the embodiment of the present application, regarding the implementation steps of the display method, the following are examples. For example: the width of the design drawing is 7 and the height is 4, the width of the screen is 5 and the height is 4, and a large screen is developed according to the layout of the design drawing. During development, it is necessary to use percentage layout and flex layout. Then when the page is displayed on the screen, the elements of the percentage layout will squeeze or stretch their own width and height according to the width and height of the current screen, and the elements of the flex layout will wrap and the style will be disordered. Therefore, this display method needs to be adopted. The first step is to determine the zoom ratio. According to the above method, the zoom ratio is screen width / design drawing width (5 / 7); the second step is to multiply the width of the outermost element in the current screen by 7 / 5 and the height by 7 / 5, that is, reverse scaling. After reverse scaling, the width of the outermost element is equal to the width of the design drawing, and the height will exceed the screen. When the outermost element is rendered on the screen, the width will default to the screen width, and the height will be expanded according to the content inside. Since the width is the same as the design drawing at this time, the height will be larger than the screen content. Figure 1In this way, the elements that were squeezed or stretched will return to their normal proportions, and the elements of the flex layout will not be squeezed to the line break. The disorder of style layout is mainly caused by inconsistent width, so as long as the width is consistent, the layout will not be disordered. At this time, the height has been stretched, and the height of the elements inside can be stretched accordingly, and the layout will not be disordered due to the height change. At this point, the layout and style adaptation of the page elements are no longer a problem, but the height exceeds the screen, so the third step is required, using dom.style.transform = `scale(${scaling ratio})`. This step will reduce the dom element (that is, the outermost element) enlarged in the second step by 5 / 7 times. At this time, the width and height of the outermost element are exactly equal to the width and height of the screen, that is, the white edge is eliminated.

[0114] S204: Reversely scale the elements that do not need to be scaled or the elements that need to be scaled to a custom size.

[0115] Among them, reverse scaling can mean that due to the use of CSS transform method when the page is scaled and adapted, the internal elements of the element using this method will be scaled. If some elements are of fixed size and do not want to be scaled, an ignore parameter is provided in the scaling method, which can receive an array. The array stores the element objects that need to be ignored for scaling. The object stores the element Class identifier, custom width, height, custom scaling ratio, custom font size and other information. In the function body, after scaling the outermost element, the ignore array is traversed to reverse scale the elements to be ignored. Specifically, if the element object has a preset custom width, height, and scaling ratio, the corresponding values ​​of the element settings are directly changed. If no custom values ​​are preset, it is reversely scaled, that is, transform = `scale(${1 / currScale})`, to avoid distortion of some charts or canvas elements on the page due to scaling and event hot zone offset. Event hot zone offset can refer to the fact that the click event of the map is realized by clicking the overlay on the map, and the overlay completely overlaps with the effective area, so the experience of clicking the overlay is the same as clicking the effective area, but when the map element is scaled, the size of the overlay will not change, so the click hot zone will offset. Therefore, the ignore element function is provided to reverse scale to prevent this problem.

[0116] Another display method provided by an embodiment of the present application enlarges the outermost elements to fill the screen, restores the originally squeezed or stretched elements to a normal proportion, and then reduces the outermost elements that exceed the screen size to fill the screen size, thereby solving the blank space problem. The code to implement this method is simple and easy to implement.

[0117] Figure 3 This is a schematic diagram of the structure of the display device provided in the embodiment of the present application. Figure 3 As shown, the display device 30 includes: an acquisition module 301, a determination module 302, a first display module 303, and a second display module 304. Among them:

[0118] The acquisition module 301 is used to acquire the page size of the display interface and the screen size of the display screen in the display interface;

[0119] A determination module 302 is used to determine, according to the page size and the screen size, a first aspect ratio of the display interface, a second aspect ratio of the display screen, and a scaling ratio between the first aspect ratio and the second aspect ratio, wherein when the first aspect ratio is greater than the second aspect ratio, the scaling ratio is a height ratio of the display interface and the display screen, and when the first aspect ratio is less than the second aspect ratio, the scaling ratio is a width ratio of the display interface and the display screen;

[0120] A first display module 303, used to display a display image in a first display page in the display interface, where the first display page is a page determined in the display interface according to a zoom ratio and a page size;

[0121] The second display module 304 is used to display the target display screen in the second display page in the display interface. The second display page is a page that is scaled according to the zoom ratio of the first display page. The target display screen is a page that is scaled according to the zoom ratio. The display screen size of the target display screen and the display page size of the second display page are the same as the page size.

[0122] In the embodiment of the present application, the acquisition module 301 may also be specifically used for:

[0123] Obtaining display screen requirements, where the display screen requirements represent requirements for display screen layout modes, wherein the display screen layout modes include percentage layout modes or flex layout modes;

[0124] Configure the display screens in the display interface according to the display screen layout mode.

[0125] In the embodiment of the present application, the determination module 302 may also be specifically used for:

[0126] Determine a first aspect ratio of the display interface according to the page size;

[0127] Determine a second aspect ratio of the displayed picture according to the picture size;

[0128] Comparing the first aspect ratio and the second aspect ratio to determine a target aspect ratio, the target aspect ratio being the aspect ratio having a larger ratio between the first aspect ratio and the second aspect ratio;

[0129] Based on the target aspect ratio, a scaling factor representing the width ratio or the height ratio is determined.

[0130] In the embodiment of the present application, the first display module 303 may also be specifically used for:

[0131] Divide the width of the page size by the zoom ratio to obtain the width of the first displayed page;

[0132] Divide the height of the page size by the zoom ratio to obtain the height of the first displayed page;

[0133] A first display page is displayed in a display interface, and a display screen is displayed in the first display page, wherein when the scaling ratio represents the height ratio of the display interface and the display screen, the height of the first display page is the same as the height of the display screen, and the width of the first display page is wider than the width of the display interface, and when the scaling ratio represents the width ratio of the display interface and the display screen, the width of the first display page is the same as the width of the display screen, and the height of the first display page is higher than the height of the display interface.

[0134] In the embodiment of the present application, the second display module 304 may also be specifically used for:

[0135] According to the zoom ratio, the first display page is reduced to obtain a second display page;

[0136] The display picture in the second display page is adjusted to display the target display picture in the second display page.

[0137] In the embodiment of the present application, the second display module 304 may also be specifically used for:

[0138] Determine a target scaling element in the display screen, where the target scaling element includes an element that is not to be adjusted and an element that is to be adjusted by a user;

[0139] According to the zoom ratio, determine the target size of the target zoom element;

[0140] The target zoom element is displayed in the second display page according to the target size of the target zoom element.

[0141] In the embodiment of the present application, the second display module 304 may also be specifically used for:

[0142] Configure the ignore parameter. The ignore parameter is used to receive the pre-configured ignore array. The ignore array includes the target scaling element and the scaling ratio of the target scaling element.

[0143] The ignore array is stored to perform the step of determining the target scaling element in the display screen.

[0144] Figure 4This is a schematic diagram of the structure of an electronic device provided in an embodiment of the present application. Figure 4 As shown, the electronic device 40 includes:

[0145] The electronic device 40 may include a processor 401 with one or more processing cores, a memory 402 with one or more computer-readable storage media, a communication component 403 and other components. The processor 401 , the memory 402 and the communication component 403 are connected via a bus 404 .

[0146] In a specific implementation process, at least one processor 401 executes the computer execution instructions stored in the memory 402, so that at least one processor 401 executes the above display method.

[0147] The specific implementation process of the processor 401 can be found in the above method embodiment, and its implementation principle and technical effect are similar, so this embodiment will not be repeated here.

[0148] In the above Figure 4 In the illustrated embodiment, it should be understood that the processor may be a central processing unit (CPU), or other general-purpose processors, digital signal processors (DSP), application-specific integrated circuits (ASIC), etc. A general-purpose processor may be a microprocessor or any conventional processor. The steps of the method disclosed in the invention may be directly implemented as being executed by a hardware processor, or may be executed by a combination of hardware and software modules in the processor.

[0149] The memory may include a high-speed memory (Random Access Memory, RAM), and may also include a non-volatile memory (Non-volatile Memory, NVM), such as at least one disk memory.

[0150] The bus may be an Industry Standard Architecture (ISA) bus, a Peripheral Component Interconnect (PCI) bus, or an Extended Industry Standard Architecture (EISA) bus, etc. The bus may be divided into an address bus, a data bus, a control bus, etc. For ease of representation, the bus in the drawings of the present application is not limited to only one bus or one type of bus.

[0151] In some embodiments, a computer program product is also proposed, including a computer program or instructions, which implement the steps in any of the above display methods when executed by a processor.

[0152] The specific implementation of the above operations can be found in the previous embodiments, which will not be described in detail here.

[0153] A person of ordinary skill in the art will appreciate that all or part of the steps in the various methods of the above embodiments may be completed by instructions, or by controlling related hardware through instructions. The instructions may be stored in a computer-readable storage medium and loaded and executed by a processor.

[0154] To this end, an embodiment of the present application provides a computer-readable storage medium, in which multiple instructions are stored. The instructions can be loaded by a processor to execute the steps in any display method provided in the embodiment of the present application.

[0155] The storage medium may include: a read-only memory (ROM), a random access memory (RAM), a magnetic disk or an optical disk, etc.

[0156] According to one aspect of the present application, a computer program product or a computer program is provided. The computer program product or the computer program comprises computer instructions stored in a computer-readable storage medium.

[0157] Since the instructions stored in the storage medium can execute the steps in any display method provided in the embodiments of the present application, the beneficial effects that can be achieved by any display method provided in the embodiments of the present application can be achieved. Please refer to the previous embodiments for details and will not be repeated here.

[0158] Those skilled in the art will readily appreciate other embodiments of the present application after considering the specification and practicing the invention disclosed herein. The present application is intended to cover any modification, use or adaptation of the present application, which follows the general principles of the present application and includes common knowledge or customary techniques in the art that are not disclosed in the present application. The specification and examples are intended to be exemplary only, and the true scope and spirit of the present application are indicated by the following claims.

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

Claims

1. A display method, characterized in that: Applied to a display interface, the method comprises: Acquire the page size of the display interface and the screen size of the display screen in the display interface; Determining, according to the page size and the screen size, a first aspect ratio of the display interface, a second aspect ratio of the display screen, and a scaling ratio between the first aspect ratio and the second aspect ratio, wherein when the first aspect ratio is greater than the second aspect ratio, the scaling ratio is a height ratio of the display interface to the display screen, and when the first aspect ratio is less than the second aspect ratio, the scaling ratio is a width ratio of the display interface to the display screen; Displaying the display screen in a first display page in the display interface, where the first display page is a page determined in the display interface according to the zoom ratio and the page size; A target display screen is displayed in a second display page in the display interface, wherein the second display page is a page obtained by scaling the first display page according to the scaling ratio, and the target display screen is a page obtained by scaling the display screen according to the scaling ratio, and the display screen size of the target display screen and the display page size of the second display page are both the same as the page size.

2. The method according to claim 1, characterized in that Before obtaining the page size of the display interface and the screen size of the screen displayed in the display interface, the method further includes: Obtaining a display screen requirement, where the display screen requirement represents a requirement for a layout mode of the display screen, wherein the display screen layout mode includes a percentage layout mode or a flex layout mode; According to the display screen layout mode, the display screen in the display interface is configured.

3. The method according to claim 1, characterized in that The determining, according to the page size and the screen size, a first aspect ratio of the display interface, a second aspect ratio of the display screen, and a scaling ratio between the first aspect ratio and the second aspect ratio includes: Determining a first aspect ratio of the display interface according to the page size; Determining a second aspect ratio of the display picture according to the picture size; comparing the first aspect ratio and the second aspect ratio to determine a target aspect ratio, the target aspect ratio being the larger aspect ratio between the first aspect ratio and the second aspect ratio; According to the target aspect ratio, a scaling ratio representing the width ratio or the height ratio is determined.

4. The method according to claim 1, characterized in that: The displaying the display screen in the first display page in the display interface includes: Dividing the width of the page size by the scaling ratio to obtain the width of the first display page; Dividing the height of the page size by the scaling ratio to obtain the height of the first display page; The first display page is displayed in the display interface, and the display screen is displayed in the first display page, wherein, when the scaling ratio represents the height ratio of the display interface and the display screen, the height of the first display page is the same as the height of the display screen, and the width of the first display page is wider than the width of the display interface, and when the scaling ratio represents the width ratio of the display interface and the display screen, the width of the first display page is the same as the width of the display screen, and the height of the first display page is higher than the height of the display interface.

5. The method according to claim 1, characterized in that The displaying of the target display screen in the second display page in the display interface includes: According to the zoom ratio, the first display page is reduced to obtain a second display page; The display picture in the second display page is adjusted to display the target display picture in the second display page.

6. The method according to claim 1, characterized in that The adjusting the display picture in the second display page to display the target display picture in the second display page includes: Determine a target scaling element in the display picture, where the target scaling element includes an element that is not to be adjusted and an element that is to be adjusted by a user; Determining a target size of the target scaling element according to the scaling ratio; The target zoom element is displayed in the second display page according to the target size of the target zoom element.

7. The method according to claim 6, characterized in that Before determining the target zoom element in the display picture, the method further includes: Configure an ignore parameter, where the ignore parameter is used to receive a pre-configured ignore array, where the ignore array includes the target scaling element and the scaling ratio of the target scaling element; The ignore array is stored to execute the step of determining the target scaling element in the display picture.

8. A display device, characterized in that: include: An acquisition module, used to acquire the page size of the display interface and the screen size of the display screen in the display interface; a determination module, configured to determine, according to the page size and the screen size, a first aspect ratio of the display interface, a second aspect ratio of the display screen, and a scaling ratio between the first aspect ratio and the second aspect ratio, wherein when the first aspect ratio is greater than the second aspect ratio, the scaling ratio is a height ratio of the display interface and the display screen, and when the first aspect ratio is less than the second aspect ratio, the scaling ratio is a width ratio of the display interface and the display screen; A first display module, configured to display the display image in a first display page in the display interface, wherein the first display page is a page determined in the display interface according to the zoom ratio and the page size; A second display module is used to display a target display screen in a second display page in the display interface, wherein the second display page is a page obtained by scaling the first display page according to the scaling ratio, and the target display screen is a page obtained by scaling the display screen according to the scaling ratio, and the display screen size of the target display screen and the display page size of the second display page are both the same as the page size.

9. An electronic device, characterized in that: include: A processor, and a memory communicatively connected to the processor; The memory stores computer-executable instructions; The processor executes the computer-executable instructions stored in the memory to implement the method according to any one of claims 1 to 7.

10. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores computer-executable instructions, and when the computer-executable instructions are executed by a processor, they are used to implement the display method according to any one of claims 1 to 7.

Images