Interface adaptation method, device, computer equipment and computer readable storage medium

Abstract

The present application provides an interface adaptation method, device, computer equipment and computer-readable storage medium, which belongs to the field of computer technology. The method includes: obtaining an initial interface image and an image pixel size of the initial interface image; determining the device pixel size of the initial interface image when displayed on the target display device according to the image pixel size of the initial interface and the device pixel density of the target display device; determining the target pixel size of each element when displayed on the target display device according to the image pixel size, the initial pixel size of each element in the initial interface image and the screen size of the target display device; determining the target size of each font according to the device pixel size and the initial size of each font in the initial interface image; adapting the initial interface image based on the target pixel size of each element and the target size of each font, and obtaining and displaying the adapted target interface image. The effect of improving the adaptability and versatility of the display interface can be achieved.

Description

Technical Field

[0001] The present application relates to the field of computer technology, and in particular to an interface adaptation method, device, computer equipment and computer-readable storage medium. Background Art

[0002] With the development of computer technology, more and more electronic devices have entered into people's work and life, and people can communicate or search for information through electronic devices.

[0003] In the related art, various applications running on electronic devices generally need to display corresponding interfaces on the screen of the electronic device. Generally, the design drawings of the interface can be adjusted by using the React-Native framework technology, and the design drawings and elements in the design drawings can be scaled according to the percentage corresponding to the screen size of the electronic device, so that the entire design drawings can be displayed on the entire screen of the electronic device. Specifically, when adjusting the design drawings, the width of the elements is converted into percentage units, and the height of the elements and the size of the text are adjusted by converting the pixel (PX) unit.

[0004] However, when this solution is used to adapt the interface of an electronic device with a screen size that is too large or too small, there will be a problem that the elements or fonts in the displayed interface are misplaced or incompletely displayed. Summary of the invention

[0005] The purpose of the present application is to provide an interface adaptation method, apparatus, computer device and computer-readable storage medium, which can improve the adaptability and versatility of the display interface.

[0006] The embodiment of the present application is implemented as follows:

[0007] According to a first aspect of an embodiment of the present application, there is provided an interface adaptation method, comprising:

[0008] Acquire an initial interface image and an image pixel size of the initial interface image, wherein the image pixel size refers to the size of the initial interface image represented by a pixel unit as a length unit;

[0009] Determine, according to the image pixel size of the initial interface and the device pixel density of the target display device, the device pixel size of the initial interface image when displayed on the target display device, wherein the device pixel size refers to the size of the initial interface image represented by a device independent pixel unit as a length unit;

[0010] Determining a target pixel size of each element when displayed on the target display device according to the image pixel size, the initial pixel size of each element in the initial interface image, and the screen size of the target display device;

[0011] Determining a target size of each font according to the device pixel size and the initial size of each font in the initial interface image;

[0012] Based on the target pixel size of each of the elements and the target size of each of the fonts, the initial interface image is adapted to obtain and display an adapted target interface image.

[0013] Optionally, determining a target pixel size of each element when displayed on the target display device according to the image pixel size, the initial pixel size of each element in the initial interface image, and the screen size of the target display device includes:

[0014] Calculating a first ratio of an initial pixel width of each of the elements to a pixel width in the pixel size of the image;

[0015] Using a first product of the first ratio and the screen width of the target display device as a target pixel width in a target pixel size of each of the elements;

[0016] Calculating a second ratio of an initial pixel height of each of the elements to a pixel height in the pixel size of the image;

[0017] Calculate a second product of the second ratio and the screen height of the target display device, and use the second product as the target pixel height of each of the elements;

[0018] The target pixel size is determined according to the target pixel width and the target pixel height.

[0019] Optionally, determining the target pixel size according to the target pixel width and the target pixel height includes:

[0020] The second product is redundancy-adjusted, the adjusted second product is used as a new target pixel height of the element, and the target pixel width and the new target pixel height are used as the target pixel size.

[0021] Optionally, determining the target size of each font according to the device pixel size and the initial size of each font in the initial interface image includes:

[0022] Calculate the overall scaling ratio of the initial interface image according to the device pixel size and the screen size of the target display device;

[0023] The target size of each font is determined according to the overall scaling ratio, the pixel density of the target display device, a preset font scaling ratio, and the initial size of each font in the initial interface image.

[0024] Optionally, calculating the overall scaling ratio of the initial interface image according to the device pixel size and the screen size of the target display device includes:

[0025] Calculating a third ratio of the screen width of the target display device to the pixel width in the device pixel size;

[0026] Calculating a fourth ratio of the screen height of the target display device to the pixel height in the device pixel size;

[0027] The third ratio and the fourth ratio are compared, and the smallest ratio between the third ratio and the fourth ratio is used as the overall scaling ratio.

[0028] Optionally, determining the target size of each font according to the overall scaling ratio, the pixel density of the target display device, and the initial size of each font in the initial interface image includes:

[0029] Calculating a third product of the initial height of the font and the overall scaling ratio;

[0030] Calculating a fifth ratio of the third product to the preset font scaling ratio;

[0031] A sixth ratio of the fifth ratio and the pixel density of the display device is calculated, and the sixth ratio is used as a target size of the font.

[0032] Optionally, determining the device pixel size of the initial interface image when displayed on the target display device according to the image pixel size of the initial interface and the device pixel density of the target display device includes:

[0033] The ratio of the pixel height in the pixel size of the image to the pixel density of the device is used as the pixel height in the pixel size of the device;

[0034] The ratio of the pixel width in the image pixel size to the device pixel density is used as the pixel width in the device pixel size.

[0035] According to a second aspect of the embodiments of the present application, an interface adaptation device is provided, the interface adaptation device comprising:

[0036] An acquisition module, used to acquire an initial interface image and an image pixel size of the initial interface image, wherein the image pixel size refers to the size of the initial interface image represented by a pixel unit as a length unit;

[0037] A first determination module is used to determine the device pixel size of the initial interface image when it is displayed on the target display device according to the image pixel size of the initial interface and the device pixel density of the target display device, wherein the device pixel size refers to the size of the initial interface image represented by a device independent pixel unit as a length unit;

