Display method and device, electronic equipment and storage medium

Abstract

The application provides a display method and device, electronic equipment and storage medium. The method comprises the following steps: obtaining a page size of a display interface and a picture size of a display picture in the display interface; determining a first width-height ratio of the display interface, a second width-height ratio of the display picture, and a scaling ratio between the first width-height ratio and the second width-height 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 ratio and the page size; and displaying a target display picture in a second display page in the display interface, the display picture size of the target display picture and the display page size of the second display page being the same as the page size. The method improves the current display mode and solves the page blanking problem.

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, displaying related images on display interfaces of different types and sizes has become increasingly common, and has also demonstrated its value in many commercial fields, such as conference and exhibition halls, park management, urban traffic management centers, corporate 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 generally determines 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 design drawing size, 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] Obtain the page size of the display interface and the screen size of the display screen in the display interface;

[0008] Determining, 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 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;

[0009] Displaying 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;

[0010] The target display screen is displayed in the second display page in the display interface. The second display page is the page after the first display page is scaled according to the scaling ratio. The target display screen is the page after the display screen is scaled 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.

[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 a display screen layout mode, wherein the display screen layout mode includes a percentage layout mode or a flex layout mode;

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

[0014] In this 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 based on the page size and the screen size includes:

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

[0016] Determining a second aspect ratio of the display image according to the image size;

[0017] 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 of the first aspect ratio and the second aspect ratio;

[0018] Determine the scaling factor representing the width ratio or height ratio based on the target aspect ratio.

[0019] In this application, the display screen is displayed on 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 the 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 this application, the target display screen is displayed on the second display page in the display interface, including:

[0024] Zooming out the first display page according to the zoom ratio to obtain a second display page;

[0025] The display image in the second display page is adjusted to display the target display image 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 target scaling elements in the display image, where the target scaling elements include elements that are not to be adjusted and elements that are to be adjusted by user-defined means in the display image;

[0028] According to the scaling ratio, the target size of the target scaling element is determined;

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

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

[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, 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 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;

[0036] A first display module is configured to 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;

[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 the page obtained by scaling the first display page according to the scaling ratio. The target display screen is the 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.

[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 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, the display screen size of the target display screen and the display page size of the second display page The method of making the size of the first display page the same as the page size is 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. According to the size comparison result of the first aspect ratio of the display interface and the second aspect ratio of the display screen, the scaling ratio is selected as the height ratio or width ratio of the display interface and 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. The solution is easy to implement, 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 flowchart 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 illustrate specific embodiments of the present application, which will be described in more detail below. These drawings and the textual description are not intended to limit the scope of the present application in any way, but rather to illustrate the concepts of the present application to those skilled in the art by reference to specific embodiments. DETAILED DESCRIPTION

[0049] Exemplary embodiments will be described in detail herein, with examples illustrated in the accompanying drawings. In the following description, when referring to the drawings, identical numerals in different figures represent identical or similar elements, unless otherwise indicated. The embodiments described in the following exemplary embodiments are not intended to represent all embodiments consistent with the present application. Rather, they are merely examples of apparatus and methods consistent with certain aspects of the present application, as detailed in the appended claims.

[0050] In the prior art, when displaying an image 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 within the interface.

[0051] In order to solve the above problems, the display method, device, electronic device and storage medium provided by 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 also 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 determining the layout method and scaling ratio, 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, thereby achieving 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 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. The solution has a universal effect.

[0052] The following specific embodiments describe in detail the technical solution of the present application and how the technical solution of the present application solves the above-mentioned technical problems. 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, mobile phone, tablet, or other device. This embodiment does not impose any particular limitation on the implementation method of the execution entity, as long as the execution entity can obtain the page size of the display interface and the screen size of the display screen in the display interface; determine 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 based on 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 based on 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 obtained by scaling the first display page based on the scaling ratio, the target display screen being a screen obtained by scaling the display screen based on 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 and add visual effects such as color to web pages seen by the human eye.

[0056] scale() can refer to a CSS function that is used to modify the size of an element. It can enlarge or reduce the element by the scaling value defined in the form of a vector, 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 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 of the text within the current object, and if the font size of the text within the current line is not set artificially, the value of em is not fixed, and is inherited from the font size of the parent element.

[0060] rem (root em) can refer to one of CSS units, which represents the unit relative to the font size of the HTML root element. Assuming that the font size of the root element html is 100px, then 1rem = 100px.

[0061] Percentage layout, also known as fluid layout or non-fixed pixel layout, can refer to changing the originally fixed size and position of the element to a percentage of the screen and parent element, and changing the fixed px to em which changes with the size of the parent element or rem which changes with the font size of the root element, so that the effect can be presented very similar on devices with similar resolutions.

[0062] Flex layout, also known as elastic layout or elastic box layout, uses display:flex in CSS. The element with display:flex becomes an elastic box, which automatically scales with the change of resolution, so that the webpage can be displayed very similar on devices with different resolutions.

[0063] Figure 1 The flowchart of the display method provided by the embodiments of the present application is shown. The execution subject of the method can be a server, as shown in the figure, the method can include: Figure 1

[0064] S101, acquiring the page size of the display interface and the picture size of the display picture 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 so that the width of the page size is 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 a display screen layout mode, wherein the display screen layout mode includes a percentage layout mode or a flex layout mode;

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

[0070] In an embodiment of the present application, by using a percentage layout method or a flex layout method for displaying screen layout, the display page size can be adjusted in the method steps involved later, and the outermost elements of the page can be adjusted at the same time, 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 a 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 inner 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 to not 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 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.

[0074] Among them, the first aspect ratio of the display interface can 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 can 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 scaling 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] Determining a first aspect ratio of the display interface according to the page size;

[0077] Determining a second aspect ratio of the display image according to the image size;

[0078] 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 of the first aspect ratio and the second aspect ratio;

[0079] Determine the scaling factor representing the width ratio or height ratio based on the target aspect ratio.

[0080] The scaling ratio may refer to the ratio of scaling adjustment of the page elements. The scaling ratio is determined according to the target aspect ratio, and then the size of the page elements is adjusted to obtain a result that the page elements fill 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 can refer to the page obtained by scaling the page elements according to the scaling ratio and 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 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 layout and style adaptation of the first display page elements.

[0083] In the embodiment of the present application, the display screen is displayed on the first display page in the display interface, including:

[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 the 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 can refer to the width of the outermost element in the first display page, and the height of the first display page can 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 the target display screen 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 both the same as the page size.

[0089] Among them, the target display screen can refer to the screen obtained by shrinking the screen displayed in the first display page. Since the second display page is the page after 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 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] In the embodiment of the present application, displaying the target display screen on the second display page in the display interface includes:

[0091] Zooming out the first display page according to the zoom ratio to obtain a second display page;

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

[0093] Among them, according to the scaling 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 scaling ratio, which 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 that exceeds the display interface returns to normal, and the target display screen obtained 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 image on the second display page to display the target display image on the second display page includes:

[0095] Determine target scaling elements in the display image, where the target scaling elements include elements that are not to be adjusted and elements that are to be adjusted by user-defined means in the display image;

[0096] According to the scaling ratio, the target size of the target scaling element is determined;

[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 determined 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 scripts to draw graphics. It can be used to draw charts, create picture compositions, or create simple animations. In the 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 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 image, 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.

[0103] Among them, configuring the ignore parameter, the ignore parameter is used to receive a pre-configured ignore array, and 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. Thus, after the scaling process is completed, the ignore array can be received and read, the target scaling element can be further scaled, and the element size of the target scaling element can be restored.

[0104] The display method provided by the present application obtains the page size of the display interface and the screen size of the display screen in the display interface by being applied to the display interface; determines 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; displays 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; displays 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, and the target display screen being a page obtained by scaling the first display page according to the scaling ratio. The scaling process is performed on 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, which solves 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 with the scaling of the first display page and the second display page, so that the element layout and style are adapted to meet the display screen requirements. This method can be applied to the display interface of the task size, and is universal and flexible. After being encapsulated as a plug-in, it can be installed and used immediately after the project dependency package is installed, without affecting the internal element layout and event hot zone. 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 low code volume, 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 can 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. Use percentage layout or flex layout for the inner elements.

[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: Reduce the enlarged outermost element by a factor equal to the value of the zoom ratio.

[0112] Among them, shrinking the enlarged outermost element can 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 adopt percentage layout and flex layout. Then when this 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, so it is necessary to adopt this display method. 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 width 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 widths, so as long as the widths are consistent, the layout will not be messy. 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 messed up 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 require custom scaling.

[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 the outermost element is scaled, the ignore array is traversed and the elements to be ignored are reversely scaled. The specific method is that if the custom width, height, and scaling ratio are preset in the element object, the corresponding values ​​of the element settings are directly changed. If there is no preset custom value, 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. The 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 perform reverse scaling to prevent this problem.

[0116] Another display method provided by an embodiment of the present application solves the blank space problem by enlarging the outermost elements so that they fill the screen, restoring the originally squeezed or stretched elements to their normal proportions, and then shrinking the outermost elements that exceed the screen size so that they can fill the screen size. The code for implementing 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.

[0118] An acquisition module 301 is configured to acquire a page size of a display interface and a screen size of a display screen in the display interface;

[0119] a determination module 302, configured to 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 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;

[0120] A first display module 303 is configured to 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;

[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 the page obtained by scaling the first display page according to the scaling ratio. The target display screen is the 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.

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

[0123] Obtaining display screen requirements, where the display screen requirements represent requirements for a display screen layout mode, wherein the display screen layout mode includes a percentage layout mode or a flex layout mode;

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

[0125] In the embodiment of the present application, the determining module 302 may also be specifically configured to:

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

[0127] Determining a second aspect ratio of the display image according to the image size;

[0128] 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 of the first aspect ratio and the second aspect ratio;

[0129] Determine the scaling factor representing the width ratio or height ratio based on the target aspect ratio.

[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 the 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] Zooming out the first display page according to the zoom ratio to obtain a second display page;

[0136] The display image in the second display page is adjusted to display the target display image 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 target scaling elements in the display image, where the target scaling elements include elements that are not to be adjusted and elements that are to be adjusted by user-defined means in the display image;

[0139] According to the scaling ratio, the target size of the target scaling element is determined;

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

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

[0145] The electronic device 40 may include one or more processors 401 , one or more computer-readable storage media memories 402 , 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-executable instructions stored in the memory 402, so that the 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. Its implementation principle and technical effects are similar and will not be repeated here in this embodiment.

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

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

[0150] The bus can be an Industry Standard Architecture (ISA) bus, a Peripheral Component Interconnect (PCI) bus, or an Extended Industry Standard Architecture (EISA) bus. Buses can be classified into address buses, data buses, and control buses. For ease of illustration, the buses in the drawings of this application are not limited to just one bus or just one type of bus.

[0151] In some embodiments, a computer program product is further provided, comprising a computer program or instructions, which implement the steps in any one 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 and will not be repeated here.

[0153] Those skilled in the art will appreciate that all or part of the steps in the various methods of the above embodiments may be accomplished 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, which stores multiple instructions. 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. This application is intended to cover any variations, uses, or adaptations of the present application that follow the general principles of the present application and include common knowledge or customary techniques in the art not disclosed herein. The description and examples are to be considered as 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 exact structure 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 includes: Acquire the page size of the display interface and the screen size of the display screen in the display interface; determining a first aspect ratio of the display interface according to the page size; determining a second aspect ratio of the display image according to the image size; When the first aspect ratio is greater than the second aspect ratio, the scaling ratio between the first aspect ratio and the second aspect ratio is the height ratio between the display interface and the display screen; when the first aspect ratio is less than the second aspect ratio, the scaling ratio is the width ratio between the display interface and the display screen; Displaying the display screen on 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, and elements in the first display page are restored to a normal ratio along with the first display page, and the style layout is not changed; Displaying a target display screen on a second display page in the display interface, where 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, wherein the display screen size of the target display screen and the display screen size of the second display page are both the same as the page size, so that the target display screen displayed on the second display page fills the display interface and eliminates any blank space on the display interface; The displaying the display screen on 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; 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.

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 displaying of the target display screen on the second display page in the display interface includes: Zooming out the first display page according to the zoom ratio to obtain a second display page; The display image in the second display page is adjusted to display the target display image in the second display page.

4. The method according to claim 3, characterized in that The adjusting the display image in the second display page to display the target display image in the second display page includes: Determining target scaling elements in the display image, where the target scaling elements include elements that are not to be adjusted and elements that are to be customized in the display image; 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.

5. The method according to claim 4, characterized in that Before determining the target zoom element in the display image, the method further includes: Configure the 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 image.

6. A display device, characterized in that: Applied to the display interface, including: An acquisition module, configured 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 a first aspect ratio of the display interface based on the page size; and determine a second aspect ratio of the display screen based on the screen size; when the first aspect ratio is greater than the second aspect ratio, a scaling ratio between the first aspect ratio and the second aspect ratio is a height ratio between 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 between the display interface and the display screen; a first display module, configured to display the display screen on 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, and elements in the first display page are restored to a normal ratio as the first display page is restored to a normal ratio without causing a change in style and layout; a second display module, configured to display a 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 page obtained by scaling the display screen according to the scaling ratio, the display screen size of the target display screen and the display screen size of the second display page being the same as the page size, so that the target display screen displayed in the second display page fills the display interface, eliminating any blank space on the display interface; The first display module is specifically used to: 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; 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.

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

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

Images