[0038] A second determining module, configured to determine a target pixel size of each element when displayed on the target display device according to the image pixel size, the initial pixel size of each element in the initial interface image, and the screen size of the target display device;

[0039] A third determination module, used to determine a target size of each font according to the device pixel size and the initial size of each font in the initial interface image;

[0040] The adaptation module is used to adapt the initial interface image based on the target pixel size of each element and the target size of each font, and obtain and display the adapted target interface image.

[0041] According to a third aspect of an embodiment of the present application, a computer device is provided, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the computer program, when executed by the processor, implements the interface adaptation method described in the first aspect.

[0042] According to a fourth aspect of an embodiment of the present application, a computer-readable storage medium is provided, wherein the computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the interface adaptation method described in the first aspect is implemented.

[0043] The beneficial effects of the embodiments of the present application include:

[0044] An interface adaptation method provided by an embodiment of the present application obtains an initial interface image and the image pixel size of the initial interface image, determines the device pixel size of the initial interface image when displayed on the target display device according to the image pixel size of the initial interface and the device pixel density of the target display device, determines the target pixel size of each element when displayed on the target display device according to the image pixel size, the initial pixel size of each element in the initial interface image and the screen size of the target display device, determines the target size of each font according to the device pixel size and the initial size of each font in the initial interface image, adapts the initial interface image based on the target pixel size of each element and the target size of each font, and obtains and displays the adapted target interface image.

[0045] Among them, the image pixel size is in PX units as the length unit. According to the image pixel size of the initial interface and the device pixel density of the target display device, the device pixel size of the initial interface image when displayed on the target display device is determined, and the device pixel size in DP units as the length unit can be determined. In this way, the size of the initial interface image is characterized by the number of pixels of the target display device screen occupied by the initial interface image and / or the number of inches occupied on the screen of the target display device when the initial interface image is displayed on the target display device. The number of inches occupied by the initial interface image on the screen of the target display device can also characterize the physical size of the initial interface image. In this way, it can be ensured that when the initial interface image is displayed on screens with different pixel densities, the physical size of the initial interface image can achieve density independence.

[0046] According to the pixel size of the image, the initial pixel size of each element in the initial interface image, and the screen size of the target display device, the target pixel size of each element when displayed on the target display device is determined. The target pixel size of each element can specifically represent the height and width of each element when it is displayed on the target display device. In this way, no matter whether the resolution of the target display device is large or small, or the screen size of the target display device is large or small, when each element is displayed on the target display device, it can be ensured that the degree of adjustment of the height and width of each element is the same, so that it can be ensured that each element displayed on the target display device will not be stretched too long or too flat, and the distortion of each element can be avoided. In addition, since the target pixel size of each element is also determined according to the screen size of the target display device, it can also be ensured that each element can cover the entire screen when displayed on the target display device. In this way, it can be ensured that each element can be correctly displayed on the target display device.

[0047] The target size of each font is determined based on the device pixel size and the initial size of each font in the initial interface image. The target size is determined based on the device pixel size and the initial size of each font in the initial interface image. The device pixel size with DP as the length unit can represent the number of pixels of the target display device screen occupied by the initial interface image and / or the number of inches occupied on the screen of the target display device when the initial interface image is displayed on the target display device. Therefore, the target size of each font determined by the device pixel size is adapted to the size and resolution of the target display device.

[0048] Based on the target pixel size of each element and the target size of each font, the initial interface image is adapted to obtain and display the adapted target interface image. Regardless of the pixel density of the target display device or the size of the target display device, by displaying the target interface image in this way, each element and each font in the initial interface image can maintain an appropriate and matching size.

[0049] In this way, the adaptability and versatility of the display interface can be improved. BRIEF DESCRIPTION OF THE DRAWINGS

[0050] In order to more clearly illustrate the technical solutions of the embodiments of the present application, the drawings required for use in the embodiments will be briefly introduced below. It should be understood that the following drawings only show certain embodiments of the present application and therefore should not be regarded as limiting the scope. For ordinary technicians in this field, other related drawings can be obtained based on these drawings without paying creative work.

[0051] Figure 1 A flowchart of a first interface adaptation method provided in an embodiment of the present application;

[0052] Figure 2 A flowchart of a second interface adaptation method provided in an embodiment of the present application;

[0053] Figure 3 A flowchart of a third interface adaptation method provided in an embodiment of the present application;

[0054] Figure 4 A flowchart of a fourth interface adaptation method provided in an embodiment of the present application;

[0055] Figure 5 A flowchart of a fifth interface adaptation method provided in an embodiment of the present application;

[0056] Figure 6 A schematic diagram of an initial interface image provided in an embodiment of the present application;

[0057] Figure 7A schematic diagram of the structure of an interface adapter device provided in an embodiment of the present application;

[0058] Figure 8 A schematic diagram of the structure of a computer device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0059] In order to make the purpose, technical solution and advantages of the embodiments of the present application clearer, the technical solution in the embodiments of the present application will be clearly and completely described below in conjunction with the drawings in the embodiments of the present application. Obviously, the described embodiments are part of the embodiments of the present application, rather than all the embodiments. The components of the embodiments of the present application described and shown in the drawings here can be arranged and designed in various different configurations.

[0060] Therefore, the following detailed description of the embodiments of the present application provided in the accompanying drawings is not intended to limit the scope of the present application for which protection is sought, but merely represents selected embodiments of the present application. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in the field without creative work are within the scope of protection of the present application.

[0061] In the related art, various applications running on electronic devices generally need to display corresponding interfaces on the screen of the electronic device. Generally, the design drawings of the interface can be adjusted by using the React-Native framework technology, and the design drawings and elements in the design drawings can be scaled according to the percentage corresponding to the screen size of the electronic device to display the entire design drawings on the entire screen of the electronic device. Specifically, when adjusting the design drawings, the width of the element is converted into a percentage unit, and the height of the element and the size of the text are adjusted by converting the PX unit. In addition, since the width of the element can be adjusted according to the percentage unit when the interface is adapted by the percentage layout, the width of the element can be adaptively scaled, and the height and text size of the element in the design drawings are fixed by the PX unit. Therefore, when the screen is too large or too small, the elements and text displayed in the interface will be stretched very long or flat, which will cause the displayed elements and text to be distorted. Therefore, when this solution is adapted to the interface of electronic devices with too large or too small screen sizes, there will be a problem of misalignment or incomplete display of elements or fonts in the displayed interface.

[0062] To this end, an embodiment of the present application provides an interface adaptation method, which obtains an initial interface image and the image pixel size of the initial interface image, determines the device pixel size of the initial interface image when displayed on the target display device according to the image pixel size of the initial interface and the device pixel density of the target display device, determines the target pixel size of each element when displayed on the target display device according to the image pixel size, the initial pixel size of each element in the initial interface image, and the screen size of the target display device, determines the target size of each font according to the device pixel size and the initial size of each font in the initial interface image, adapts the initial interface image based on the target pixel size of each element and the target size of each font, obtains and displays the adapted target interface image, thereby achieving the effect of improving the adaptability and versatility of the display interface.

[0063] The embodiment of the present application is described by taking the interface adaptation method applied in a computer device as an example, but it does not mean that the embodiment of the present application can only be applied to interface adaptation in a computer device.

[0064] Optionally, the computer device may be a terminal device or a server. The computer device may include a display device or a display module, and may also be connected to any device with a display function to display the interface on any device with a display function, which is not limited in the embodiments of the present application.

[0065] The interface adaptation method provided in the embodiment of the present application is explained in detail below.

[0066] Figure 1 This is a flowchart of an interface adaptation method provided by the present application, which can be applied to the above-mentioned computer device. Figure 1 , the embodiment of the present application provides an interface adaptation method, including:

[0067] Step 1001: Acquire an initial interface image and the image pixel size of the initial interface image.

[0068] Optionally, the initial interface image may be a design drawing or page design drawing of any interface to be displayed on the computer device, designed by relevant technicians. In other words, the initial interface image may be a design drawing or page design drawing of an interface to be displayed on a display device of the computer device or a display device connected to the computer device.

[0069] The initial interface image may include at least one element and at least one text. Each element may include a shape element, a symbol element, a figurative element, etc. Each element may specifically refer to any other mark, logo, symbol, shape, line, etc. other than text in the initial interface image.

[0070] Optionally, the image pixel size may refer to the size of the initial interface image represented by PX units as length units, and the image pixel size may represent the actual size of the initial interface image. In addition, the image pixel size of the initial interface image may be measured in advance by relevant technicians, or may be measured in real time by a corresponding algorithm, and the embodiments of the present application do not limit this.

[0071] The image pixel size of the initial interface image may include the pixel width and pixel height of the initial interface image. Specifically, the pixel width of the initial interface image may represent the distance between the two edges of the initial interface image in the horizontal direction, and the pixel height of the initial interface image may represent the distance between the two edges of the initial interface image in the vertical direction, which is not limited in the embodiments of the present application.

[0072] In this way, the initial interface image to be displayed and the pixel size of the image with PX units as length units can be obtained, which facilitates subsequent operations.

[0073] Step 1002: Determine the device pixel size of the initial interface image when it is displayed on the target display device according to the image pixel size of the initial interface image and the device pixel density of the target display device.

[0074] Optionally, the target display device may be a display device or a display module in the computer device, or may be any device with a display function connected to the computer device, which is not limited in the embodiment of the present application.

[0075] The device pixel density may refer to dots per inch (DPI), that is, pixels per inch. The device pixel density may be specifically used to characterize the number of pixels per inch of the image of the target display device, that is, the number of pixels that can be sampled, displayed or output per inch of the screen of the target display device. The device pixel density may be used as a unit of measurement for the resolution of the target display device. Generally, a higher device pixel density indicates a higher resolution of the target display device.

[0076] Optionally, the device pixel size may refer to the size of the initial interface image represented by a device independent pixel (Device Independent Pixels, DP for short) as a length unit.

[0077] In addition, the device pixel size can be used to indicate the number of pixels that the initial interface image occupies on the screen of the target display device when displayed on the target display device, and can also be used to indicate the number of inches that the initial interface image occupies on the screen of the target display device when displayed on the target display device.

[0078] The device pixel size may include a pixel width and a pixel height in the device pixel size. The pixel width in the device pixel size corresponds to the image pixel width, and the pixel height in the device pixel size corresponds to the image pixel height.

[0079] It is worth noting that, due to different resolutions of different target display devices, and different pixel densities of target display devices with different resolutions, even if the actual physical sizes of screens with different resolutions may be the same, a screen with a high pixel density has more pixels per inch, that is, a screen with a high pixel density has a higher DPI. The PX unit is used to specify the physical pixel size of the initial interface image. If only the PX unit is used as a length unit to represent the size of the initial interface image and the initial interface image is displayed on target display devices with different resolutions, the physical size of the initial interface image will be larger on a screen with a low pixel density and smaller on a screen with a high pixel density.

[0080] It is worth noting that characterizing the size of the initial interface image by the device pixel size determined by the image pixel size and the device pixel density with the DP unit as the length unit can make the entire initial interface image maintain density independence, that is, the size of the initial interface image can be characterized by the number of pixels of the target display device screen occupied by the initial interface image and / or the number of inches occupied on the screen of the target display device when the initial interface image is displayed on the target display device. The number of inches occupied by the initial interface image on the screen of the target display device can also characterize the physical size of the initial interface image, so that it can be ensured that when the initial interface image is displayed on screens with different pixel densities, the physical size of the initial interface image can achieve density independence.

[0081] Step 1003: Determine the target pixel size of each element when it is displayed on the target display device according to the pixel size of the image, the initial pixel size of each element in the initial interface image, and the screen size of the target display device.

[0082] Optionally, the initial pixel size of each element may refer to the size of each element in the initial interface image when no adjustment is performed on the element. The initial pixel size of each element may include a pixel height and a pixel width of the initial pixel size.

[0083] The screen size of the target display device may refer to the size represented by the number of pixels in each row and each column on the screen. The screen size of the target display device may include the screen width and screen height of the target display device.

[0084] For example, if the resolution of the target display device is 1920×1080P, that is, the number of pixels in any column of the target display device's screen is 1080, and the number of pixels in any row of the target display device's screen is 1920, then the screen size of the target display device can be represented as 1920×1080. Specifically, the screen width of the target display device is 1920, and the screen height of the target display device is 1080.

[0085] The target pixel size of each element when displayed on the target display device may include a target pixel height and a target pixel width of each element.

[0086] The target pixel size of each element may represent the size of all pixels occupied by each element on the target display device when each element is displayed on the target display device.

[0087] It is worth noting that, since the target pixel size of each element can represent the size of all pixels occupied by each element on the target display device when each element is displayed on the target display device, and the target pixel size includes the target pixel height and target pixel width of each element, that is, the target pixel size of each element can specifically represent the height and width of each element when each element is displayed on the target display device, and since the target pixel height and target pixel width of each element are determined by the pixel size of the image, the initial pixel size of each element in the initial interface image, and the screen size of the target display device, in this case, the units of the target pixel height and target pixel width of each element are unified. Then, no matter whether the resolution of the target display device is large or small, or the screen size of the target display device is large or small, when each element is displayed on the target display device, it can be ensured that the degree of adjustment of the height and width of each element is the same, so that it can be ensured that each element displayed on the target display device will not be stretched too long or too flat, and the distortion of each element can be avoided. In addition, since the target pixel size of each element is also determined according to the screen size of the target display device, it can also be ensured that each element can cover the entire screen when displayed on the target display device. In this way, it can be ensured that each element can be correctly displayed on the target display device.

[0088] Step 1004: Determine the target size of each font according to the device pixel size and the initial size of each font in the initial interface image.

[0089] Optionally, the initial size may include the height of each font, the width of each font, the point value of each font, the font size of each font, etc. Then, the target size may also include the height of each font, the width of each font, the point value of each font, and the font size of each font.

[0090] Generally, the height of a font can represent the font size, and the font size corresponds to the font point value, that is, there is a conversion relationship among the height of a font, the font size, and the font point value.

[0091] For example, if the height of a font is 14.82 millimeters (mm), then the font size of this font is the first size, and the pound value of this font is 42 pounds. If the height of a font is 4.94mm, then the font size of this font is the fourth size, and the pound value of this font is 14 pounds. If the height of a font is 1.76mm, then the font size of this font is the eighth size, and the pound value of this font is 5 pounds.

[0092] In addition, if the DPI of any two target display devices is different, then the size of the font of the same size displayed on these two target devices will be different, that is, the number of pixels occupied by the font of the same size on target display devices with different DPIs is different.

[0093] It is worth noting that since the target size is determined based on the device pixel size and the initial size of each font in the initial interface image, and the device pixel size with DP as the length unit can represent the number of pixels of the target display device screen occupied by the initial interface image and / or the number of inches occupied on the screen of the target display device when the initial interface image is displayed on the target display device, then the target size of each font determined by the device pixel size is also adapted to the size and resolution of the target display device. In other words, the target size is also determined based on the device pixel density of the target display device, so regardless of the size and resolution of the target device, it can be ensured that each font can be correctly displayed on the target display device.

[0094] Step 1005: Based on the target pixel size of each element and the target size of each font, the initial interface image is adapted to obtain and display the adapted target interface image.

[0095] Optionally, the operation of adapting the initial interface image may refer to adjusting the initial pixel size of each element in the initial interface image to the target pixel size of each element, and adjusting the initial size of each font in the initial interface image to the target size of each font.

[0096] The target interface image may refer to an interface image obtained after adjusting the elements and fonts in the initial interface image, or may refer to an image or interface finally displayed on the target display device.

[0097] Regardless of the pixel density or size of the target display device, by displaying the target interface image in this way, each element and each font in the initial interface image can maintain an appropriate and matching size, thereby achieving the effect of improving the adaptability and versatility of the display interface.

[0098] In an embodiment of the present application, an initial interface image and an image pixel size of the initial interface image are obtained, and the device pixel size of the initial interface image when displayed on the target display device is determined according to the image pixel size of the initial interface and the device pixel density of the target display device; the target pixel size of each element when displayed on the target display device is determined according to the image pixel size, the initial pixel size of each element in the initial interface image, and the screen size of the target display device; the target size of each font is determined according to the device pixel size and the initial size of each font in the initial interface image; the initial interface image is adapted based on the target pixel size of each element and the target size of each font, and the adapted target interface image is obtained and displayed.

[0099] Among them, the image pixel size is in PX units as the length unit. According to the image pixel size of the initial interface and the device pixel density of the target display device, the device pixel size of the initial interface image when displayed on the target display device is determined, and the device pixel size in DP units as the length unit can be determined. In this way, the size of the initial interface image is characterized by the number of pixels of the target display device screen occupied by the initial interface image and / or the number of inches occupied on the screen of the target display device when the initial interface image is displayed on the target display device. The number of inches occupied by the initial interface image on the screen of the target display device can also characterize the physical size of the initial interface image. In this way, it can be ensured that when the initial interface image is displayed on screens with different pixel densities, the physical size of the initial interface image can achieve density independence.

[0100] According to the pixel size of the image, the initial pixel size of each element in the initial interface image, and the screen size of the target display device, the target pixel size of each element when displayed on the target display device is determined. The target pixel size of each element can specifically represent the height and width of each element when it is displayed on the target display device. In this way, no matter whether the resolution of the target display device is large or small, or the screen size of the target display device is large or small, when each element is displayed on the target display device, it can be ensured that the degree of adjustment of the height and width of each element is the same, so that it can be ensured that each element displayed on the target display device will not be stretched too long or too flat, and the distortion of each element can be avoided. In addition, since the target pixel size of each element is also determined according to the screen size of the target display device, it can also be ensured that each element can cover the entire screen when displayed on the target display device. In this way, it can be ensured that each element can be correctly displayed on the target display device.

[0101] The target size of each font is determined based on the device pixel size and the initial size of each font in the initial interface image. The target size is determined based on the device pixel size and the initial size of each font in the initial interface image. The device pixel size with DP as the length unit can represent the number of pixels of the target display device screen occupied by the initial interface image and / or the number of inches occupied on the screen of the target display device when the initial interface image is displayed on the target display device. Therefore, the target size of each font determined by the device pixel size is adapted to the size and resolution of the target display device.

[0102] Based on the target pixel size of each element and the target size of each font, the initial interface image is adapted to obtain and display the adapted target interface image. Regardless of the pixel density of the target display device or the size of the target display device, by displaying the target interface image in this way, each element and each font in the initial interface image can maintain an appropriate and matching size.

[0103] In this way, the adaptability and versatility of the display interface can be improved.

[0104] For a possible implementation, see Figure 2 , determining the target pixel size of each element when displayed on the target display device according to the pixel size of the image, the initial pixel size of each element in the initial interface image, and the screen size of the target display device, including:

[0105] Step 1006: Calculate a first ratio between an initial pixel width of each element and a pixel width in the pixel size of the image.

[0106] The pixel width in the image pixel size and the initial pixel width of each element are both in PX units as length units.

[0107] Step 1007: A first product of the first ratio and the screen width of the target display device is used as a target pixel width in a target pixel size of each element.

[0108] Optionally, the screen width may be represented by the number of pixels in each row on the screen.

[0109] Since the first product obtained by multiplying the first ratio and the screen width of the target display device is used as the target pixel width of each element, it can also be ensured that each element can cover the entire screen in width when displayed on the target display device.

[0110] Step 1008: Calculate a second ratio of the initial pixel height of each element to the pixel height in the pixel size of the image.

[0111] The pixel height in the image pixel size and the initial pixel height of each element are both in PX units as length units.

[0112] Step 1009: Calculate a second product of the second ratio and the screen height of the target display device, and use the second product as the target pixel height of each element.

[0113] Optionally, the screen width may be represented by the number of pixels in each column on the screen.

[0114] Since the second product obtained by multiplying the second ratio by the screen height of the target display device is used as the target pixel width of each element, it can also be ensured that each element can cover the entire screen in height when displayed on the target display device.

[0115] Step 1010: Determine the target pixel size according to the target pixel width and the target pixel height.

[0116] Exemplarily, the target pixel width and the target pixel height may be calculated in the following manner.

[0117] The target pixel width of each element = the initial pixel width of each element in the initial interface image × the screen width / the pixel width of the image pixel size of the initial interface image.

[0118] The target pixel height of each element = the initial pixel height of each element in the initial interface image × the screen height / the pixel height of the image pixel size of the initial interface image.

[0119] It is worth noting that, in this way, the target pixel height and the target pixel width of each element can be calculated respectively, and the units of the target pixel height and the target pixel width of each element are unified, and specifically, the height and width of each element when each element is displayed on the target display device can be represented by the number of pixels in each column and each row on the target display device. Therefore, no matter whether the resolution of the target display device is large or small, and the screen size of the target display device is large or small, when each element is displayed on the target display device, the height and width of each element can be adjusted according to the number of pixels on the target display device at the same time, so that it can be ensured that each element displayed on the target display device will not be stretched too long or too flat, and the distortion of each element displayed can be avoided. In addition, since the target pixel size of each element is determined according to the screen width and screen height of the target display device, it can also be ensured that each element can cover the entire screen when displayed on the target display device. In this way, it can be ensured that each element can be correctly displayed on the target display device. In this way, the effect of improving the adaptability and versatility of the display interface can be achieved.

[0120] For a possible implementation, see Figure 3 , determining the target pixel size according to the target pixel width and the target pixel height, including:

[0121] Step 1011: perform redundancy adjustment on the second product, use the adjusted second product as the new target pixel height of the element, and use the target pixel width and the new target pixel height as the target pixel size.

[0122] Optionally, redundancy adjustment may be performed for the second product according to features such as the model and operating system of the computer device.

[0123] Exemplarily, the operating system of the computer device may include Android system, IOS, Mac OS, Windows system, etc. The operating system of the computer device may be determined first, and different redundancy adjustments may be made to the second product according to different operating systems of the computer device.

[0124] For example, if the operating system of the computer device is IOS, then the first preset redundancy value is subtracted from the second product. If the operating system of the computer device is Android, then the second product is increased by the second preset redundancy value.

[0125] The first preset redundancy value and the second preset redundancy value can be adjusted according to actual needs. Generally, the first preset redundancy value can be set to 0.8, and the second preset redundancy value can be set to 1.4. The first preset redundancy value and the second preset redundancy value can also be set to any other possible values, respectively, and the embodiments of the present application are not limited to this.

[0126] It is worth noting that by making redundant adjustments to the second product and using the adjusted second product as the new target pixel height of the element, it is possible to ensure that each element will not be misplaced or incompletely displayed when displayed on the target display device, and the obtained target pixel height can be more suitable for the target display device, thereby achieving the effect of improving the adaptability of the display interface.

[0127] For a possible implementation, see Figure 4 , according to the device pixel size and the initial size of each font in the initial interface image, determining the target size of each font, including:

[0128] Step 1012: Calculate the overall scaling ratio of the initial interface image according to the device pixel size and the screen size of the target display device.

[0129] Optionally, the overall scaling ratio may refer to a ratio at which the initial interface image needs to be scaled as a whole when the initial interface image is displayed on the target display device.

[0130] Step 1013: Determine the target size of each font according to the overall scaling ratio, the pixel density of the target display device, the preset font scaling ratio, and the initial size of each font in the initial interface image.

[0131] Optionally, the preset font scaling ratio may refer to the font scaling ratio set on the computer device. For example, on a mobile phone, a user can set the font scaling ratio when displaying fonts through the mobile phone. For another example, the font in a document is originally a size 4 font, but the user presets the font scaling ratio to 110% on mobile phone A and the font scaling ratio to 90% on mobile phone B. Then, when the document is displayed on mobile phone A and mobile phone B respectively, although the font in the document is still a size 4 font, the font displayed on mobile phone A will be larger than the font displayed on mobile phone B.

[0132] In addition, the preset font scaling ratio may also be set or obtained through PixelRatio.get Font Scale in the React-Native framework technology. This embodiment of the present application does not limit this.

[0133] It is worth noting that since the target size is determined based on the overall scaling ratio, the pixel density of the target display device, the preset font scaling ratio, and the initial size of each font in the initial interface image, and the overall scaling ratio may refer to the ratio by which the initial interface image needs to be scaled as a whole when the initial interface image is displayed on the target display device, and the device pixel density of the target display device represents the number of pixels per inch of the image of the target display device, then the target size of each font determined by the device pixel density is adapted to the size and resolution of the target display device. Then, regardless of the size and resolution of the target device, it can be ensured that each font can be correctly displayed on the target display device. In this way, the effect of improving the adaptability and versatility of the display interface can be achieved.

[0134] In a possible implementation, calculating the overall scaling ratio of the initial interface image according to the device pixel size and the screen size of the target display device includes:

[0135] A third ratio of the screen width of the target display device to the pixel width in the pixel size of the device is calculated.

[0136] It is worth noting that, since the device pixel size may refer to the size of the initial interface image represented by DP units as the length unit, the pixel width in the device pixel size refers to the width of the initial interface image represented by DP units as the length unit, and the screen width may be the width represented by the number of pixels in each row on the screen, then the third ratio may be used to indicate the proportion by which the initial interface image needs to be scaled when both horizontal edges of the initial interface image are displayed on the target display device.

[0137] A fourth ratio of the screen height of the target display device to the pixel height in the pixel size of the device is calculated.

[0138] It is worth noting that, since the device pixel size may refer to the size of the initial interface image represented by DP units as the length unit, the pixel height in the device pixel size also refers to the height of the initial interface image represented by DP units as the length unit, and the screen width may be the height represented by the number of pixels in each row on the screen, then the fourth ratio may be used to indicate the proportion by which the initial interface image needs to be scaled when both vertical edges of the initial interface image are displayed on the target display device.

[0139] The third ratio and the fourth ratio are compared, and the smallest ratio between the third ratio and the fourth ratio is used as the overall scaling ratio.

[0140] It is worth noting that, since the third ratio can represent the ratio of the screen width of the target display device to the width of the initial interface image, and the fourth ratio can represent the ratio of the screen height of the target display device to the height of the initial interface image, by comparing the third ratio and the fourth ratio, the smallest ratio between the third ratio and the fourth ratio is used as the overall scaling ratio, so that it can be ensured that after the initial interface image is scaled according to the overall scaling ratio, the four edges of the initial interface image can be displayed on the target display device. In this way, the effect of improving the adaptability of the display interface can be achieved.

[0141] In a possible implementation, determining the target size of each font according to the overall scaling ratio, the pixel density of the target display device, and the initial size of each font in the initial interface image includes:

[0142] The third product of the font's initial height and the overall scaling factor is calculated.

[0143] Optionally, the initial height of the font may refer to the height of the font included in the initial size of the font in the initial interface image.

[0144] A fifth ratio of the third product to the preset font scaling ratio is calculated.

[0145] A sixth ratio of the fifth ratio and the pixel density of the target display device is calculated, and the sixth ratio is used as the target size of the font.

[0146] The target size of each font can be represented by the height of the font only, or by converting the height of the font into the font size or the font point value, or by the height of the font and the width of the font. In addition, the target size of each font can also be represented by the number of pixels occupied by each font on the screen of the target display device or the number of inches occupied on the screen of the target display device when the font is displayed on the target display device. The embodiments of the present application are not limited to this.

[0147] Exemplarily, the target size of each font may be calculated in the following manner.

[0148] The target size of each font=the initial height of each font×the overall scaling ratio / the preset font scaling ratio / the pixel density of the target display device.

[0149] It is worth noting that since the height of a font can represent the font size, and the font size corresponds to the font point value, there is a conversion relationship between the font height, font size, and font point value. Therefore, when determining the target size of each font, the target size of each font when displayed on the target display device can be calculated based only on the initial height of each font.

[0150] Then, adjusting the height of the font is equivalent to adjusting the font size. When adjusting the font size, the font height and font width will change at the same time. For example, if you adjust the font size of a character from "size 4" to "size 5" in a text editing program, the height and width of the character will become smaller accordingly, rather than only the height of the character becoming smaller while the width of the character remains unchanged. Otherwise, the font will be deformed after adjusting the font size.

[0151] It is worth noting that since the overall scaling ratio may refer to the ratio by which the initial interface image needs to be scaled as a whole when the initial interface image is displayed on the target display device, the preset font scaling ratio may refer to the scaling ratio of the font set on the computer device, and the device pixel density of the target display device represents the number of pixels per inch of the image of the target display device, then the target size of each font determined by the device pixel density is adapted to the size and resolution of the target display device. Then, regardless of the size and resolution of the target device, it can be ensured that each font can be correctly displayed on the target display device. In this way, the effect of improving the adaptability and versatility of the display interface can be achieved.

[0152] For a possible implementation, see Figure 5 , determining the device pixel size of the initial interface image when displayed on the target display device according to the image pixel size of the initial interface and the device pixel density of the target display device, including:

[0153] Step 1014: The ratio of the pixel height in the pixel size of the image to the pixel density of the device is used as the pixel height in the pixel size of the device.

[0154] Since the image pixel size refers to the size of the initial interface image represented by PX units as the unit of length, and the device pixel density can represent the number of pixels per inch on the screen of the target display device, the pixel height in the device pixel size obtained by the device pixel density and the pixel height in the image pixel size can represent the number of pixels on the screen of the target display device occupied in the vertical direction when the initial interface image is displayed on the target display device, and can also be used to indicate the number of inches on the screen of the target display device occupied in the vertical direction when the initial interface image is displayed on the target display device.

[0155] Step 1015: The ratio of the pixel width in the pixel size of the image to the pixel density of the device is used as the pixel width in the pixel size of the device.

[0156] Since the image pixel size refers to the size of the initial interface image represented by PX units as the unit of length, and the device pixel density can represent the number of pixels per inch on the screen of the target display device, the pixel width in the device pixel size obtained by the device pixel density and the pixel width in the image pixel size can represent the number of pixels on the screen of the target display device occupied in the horizontal direction when the initial interface image is displayed on the target display device, and can also be used to indicate the number of inches on the screen of the target display device occupied in the horizontal direction when the initial interface image is displayed on the target display device.

[0157] In this way, the image pixel size of the PX unit of the initial interface image can be converted into the physical size of the initial interface image, so that when the initial interface image is displayed on screens with different pixel densities, the physical size of the initial interface image can achieve density independence.

[0158] In order to clearly and unambiguously explain the meaning of the size of the initial interface image and the size of each element in the embodiment of the present application, Figure 6 is a schematic diagram of an initial interface image provided in an embodiment of the present application, see Figure 6 , Figure 6 The horizontal and vertical directions are shown in FIG. Figure 6 An initial interface image T is also shown in FIG. 5 , and the initial interface image T includes text A, element S1 and element S2 .

[0159] It can be seen from the above embodiment that the initial interface image T includes the image pixel size, and the image pixel size includes pixel width and pixel height. Figure 6 As shown, the distance x1 is the distance between the two edges of the initial interface image in the horizontal direction. Then, the distance x1 can refer to the pixel width in the image pixel size of the initial interface image T, and the distance y1 is the distance between the two edges of the initial interface image in the vertical direction. Then, the distance y1 can refer to the pixel height in the image pixel size of the initial interface image T.

[0160] In addition, it can be seen from the above embodiments that both element S1 and element S2 have an initial pixel size, and the initial pixel size may include a pixel height and a pixel width of the initial pixel size. Figure 6As shown, it can be seen that the distance x2 is the width of the element S1 in the horizontal direction, so the distance x2 can refer to the pixel width in the initial pixel size of the element S1, and the distance y2 is the height of the element S1 in the vertical direction, so the distance y2 can be the pixel height in the initial pixel size of the element S1, the distance x3 is the width of the element S2 in the horizontal direction, so the distance x3 can refer to the pixel width in the initial pixel size of the element S2, and the distance y3 is the height of the element S2 in the vertical direction, so the distance y3 can be the pixel height in the initial pixel size of the element S2.

[0161] The following describes the apparatus, device, and computer-readable storage medium used to execute the interface adaptation method provided in the present application. The specific implementation process and technical effects are described above and will not be repeated below.

[0162] Figure 7 FIG. 7 is a schematic diagram of the structure of an interface adaptation device provided in an embodiment of the present application. Referring to FIG. 7 , the device includes:

[0163] An acquisition module 201 is used to acquire an initial interface image and an image pixel size of the initial interface image;

[0164] A first determining module 202 is used to determine the device pixel size of the initial interface image when it is displayed on the target display device according to the image pixel size of the initial interface and the device pixel density of the target display device;

[0165] A second determining module 203 is used to determine a target pixel size of each element when it is displayed on the target display device according to the pixel size of the image, the initial pixel size of each element in the initial interface image, and the screen size of the target display device;

[0166] The third determination module 204 is used to determine the target size of each font according to the device pixel size and the initial size of each font in the initial interface image;

[0167] The adaptation module 205 is used to adapt the initial interface image based on the target pixel size of each element and the target size of each font, and obtain and display the adapted target interface image.

[0168] The above-mentioned device is used to execute the method provided by the aforementioned embodiment, and its implementation principle and technical effect are similar, which will not be repeated here.

[0169] The above modules may be one or more integrated circuits configured to implement the above methods, such as one or more application specific integrated circuits (ASICs), or one or more microprocessors, or one or more field programmable gate arrays (FPGAs). For another example, when a module is implemented in the form of a processing element scheduling program code, the processing element may be a general-purpose processor, such as a central processing unit (CPU) or other processor that can call program code. For another example, these modules may be integrated together and implemented in the form of a system-on-a-chip (SOC).

[0170] Figure 8 8 , the computer device includes: a memory 301 and a processor 302 , the memory 301 stores a computer program that can be run on the processor 302 , and when the processor 302 executes the computer program, the steps in any of the above method embodiments are implemented.

[0171] An embodiment of the present application further provides a computer-readable storage medium, which stores a computer program. When the computer program is executed by a processor, the steps in the above-mentioned method embodiments can be implemented.

[0172] Optionally, the present application also provides a program product, such as a computer-readable storage medium, including a program, which is used to execute any of the above-mentioned interface adaptation method embodiments when executed by a processor.

[0173] In the several embodiments provided by the present invention, it should be understood that the disclosed devices and methods can be implemented in other ways. For example, the device embodiments described above are only schematic, for example, the division of units is only a logical function division, and there may be other division methods in actual implementation, such as multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed can be through some interfaces, indirect coupling or communication connection of devices or units, which can be electrical, mechanical or other forms.

[0174] The units described as separate components may or may not be physically separated, and the components shown as units may or may not be physical units, that is, they may be located in one place or distributed on multiple network units. Some or all of the units may be selected according to actual needs to achieve the purpose of the solution of this embodiment.

[0175] In addition, each functional unit in each embodiment of the present invention may be integrated into one processing unit, or each unit may exist physically separately, or two or more units may be integrated into one unit. The above-mentioned integrated unit may be implemented in the form of hardware or in the form of hardware plus software functional units.

[0176] The above-mentioned integrated unit implemented in the form of a software functional unit can be stored in a computer-readable storage medium. The above-mentioned software functional unit is stored in a storage medium, including a number of instructions for a computer device (which can be a personal computer, a server, or a network device, etc.) or a processor (English: processor) to perform some steps of the methods of various embodiments of the present invention. The aforementioned storage medium includes: U disk, mobile hard disk, read-only memory (English: Read-Only Memory, abbreviated: ROM), random access memory (English: Random Access Memory, abbreviated: RAM), disk or optical disk and other media that can store program codes.

[0177] The above is only a specific implementation of the present application, but the protection scope of the present application is not limited thereto. Any technician familiar with the technical field can easily think of changes or substitutions within the technical scope disclosed in the present application, which should be included in the protection scope of the present application. Therefore, the protection scope of the present application should be based on the protection scope of the claims.

[0178] The above description is only the preferred embodiment of the present application and is not intended to limit the present application. For those skilled in the art, the present application may have various modifications and variations. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present application shall be included in the protection scope of the present application.

Claims

1. An interface adaptation method, characterized in that: The method comprises: Acquire an initial interface image and an image pixel size of the initial interface image, wherein the image pixel size refers to the size of the initial interface image represented by a pixel unit as a length unit; Determine the device pixel size of the initial interface image when it is displayed on the target display device according to the image pixel size of the initial interface and the device pixel density of the target display device, wherein the device pixel size refers to the size of the initial interface image represented by device-independent pixel units as length units; the device pixel size is used to indicate the number of pixels and / or inches occupied by the initial interface image on the screen of the target display device when it is displayed on the target display device, and the number of pixels and / or inches occupied represent the size of the initial interface image; Determining a target pixel size of each element when displayed on the target display device according to the image pixel size, the initial pixel size of each element in the initial interface image, and the screen size of the target display device; Determining a target size of each font according to the device pixel size and the initial size of each font in the initial interface image; Based on the target pixel size of each of the elements and the target size of each of the fonts, the initial interface image is adapted to obtain and display an adapted target interface image.

2. The interface adaptation method according to claim 1, characterized in that: The determining, according to the pixel size of the image, the initial pixel size of each element in the initial interface image, and the screen size of the target display device, a target pixel size of each element when displayed on the target display device comprises: Calculating a first ratio of an initial pixel width of each of the elements to a pixel width in the pixel size of the image; Using a first product of the first ratio and the screen width of the target display device as a target pixel width in a target pixel size of each of the elements; Calculating a second ratio of an initial pixel height of each of the elements to a pixel height in the pixel size of the image; Calculate a second product of the second ratio and the screen height of the target display device, and use the second product as the target pixel height of each of the elements; The target pixel size is determined according to the target pixel width and the target pixel height.

3. The interface adaptation method according to claim 2, characterized in that: The determining the target pixel size according to the target pixel width and the target pixel height comprises: The second product is redundancy-adjusted, the adjusted second product is used as a new target pixel height of the element, and the target pixel width and the new target pixel height are used as the target pixel size.

4. The interface adaptation method according to claim 1, characterized in that: The step of determining the target size of each font according to the device pixel size and the initial size of each font in the initial interface image includes: Calculate the overall scaling ratio of the initial interface image according to the device pixel size and the screen size of the target display device; The target size of each font is determined according to the overall scaling ratio, the pixel density of the target display device, a preset font scaling ratio, and the initial size of each font in the initial interface image.

5. The interface adaptation method according to claim 4, characterized in that: The calculating the overall scaling ratio of the initial interface image according to the device pixel size and the screen size of the target display device includes: Calculating a third ratio of the screen width of the target display device to the pixel width in the device pixel size; Calculating a fourth ratio of the screen height of the target display device to the pixel height in the device pixel size; The third ratio and the fourth ratio are compared, and the smallest ratio between the third ratio and the fourth ratio is used as the overall scaling ratio.

6. The interface adaptation method according to claim 4, characterized in that: The determining the target size of each font according to the overall scaling ratio, the pixel density of the target display device, and the initial size of each font in the initial interface image includes: Calculating a third product of the initial height of the font and the overall scaling ratio; Calculating a fifth ratio of the third product to the preset font scaling ratio; A sixth ratio of the fifth ratio and the pixel density of the display device is calculated, and the sixth ratio is used as a target size of the font.

7. The interface adaptation method according to any one of claims 1 to 6, characterized in that: The determining, according to the image pixel size of the initial interface and the device pixel density of the target display device, the device pixel size of the initial interface image when displayed on the target display device comprises: The ratio of the pixel height in the pixel size of the image to the pixel density of the device is used as the pixel height in the pixel size of the device; The ratio of the pixel width in the image pixel size to the device pixel density is used as the pixel width in the device pixel size.

8. An interface adapter device, characterized in that: The device comprises: An acquisition module, used to acquire an initial interface image and an image pixel size of the initial interface image, wherein the image pixel size refers to the size of the initial interface image represented by a pixel unit as a length unit; A first determination module is used to determine the device pixel size of the initial interface image when it is displayed on the target display device according to the image pixel size of the initial interface and the device pixel density of the target display device, wherein the device pixel size refers to the size of the initial interface image represented by the device independent pixel unit as the length unit; the device pixel size is used to indicate the number of pixels and / or inches occupied by the initial interface image on the screen of the target display device when it is displayed on the target display device, and the number of pixels and / or inches occupied represent the size of the initial interface image; A second determining module, configured to determine a target pixel size of each element when displayed on the target display device according to the image pixel size, the initial pixel size of each element in the initial interface image, and the screen size of the target display device; A third determination module, used to determine a target size of each font according to the device pixel size and the initial size of each font in the initial interface image; The adaptation module is used to adapt the initial interface image based on the target pixel size of each element and the target size of each font, and obtain and display the adapted target interface image.

9. A computer device, characterized in that: include: A memory and a processor, wherein the memory stores a computer program that can be run on the processor, and when the processor executes the computer program, the steps of the method described in any one of claims 1 to 7 are implemented.

10. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores a computer program, which, when executed by a processor, implements the steps of the method according to any one of claims 1 to 7.

Images