Screen adaptation method and related device

By calculating the zoom ratio of the device and the game design draft, and adjusting the display method of elements according to the zoom ratio and the display mode selected by the user, the problem of incomplete display of elements and single display method on different devices is solved, improving the user experience.

CN119620989APending Publication Date: 2025-03-14HUNAN HAPPLY SUNSHINE INTERACTIVE ENTERTAINMENT MEDIA CO LTD
View PDF 0 Cites 0 Cited by

Patent Information

Application Number
CN202411832762.8
Authority / Receiving Office
CN · China
Patent Type
Applications(China)
Current Assignee / Owner
Filing Date
2024-12-12
Publication Date
2025-03-14

AI Technical Summary

Technical Problem

When existing games adapt to screen sizes of different devices, there are often problems with incomplete display of elements or single display of elements, resulting in poor user experience.

Method used

Provide a screen adaptation method to calculate the scaling ratio by obtaining the device screen size and the game design draft size. If the scaling ratio is less than or equal to the preset threshold, scale all elements according to the scaling ratio. If the zoom ratio is greater than the threshold, the user allows to select from multiple display modes and adjust the display method of the element according to the selected mode.

Benefits of technology

It avoids the incomplete display problem of element display due to scaling, and through the selection of multiple display modes, it enhances the diversity of element display methods and improves the user experience.

✦ Generated by Eureka AI based on patent content.

Smart Images

  • Figure CN119620989A_ABST
    Figure CN119620989A_ABST
Patent Text Reader

Abstract

The invention discloses a screen adaptation method and a related device, and relates to the technical field of screen display, and the method comprises the following steps: obtaining a screen size of a to-be-displayed device and a design draft size of a to-be-displayed game, calculating a zoom ratio according to the screen size and the design draft size, and if the zoom ratio is less than or equal to a preset threshold value, executing the screen adaptation; if yes, performing zooming display on all elements contained in the design manuscript according to the zooming ratio, otherwise, responding to a target display mode selected by a user from multiple preset display modes, and displaying the to-be-displayed elements in the design manuscript according to a display mode corresponding to the target display mode, the display modes and the to-be-displayed elements corresponding to the different display modes are different. According to the invention, when the zoom ratio is smaller than or equal to the preset threshold value, zooming is carried out according to the zoom ratio, the screen width and the screen height are considered, and the problem of incomplete element display does not occur; and when the zoom ratio is greater than the preset threshold value, multiple display modes are provided, so that the element display modes are not single, and the user experience is better.
Need to check novelty before this filing date? Find Prior Art

Description

Technical Field

[0001] The present application relates to the field of screen display technology, and in particular to a screen adaptation method and related devices. Background Art

[0002] At the initial design stage, current games are generally designed based on the full screen ratio of existing popular screens. However, the screen sizes of today's mobile phones, tablets and other devices vary widely, resulting in current games often having problems with incomplete element display or single element display when adapting to the screen sizes of different devices, which brings a bad user experience. Summary of the invention

[0003] In view of the above problems, the present application provides a screen adaptation method and related devices to solve the problems of incomplete element display or single element display mode in the prior art. The specific solution is as follows:

[0004] The first aspect of the present application provides a screen adaptation method, comprising:

[0005] Get the screen size of the device to be displayed and the design size of the game to be displayed;

[0006] Calculate the zoom ratio according to the screen size and the design draft size;

[0007] If the zoom ratio is less than or equal to a preset threshold, all elements included in the design draft are zoomed and displayed according to the zoom ratio;

[0008] If the zoom ratio is greater than the preset threshold, in response to a target display mode selected by the user from a plurality of preset display modes, the elements to be displayed in the design draft are displayed according to the display mode corresponding to the target display mode, wherein the display modes and elements to be displayed corresponding to different display modes are different.

[0009] In a possible implementation, the zooming and displaying all elements included in the design draft according to the zoom ratio includes:

[0010] Obtaining the target display position selected by the user;

[0011] Modifying the position attributes of all the elements according to the target display position, and modifying the size attributes of all the elements according to the zoom ratio, to obtain modified attributes of all the elements;

[0012] All the elements are displayed according to the modified attributes.

[0013] In a possible implementation, the target display position is one of centered, left-aligned, and right-aligned;

[0014] The modifying the position attributes of all the elements according to the target display position includes:

[0015] If the target display position is the center, the position attributes of all the elements are kept unchanged;

[0016] If the target display position is the left alignment, then the position attributes of all the elements are changed to the first attribute value representing the left alignment under fixed;

[0017] If the target display position is the right alignment, the position attributes of all the elements are changed to the second attribute value representing the right alignment under fixed.

[0018] In a possible implementation, if the target display mode is a loose mode, displaying the elements to be displayed in the design draft according to a display mode corresponding to the target display mode includes:

[0019] According to the importance attributes of all the elements, the elements are divided into first type elements and second type elements, the elements of the first type are determined as first elements to be displayed, and the elements of the second type are determined as second elements to be displayed, wherein the importance of the first elements to be displayed is higher than that of the second elements to be displayed;

[0020] modifying a size attribute of the first to-be-displayed element according to the scaling ratio;

[0021] Determine a screen blank height according to the screen size, the height value of the first element to be displayed, and the height value of the second element to be displayed;

[0022] Calculate the height distance between the first to-be-displayed element and the second to-be-displayed element according to the screen blank height;

[0023] Modify the outer margin attributes of the first element to be displayed and the second element to be displayed according to the height spacing to obtain modified attributes of the first element to be displayed and the second element to be displayed;

[0024] The first element to be displayed and the second element to be displayed are displayed according to their respective modified attributes.

[0025] In a possible implementation, if the target display mode is a compact mode, displaying the elements to be displayed in the design draft according to a display mode corresponding to the target display mode includes:

[0026] According to the importance attributes of all the elements, the elements are divided into third type elements and fourth type elements, wherein the importance of the third type elements is higher than that of the fourth type elements;

[0027] Modify the display attribute of the fourth type element to non-display, and modify the display attribute of the third type element to Flexbox, so as to determine the third type element as the element to be displayed;

[0028] Modifying the margin attribute of the element to be displayed according to the preset spacing value to obtain the modified attribute of the element to be displayed;

[0029] The element to be displayed is displayed according to the modified attribute of the element to be displayed.

[0030] In a possible implementation, after displaying the elements to be displayed in the design draft in a display manner corresponding to the target display mode, the method further includes:

[0031] In response to the display mode switching instruction, the elements to be displayed in the design draft are displayed in a display manner corresponding to the switched mode.

[0032] A second aspect of the present application provides a screen adaptation device, comprising:

[0033] A size acquisition module is used to obtain the screen size of the device to be displayed and the design size of the game to be displayed;

[0034] A zoom ratio calculation module, used to calculate the zoom ratio according to the screen size and the design draft size;

[0035] A first zoom processing module, configured to zoom and display all elements included in the design draft according to the zoom ratio if the zoom ratio is less than or equal to a preset threshold;

[0036] The second zoom processing module is used to display the elements to be displayed in the design draft according to the display mode corresponding to the target display mode in response to the target display mode selected by the user from the preset multiple display modes if the zoom ratio is greater than the preset threshold value, wherein the display modes and elements to be displayed corresponding to different display modes are different.

[0037] A third aspect of the present application provides a computer program product, comprising computer-readable instructions. When the computer-readable instructions are executed on an electronic device, the electronic device implements the screen adaptation method of the first aspect or any implementation of the first aspect.

[0038] A fourth aspect of the present application provides an electronic device, comprising at least one processor and a memory connected to the processor, wherein:

[0039] The memory is used to store computer programs;

[0040] The processor is used to execute the computer program so that the electronic device can implement the screen adaptation method of the above-mentioned first aspect or any implementation manner of the first aspect.

[0041] In a fifth aspect, the present application provides a computer storage medium, which carries one or more computer programs. When the one or more computer programs are executed by an electronic device, the electronic device can implement the screen adaptation method of the above-mentioned first aspect or any implementation method of the first aspect.

[0042] By means of the above technical solution, the screen adaptation method provided by the present application obtains the screen size of the device to be displayed and the size of the design draft of the game to be displayed, and calculates the zoom ratio according to the screen size and the size of the design draft. When the zoom ratio is less than the preset threshold, in order to avoid the problem of incomplete display of elements caused by scaling according to the adapted screen width in the prior art, the present application can scale and display all elements contained in the design draft according to the zoom ratio when the zoom ratio is less than or equal to the preset threshold. Since both the screen width and the screen height are taken into account during scaling, the problem of incomplete display of elements will not occur. However, when the zoom ratio is greater than a preset threshold, although all elements can be displayed according to the existing zoom method that adapts to the screen width, the display method of the elements is fixed to zoom display with the top center of the screen as the zoom anchor point, and the display method is single. In order to overcome this problem, the present application provides users with a variety of display modes. Different display modes correspond to different display methods and elements to be displayed, so that users can select a display mode as the target display mode according to their own needs. Then, the present application can respond to the target display mode selected by the user from the preset multiple display modes, and display the elements to be displayed in the design draft according to the display method corresponding to the target display mode. The present application sets a variety of display modes so that the element display method is not single, and the user experience is better. BRIEF DESCRIPTION OF THE DRAWINGS

[0043] The above and other features, advantages and aspects of the embodiments of the present disclosure will become more apparent with reference to the following detailed description in conjunction with the accompanying drawings. Throughout the accompanying drawings, the same or similar reference numerals represent the same or similar elements. It should be understood that the drawings are schematic and the originals and elements are not necessarily drawn to scale.

[0044] Figure 1 A schematic diagram of a system architecture provided for this application;

[0045] Figure 2 A schematic diagram of an optional hardware structure of the terminal 100 provided in this application;

[0046] Figure 3 A schematic diagram of the structure of a server 200 provided in this application;

[0047] Figure 4 A flowchart of a screen adaptation method provided by this application;

[0048] Figure 5 A comparison chart of the Gobang game interface when it is normally displayed and when it is scaled to fit the screen width when the zoom ratio is less than 1;

[0049] Figure 6 A comparison diagram of the Gobang game interface displayed in a normal manner and in a zoomed-in manner according to the zoom ratio when the zoom ratio is less than or equal to 1;

[0050] Figure 7 A comparison diagram of the Gobang game interface when it is displayed normally and when the zoom ratio is greater than 1 and the game interface is displayed in a zoomed manner to fit the screen width;

[0051] Figure 8 A schematic diagram of a selection interface for a user to select a target display location provided by the present application;

[0052] Fig. 9 The effect picture of the game interface provided by this application is displayed on the left;

[0053] Fig.10 The effect picture of the game interface provided by this application is displayed on the right;

[0054] Fig.11 A schematic diagram of a target display mode selection interface provided in this application;

[0055] Fig.12 The display interface effect diagram of the loose mode provided by this application;

[0056] Fig.13 This is a display interface effect diagram of the compact mode provided by this application;

[0057] Fig.14 A schematic diagram of a display mode switching button provided for this application;

[0058] Fig.15 A schematic diagram of the structure of a screen adaptation device provided in this application;

[0059] Fig.16 A schematic diagram of the structure of an electronic device provided in this application. DETAILED DESCRIPTION

[0060] The following describes the embodiments of the present application in conjunction with the drawings in the embodiments of the present application. The terms used in the implementation method section of the present application are only used to explain the specific embodiments of the present application, and are not intended to limit the present application.

[0061] The embodiments of the present application are described below in conjunction with the accompanying drawings. Those skilled in the art will appreciate that, with the development of technology and the emergence of new scenarios, the technical solutions provided in the embodiments of the present application are also applicable to similar technical problems.

[0062] The terms "first", "second", etc. in the specification and claims of the present application and the above-mentioned drawings are used to distinguish similar objects, and need not be used to describe a specific order or sequential order. It should be understood that the terms used in this way can be interchangeable under appropriate circumstances, which is only to describe the distinction mode adopted by the objects of the same attributes when describing in the embodiments of the present application. In addition, the terms "including" and "having" and any of their variations are intended to cover non-exclusive inclusions, so that the process, method, system, product or equipment comprising a series of units need not be limited to those units, but may include other units that are not clearly listed or inherent to these processes, methods, products or equipment.

[0063] See also Figure 1 , Figure 1 A schematic diagram of a system architecture is shown. The system may include a terminal 100 and a server 200. The server 200 may include one or more servers ( Figure 1 In the example, a server is included, and the server 200 can provide the method provided in the embodiment of the present application for one or more terminals.

[0064] Among them, an application can be installed on the terminal 100, and the above application and web page can provide an interface. The terminal 100 can receive relevant parameters entered by the user on the interface and send the above parameters to the server 200. The server 200 can obtain processing results based on the received parameters and return the processing results to the terminal 100.

[0065] It should be understood that in some optional implementations, the terminal 100 can also complete the action of obtaining the processing result based on the received parameters by itself without the cooperation of the server, and the embodiments of the present application are not limited to this.

[0066] Next describe Figure 1 The product form of the mid-terminal 100;

[0067] The terminal 100 in the embodiment of the present application can be a mobile phone, a tablet computer, a wearable device, a vehicle-mounted device, an augmented reality (AR) / virtual reality (VR) device, a laptop computer, an ultra-mobile personal computer (UMPC), a netbook, a personal digital assistant (PDA), etc., and the embodiment of the present application does not impose any restrictions on this.

[0068] Figure 2 An optional hardware structure diagram of the terminal 100 is shown.

[0069] refer to Figure 2 As shown, the terminal 100 may include a radio frequency unit 110, a memory 120, an input unit 130, a display unit 140, a camera 150 (optional), an audio circuit 160 (optional), a speaker 161 (optional), a microphone 162 (optional), an earphone jack 163 (optional), a processor 170, an external interface 180, a power supply 190 and other components. Those skilled in the art will appreciate that Figure 2 These are merely examples of terminals or multi-function devices and do not constitute limitations on the terminals or multi-function devices, which may include more or fewer components than those shown in the figures, or combinations of certain components, or different components.

[0070] The input unit 130 can be used to receive input digital or character information, and generate key signal input related to the user settings and function control of the portable multifunctional device. Specifically, the input unit 130 may include a touch screen 131 (optional) and / or other input devices 132. The touch screen 131 can collect the user's touch operations on or near it (such as the user's operation on or near the touch screen using any suitable object such as fingers, joints, stylus, etc.), and drive the corresponding connection device according to a pre-set program. The touch screen can detect the user's touch action on the touch screen, convert the touch action into a touch signal and send it to the processor 170, and can receive and execute the command sent by the processor 170; the touch signal at least includes the touch point coordinate information. The touch screen 131 can provide an input interface and an output interface between the terminal 100 and the user. In addition, the touch screen can be implemented using multiple types such as resistive, capacitive, infrared and surface acoustic wave. In addition to the touch screen 131, the input unit 130 can also include other input devices. Specifically, other input devices 132 may include, but are not limited to, one or more of a physical keyboard, function keys (such as a volume control key, a switch key, etc.), a trackball, a mouse, a joystick, and the like.

[0071] Among them, the input device 132 can receive input data and the like.

[0072] The display unit 140 may be used to display information input by a user or provided to a user, various menus of the terminal 100, an interactive interface, file display, and / or playback of any multimedia file.

[0073] The memory 120 can be used to store instructions and data. The memory 120 can mainly include an instruction storage area and a data storage area. The data storage area can store various data, such as multimedia files, texts, etc.; the instruction storage area can store software units such as operating systems, applications, instructions required for at least one function, or their subsets and extensions. It can also include a non-volatile random access memory; provide the processor 170 with hardware, software and data resources including management of computing and processing equipment, and support control software and applications. It is also used for the storage of multimedia files, and the storage of running programs and applications.

[0074] The processor 170 is the control center of the terminal 100. It uses various interfaces and lines to connect various parts of the entire terminal 100. By running or executing instructions stored in the memory 120 and calling data stored in the memory 120, it executes various functions of the terminal 100 and processes data, thereby controlling the terminal device as a whole. Optionally, the processor 170 may include one or more processing units; preferably, the processor 170 may integrate an application processor and a modem processor, wherein the application processor mainly processes the operating system, user interface and application program, and the modem processor mainly processes wireless communication. It is understandable that the above-mentioned modem processor may not be integrated into the processor 170. In some embodiments, the processor and the memory may be implemented on a single chip, and in some embodiments, they may also be implemented separately on separate chips. The processor 170 may also be used to generate corresponding operation control signals, send them to corresponding components of the computing and processing device, read and process data in the software, especially read and process data and programs in the memory 120, so that each functional module therein performs corresponding functions, thereby controlling the corresponding components to act according to the requirements of the instructions.

[0075] Among them, the memory 120 can be used to store software codes related to the screen adaptation method, the processor 170 can execute the steps of the screen adaptation method, and can also schedule other units (such as the above-mentioned input unit 130 and display unit 140) to implement corresponding functions.

[0076] The radio frequency unit 110 (optional) can be used for receiving and sending information or receiving and sending signals during a call, for example, after receiving the downlink information of the base station, it is sent to the processor 170 for processing; in addition, the designed uplink data is sent to the base station. Generally, the RF circuit includes but is not limited to an antenna, at least one amplifier, a transceiver, a coupler, a low noise amplifier (Low Noise Amplifier, LNA), a duplexer, etc. In addition, the radio frequency unit 110 can also communicate with network devices and other devices through wireless communication. The wireless communication can use any communication standard or protocol, including but not limited to Global System of Mobile Communication (Global System of Mobile Communication, GSM), General Packet Radio Service (General Packet Radio Service, GPRS), Code Division Multiple Access (Code Division Multiple Access, CDMA), Wideband Code Division Multiple Access (Wideband Code Division Multiple Access, WCDMA), Long Term Evolution (Long Term Evolution, LTE), email, Short Messaging Service (SMS), etc.

[0077] In this embodiment of the present application, the RF unit 110 can send data to the server 200 and receive processing results sent by the server 200.

[0078] It should be understood that the radio frequency unit 110 is optional and can be replaced by other communication interfaces, such as a network port.

[0079] The terminal 100 also includes a power supply 190 (such as a battery) for supplying power to various components. Preferably, the power supply can be logically connected to the processor 170 through a power management system, so that the power management system can manage functions such as charging, discharging, and power consumption.

[0080] The terminal 100 further includes an external interface 180 , which may be a standard Micro USB interface or a multi-pin connector, and may be used to connect the terminal 100 to communicate with other devices, or to connect a charger to charge the terminal 100 .

[0081] Although not shown, the terminal 100 may also include a flashlight, a wireless fidelity (WiFi) module, a Bluetooth module, sensors with different functions, etc., which are not described in detail here. Some or all of the methods described below may be applied in the following embodiments. Figure 2 In the terminal 100 shown.

[0082] Next describe Figure 1 The product form of the server 200;

[0083] Figure 3 A structural diagram of a server 200 is provided, such as Figure 3 As shown, the server 200 includes a bus 201, a processor 202, a communication interface 203, and a memory 204. The processor 202, the memory 204, and the communication interface 203 communicate with each other via the bus 201.

[0084] The bus 201 may be a Peripheral Component Interconnect (PCI) bus or an Extended Industry Standard Architecture (EISA) bus. The bus may be divided into an address bus, a data bus, a control bus, etc. For ease of representation, Figure 3 Only one thick line is used in the diagram, but this does not mean that there is only one bus or only one type of bus.

[0085] The processor 202 may be any one or more of a central processing unit (CPU), a graphics processing unit (GPU), a microprocessor (MP), or a digital signal processor (DSP).

[0086] The memory 204 may include a volatile memory, such as a random access memory (RAM). The memory 204 may also include a non-volatile memory, such as a read-only memory (ROM), a flash memory, a hard disk drive (HDD), or a solid state drive (SSD).

[0087] The memory 204 may be used to store software codes related to the screen adaptation method, and the processor 202 may execute the steps of the screen adaptation method of the chip, and may also schedule other units to implement corresponding functions.

[0088] It should be understood that the above-mentioned terminal 100 and server 200 can be centralized or distributed devices, and the processors in the above-mentioned terminal 100 and server 200 (such as processor 170 and processor 202) can be hardware circuits (such as application-specific integrated circuits (ASIC), field-programmable gate arrays (FPGA), general-purpose processors, DSPs, microprocessors or microcontrollers, etc.), or a combination of these hardware circuits. For example, the processor can be a hardware system with an instruction execution function, such as a CPU, DSP, etc., or a hardware system without an instruction execution function, such as an ASIC, FPGA, etc., or a combination of the above-mentioned hardware systems without an instruction execution function and hardware systems with an instruction execution function.

[0089] The present application provides a screen adaptation method. The screen adaptation method of the embodiment of the present application is described in detail below with reference to the accompanying drawings.

[0090] Reference Figure 4 , Figure 4 A schematic diagram of a screen adaptation method provided in an embodiment of the present application, the method may include:

[0091] Step S401: Obtain the screen size of the device to be displayed and the design size of the game to be displayed.

[0092] Here, the screen size of the device to be displayed includes the pixel width and pixel height of the screen, and the design draft size includes the standard width and standard height of the design draft.

[0093] Step S402: Calculate the zoom ratio according to the screen size and the design draft size.

[0094] Optionally, this embodiment may first calculate the screen aspect ratio according to the screen size, then calculate the design draft aspect ratio according to the design draft size, and finally divide the screen aspect ratio by the design draft aspect ratio to obtain the zoom ratio.

[0095] Step S403, determine whether the zoom ratio is less than or equal to a preset threshold, if so, execute step S404, if not, execute step S405.

[0096] Among them, a zoom ratio less than a preset threshold value indicates that the screen of the display device is flatter than the design draft, and a zoom ratio greater than the preset threshold value indicates that the screen is more slender than the design draft.

[0097] Optionally, the preset threshold is 1.

[0098] Step S404: If the zoom ratio is less than or equal to the preset threshold, all elements included in the design draft are zoomed and displayed according to the zoom ratio.

[0099] In the prior art, when the screen size is inconsistent with the design draft size, the design draft will be scaled to fit the screen width, that is, the design draft will be aligned with the screen width. This scaling method causes the problem of incomplete display of elements when the scaling ratio is less than a preset threshold. For example, taking the preset threshold as 1 as an example, see Figure 5 This is a comparison of the Gobang game interface displayed normally and when the zoom ratio is less than 1 and the game interface is scaled to fit the screen width. Figure 5 The diagram on the left shows the normal display of the Gobang game interface. The zoomed-in image on the right is missing the "sound effect switch" and "undo move" elements.

[0100] In order to avoid a bad gaming experience for users due to non-display of some elements, the embodiment of the present application can display all elements contained in the design draft in scale according to the scale ratio when the scale ratio is less than or equal to 1. The scaled display effect comparison diagram is shown in FIG. Figure 6 As shown, we can see that Figure 6 Compared with the normally displayed Gobang game interface shown on the left, this embodiment is zoomed and displayed according to the zoom ratio ( Figure 6 The method shown on the right side will not cause the problem of incomplete element display, which improves the user's gaming experience.

[0101] Step S405: If the zoom ratio is greater than a preset threshold, in response to the target display mode selected by the user from the preset multiple display modes, the elements to be displayed in the design draft are displayed according to the display mode corresponding to the target display mode, wherein the display modes and elements to be displayed corresponding to different display modes are different.

[0102] The prior art performs scaling in a manner adapted to the screen width. When the scaling ratio is greater than a preset threshold, the top center of the screen is used as the scaling anchor point for scaling display. This display will result in a large amount of blank space at the bottom of the screen. For example, if the preset threshold is 1, Figure 7 As shown, compared to Figure 7 The diagram on the left shows the normal display of the Gobang game interface, and the zoomed image on the right shows a large amount of blank space at the bottom of the screen.

[0103] Since the zoom ratio is greater than 1, only the above Figure 7 The zooming method shown results in a single element display method, and the user can only use related elements at the top of the screen, resulting in a poor gaming experience.

[0104] In order to provide users with more diversified choices and enable users to select a suitable display interface according to their own needs, this application provides a variety of display modes, and different display modes correspond to different display methods.

[0105] In addition, considering that some elements in the game interface are rarely used during the game, for example, the "user information" in the Gobang game is rarely used by game users. Displaying it in the game interface will waste screen space. In order to improve the utilization of screen space, the embodiment of the present application can set different elements to be displayed for different display modes.

[0106] Then, when the user selects a display mode, this embodiment uses the display mode as the target display mode, and then displays the elements to be displayed in the design draft according to the display method corresponding to the target display mode.

[0107] The screen adaptation method provided by the present application obtains the screen size of the device to be displayed and the size of the design draft of the game to be displayed, and calculates the zoom ratio according to the screen size and the size of the design draft. When the zoom ratio is less than a preset threshold, in order to avoid the problem of incomplete display of elements caused by scaling according to the adapted screen width in the prior art, the present application can scale and display all elements contained in the design draft according to the zoom ratio when the zoom ratio is less than or equal to the preset threshold. Since both the screen width and the screen height are taken into account during scaling, the problem of incomplete display of elements will not occur. However, when the zoom ratio is greater than a preset threshold, although all elements can be displayed according to the existing zoom method that adapts to the screen width, the display method of the elements is fixed to zoom display with the top center of the screen as the zoom anchor point, and the display method is single. In order to overcome this problem, the present application provides users with a variety of display modes. Different display modes correspond to different display methods and elements to be displayed, so that users can select a display mode as the target display mode according to their own needs. Then, the present application can respond to the target display mode selected by the user from the preset multiple display modes, and display the elements to be displayed in the design draft according to the display method corresponding to the target display mode. The present application sets a variety of display modes so that the element display method is not single, and the user experience is better.

[0108] This application enhances the usability and visual comfort of the game interface through different adjustment methods of zoom ratio less than or equal to a preset threshold and zoom ratio greater than a preset threshold, making the game perform better on various devices.

[0109] In some embodiments of the present application, the process of the above step S404 "zooming and displaying all elements included in the design draft according to the zoom ratio" is introduced.

[0110] like Figure 6As shown in the figure on the right, after scaling according to the zoom ratio, the game interface can make full use of the screen height space, but some blank space will be left on both sides of the screen. Considering that different users may prefer to use different screen areas, for example, some users prefer to use the area on the right side of the screen as much as possible, while others prefer to use the area on the left side of the screen as much as possible. In addition, there are some special cases, such as part of the screen is damaged, and the undamaged part of the screen can display content.

[0111] In order to provide users with more choices, this embodiment can provide users with a selection interface so that users can select the display position of the game interface on the screen on the selection interface. For the convenience of subsequent introduction, the display position is used as the target display position. Then, this embodiment can obtain the target display position selected by the user, and then modify the position attributes of all elements according to the target display position, and modify the size attributes of all elements according to the zoom ratio to obtain the modified attributes of all elements, and then all elements can be displayed according to the modified attributes.

[0112] This embodiment enables the game interface to be displayed at a desired location according to user needs, thereby improving the user's gaming experience.

[0113] In a possible implementation, the target display position is one of the following: centered, left-aligned, and right-aligned. Figure 8 As shown in FIG. 1 , it is a schematic diagram of a selection interface for a user to select a target display position. Figure 8 On this selection interface, not only the reason for making a selection is shown to the user, but also a selection button is provided. The user can choose from "Center the interface", "Left the interface" and "Right the interface" according to their own usage habits.

[0114] If the user selects "center the interface", that is, the target display position is centered, the above process of "modifying the position attributes of all elements according to the target display position" may include: keeping the position attributes of all elements unchanged.

[0115] If the user selects "Interface Aligned to the Left", that is, the target display position is left, the above process of "modifying the position attributes of all elements according to the target display position" may include: the position attributes of all elements are changed to the first attribute value under fixed that represents left alignment, for example, the first attribute value is left:0.

[0116] If the user selects "Right-aligned interface", that is, the target display position is right-aligned, the above process of "modifying the position attributes of all elements according to the target display position" may include: the position attributes of all elements are changed to the second attribute value under fixed that represents right-alignment, for example, the second attribute value is right:0.

[0117] Specifically, in this embodiment, the default display mode is to center the game interface. Therefore, when the target display position is centered, there is no need to modify any position attributes of the elements, and only the zoom ratio provided is required. If the target display position is left-aligned, the position attributes of all elements need to be adjusted to left:0 under fixed. If the target display position is right-aligned, the position attributes of all elements need to be adjusted to right:0 under fixed.

[0118] In an optional embodiment, the implementation of this embodiment is as follows: All elements of the game interface are wrapped in a main container element, such as a Element, which can be called the root element. Assuming the scaling ratio calculated above is 0.85, the root element can be scaled. The scaling operation here can be achieved through the transform attribute in Cascading Style Sheets (CSS). The specific code is as follows:

[0119]

[0120] <!-- All elements of the game interface -->

[0121]

[0122] Among them, "transform: scale(0.85)" means reducing the width and height of the root element by 0.85, and "transform-origin: top center" means that the center point of the scaling is the top center of the element.

[0123] In order to further adjust the position of all elements (i.e. the game interface) according to the user's selection, it is also necessary to further modify the position attribute of the root element to complete the related operations of centering, left aligning or right aligning.

[0124] Among them, center: keep the default state, no additional adjustment is required. At this time, the position attribute of the root element can be static (default value) or relative / absolute, etc., depending on the layout requirements. Since the zoom operation has been performed, the interface will automatically be displayed in the middle of the screen. For example, the display effect is shown in Figure 6 .

[0125] Left: Set the position property of the root element to fixed, and then use left: 0 to align the interface to the left, which will cause the left side of the interface to be close to the left side of the screen, leaving a blank area on the right. For example, see Fig. 9 The game interface shown is displayed on the left.

[0126] Right: Also set the position attribute of the root element to fixed, and then use right: 0 to align the interface to the right. This will make the right side of the interface close to the right side of the screen, leaving a blank area on the left. For example, see Fig.10 The game interface shown is displayed on the right.

[0127] In summary, this embodiment provides a variety of game interface positions for users to choose when the zoom ratio is less than 1, and zooms and displays according to the position and zoom ratio selected by the user. This can not only ensure that all elements are displayed on the screen, but also ensure that the display method conforms to the user's usage habits or special requirements, thereby improving the user's gaming experience.

[0128] The above scenario with a zoom ratio less than 1 is particularly suitable for the screen ratio of a foldable phone after unfolding. After scaling, the elements will not be too small to be operated, and aligning the main interface to the left or right can more effectively avoid the crease on the foldable screen and obtain a better user experience.

[0129] In other embodiments of the present application, the process of the above step S405 "displaying the elements to be displayed in the design draft according to the display mode corresponding to the target display mode" is introduced.

[0130] Optionally, the multiple display modes provided by the present application include but are not limited to the following modes: compact mode and loose mode. In order to enable those skilled in the art to better understand the present embodiment, the compact mode and loose mode are taken as examples for description below.

[0131] In this embodiment, see Fig.11 As shown in FIG. 1 , it is a schematic diagram of the target display mode selection interface provided by the present application. Fig.11 The selection interface shown not only shows the user the reason for making a selection, but also provides a selection button, through which the user can choose between "compact mode" and "loose mode" according to his or her own usage habits.

[0132] Embodiment 1: If the target display mode is the loose mode, that is, the user selects the "loose mode" in the selection interface shown in 11, then the process of "displaying the elements to be displayed in the design draft according to the display method corresponding to the target display mode" may include: dividing all elements into first type elements and second type elements according to their respective importance attributes, determining the first type elements as the first elements to be displayed, and determining the second type elements as the second elements to be displayed, wherein the importance of the first elements to be displayed is higher than the importance of the second elements to be displayed; modifying the size attribute of the first element to be displayed according to the zoom ratio; determining the screen blank height according to the screen size, the height value of the first element to be displayed, and the height value of the second element to be displayed; calculating the height spacing between the first element to be displayed and the second element to be displayed according to the screen blank height; modifying the margin attributes of the first element to be displayed and the second element to be displayed according to the height spacing to obtain the modified attributes of the first element to be displayed and the second element to be displayed; displaying the first element to be displayed and the second element to be displayed according to their modified attributes.

[0133] Specifically, in the process of writing game codes, this embodiment can identify and mark those key elements that require frequent user interaction. These important elements will be specially processed during the subsequent interface zooming process to ensure that they always remain prominent and interactive in the user's field of view.

[0134] For example, the "Start Game" button in the game interface is a typical important element. When editing the code, we can add the importance attribute to this button, that is, the 'important' attribute. The specific code is as follows:

[0135] <button class="start-button" data-important="true"> Start the game< / button>

[0136] Among them, "data-important" is true, indicating an important element; "data-important" is false, indicating a non-important element.

[0137] Of course, the above-mentioned "data-important" may also be a specific importance value, which is not specifically limited in this embodiment.

[0138] Preferably, since some elements will be displayed on the same line, such as Figure 5 The "sound effect switch" and "undo move" shown in the left figure. In order to avoid that some of these elements are important elements and are enlarged, while other elements are unimportant elements and are not enlarged, resulting in an unsightly game interface, this embodiment can identify and mark adjacent elements that are parallel and have the same height as the important elements during the writing of the game code (for example, the "sound effect switch" in the interface is marked as an important element, and the adjacent "undo move" should also be marked as an important element). If the adjacent element belongs to the same parent container as the current important element, the adjacent element is marked as an important element at the same time, and the coordination of the interface can be guaranteed when it is enlarged later.

[0139] Based on the above-mentioned pre-added 'important' attribute, this embodiment can divide all elements into first type elements and second type elements, wherein the first type elements refer to important elements, which are used as the first elements to be displayed in this embodiment, and the second type elements refer to unimportant elements, which are used as the second elements to be displayed in this embodiment.

[0140] Optionally, you can use the DOM (Document Object Model) query method querySelectorAll("[data-important='true']") to find all elements with the data-important attribute and the attribute value true. These elements are important elements, that is, the first elements to be displayed.

[0141] At the same time, you can use the DOM query method querySelectorAll("[data-important=false]") to find all elements with the data-important attribute and the attribute value of false. These elements are non-important elements, that is, the second elements to be displayed.

[0142] In loose mode, important elements can be enlarged to highlight their importance and ensure that users can easily see and interact with them on various screen sizes; non-important elements do not need to be enlarged to distinguish them from important elements.

[0143] Based on this, this embodiment can modify the size attribute of the first element to be displayed according to the zoom ratio. For example, taking the zoom ratio as 1.2 as an example, this embodiment can apply the style: transform: scale(1.2) to the important element. Since the zoom ratio is greater than 1, after modifying the size attribute, the first element to be displayed can be enlarged and displayed.

[0144] Further, if Figure 7 As shown in the figure on the right, the existing display method can make full use of the screen width space when the zoom ratio is greater than 1, but it will leave blank space on the screen height. In order to make full use of the blank area on the screen height, you can optionally use the getBoundingClientRect method to obtain the height value of each element, that is, obtain the height value of the first element to be displayed and the second element to be displayed. Then, according to the screen size (specifically the pixel height of the screen), the height values ​​of the first element to be displayed and the second element to be displayed, combined with the existing element layout, determine the screen blank height. Then, according to the screen blank height and the existing element layout, calculate the height spacing of the first element to be displayed and the second element to be displayed. Finally, you can modify the margin attribute of the first element to be displayed and the second element to be displayed according to the height spacing, that is, the margin attribute, so as to increase the height spacing between the elements, so that all elements can be evenly distributed on the screen, fill the screen, and avoid blank space at the bottom.

[0145] The first element to be displayed and the second element to be displayed are displayed according to the modified attributes provided by the present application. The display effect is as follows: Fig.12 As shown, "starting the game" is more important. Fig.12 Enlarge the display.

[0146] The loose mode provided in this embodiment enables important elements to be enlarged and highlighted, while the entire game interface can fully utilize the screen space, providing users with a comfortable and intuitive visual and interactive experience.

[0147] Embodiment 2: If the target display mode is the compact mode, that is, the user Fig.11 If "compact mode" is selected in the selection interface shown, the process of "displaying the elements to be displayed in the design draft according to the display method corresponding to the target display mode" may include: dividing all elements into third-type elements and fourth-type elements according to their respective importance attributes, wherein the importance of the third-type elements is higher than that of the fourth-type elements; modifying the display attribute of the fourth-type elements to not display, and modifying the display attribute of the third-type elements to Flexbox, so as to determine the third-type elements as the elements to be displayed; modifying the margin attributes of the elements to be displayed according to the preset spacing value to obtain the modified attributes of the elements to be displayed; and displaying the elements to be displayed according to the modified attributes of the elements to be displayed.

[0148] Optionally, the third type element is the same as the first type element, and the fourth type element is the same as the second type element.

[0149] In compact mode, users prefer elements to be as compact as possible so as to occupy less screen space. To this end, this embodiment can modify the display properties of the fourth type of elements with relatively low importance to display none, so that the game interface only displays important elements, namely the third type of elements.

[0150] The specific code to change the display attribute of the fourth type of element to none is as follows:

[0151] document.querySelectorAll("[data-important=false]").forEach(element => {

[0152] element.style.display = 'none';

[0153] });

[0154] At the same time, this embodiment can adjust the display attribute display of the third type element to Flexbox, so as to ensure that the main interface of the game is displayed in the center in the vertical direction through the Flexbox layout. The specific code implementation is as follows.

[0155] body {

[0156] display: flex;

[0157] flex-direction: column; / * vertical arrangement* /

[0158] align-items: center; / * Horizontal center * /

[0159] }

[0160] In order to bring important elements closer to the center of the screen and fill up the blank area as much as possible, this embodiment can modify the margin attribute of the element to be displayed according to a preset spacing value. For example, the preset spacing value is 10.

[0161] For example, see Fig.13 The schematic diagram of the display effect of the compact mode is shown in FIG. Fig.13 , the non-important element "user information" is hidden, and only the important elements are retained.

[0162] After the above display processing, users can experience a more compact layout, ensuring that important elements are highlighted while non-important elements are hidden, which improves the neatness and usability of the game interface.

[0163] In a possible implementation, this embodiment can also add a floating window function (i.e., a display mode switching button) to the game interface, allowing the user to flexibly switch between multiple display modes. Optionally, the display mode switching button can be fixed in a corner of the screen for easy access by the user at any time. For example, see Fig.14 The button shown in the upper right corner, the user can adjust the layout by clicking the display mode switching button, then this embodiment can respond to the display mode switching instruction and display the elements to be displayed in the design draft according to the display mode corresponding to the switched mode. Fig.14 After pressing the button shown, you can Fig.12 Switch to Fig.13 , or by Fig.13 Switch to Fig.12 .

[0164] In summary, this embodiment can realize the rapid switching of the game interface layout through multiple display modes combined with the display mode switching button, effectively improving the compatibility of the game and the user experience. By providing user options, the user's personalized experience is increased, and the operating habits of different users can be better adapted.

[0165] A screen adaptation method provided by an embodiment of the present application is introduced above, and a device for executing the above screen adaptation method will be introduced below.

[0166] See also Fig.15 , Fig.15 This is a schematic diagram of the structure of a screen adaptation device provided in an embodiment of the present application. Fig.15 As shown, the device may include:

[0167] The size acquisition module 501 is used to acquire the screen size of the device to be displayed and the size of the design draft of the game to be displayed;

[0168] A zoom ratio calculation module 502, used to calculate the zoom ratio according to the screen size and the design draft size;

[0169] The first zoom processing module 503 is used to zoom and display all elements included in the design draft according to the zoom ratio if the zoom ratio is less than or equal to a preset threshold;

[0170] The second zoom processing module 504 is used to display the elements to be displayed in the design draft according to the display mode corresponding to the target display mode in response to the target display mode selected by the user from the preset multiple display modes if the zoom ratio is greater than a preset threshold value, wherein the display modes and elements to be displayed corresponding to different display modes are different.

[0171] In a possible implementation, when the first zoom processing module zooms and displays all elements included in the design draft according to the zoom ratio, it can be specifically used to:

[0172] Get the target display position selected by the user;

[0173] Modify the position attributes of all elements according to the target display position, and modify the size attributes of all elements according to the zoom ratio to obtain the modified attributes of all elements;

[0174] Display all elements according to the modified attributes.

[0175] In a possible implementation, the target display position is one of centered, left-aligned, and right-aligned.

[0176] Then, when the first scaling processing module modifies the position attributes of all elements according to the target display position, it can be specifically used to:

[0177] If the target display position is centered, keep the position attributes of all elements unchanged;

[0178] If the target display position is left-aligned, change the position attribute of all elements to the first attribute value representing left-aligned under fixed;

[0179] If the target display position is right-aligned, the position attribute of all elements is changed to the second attribute value under fixed that represents right-alignment.

[0180] In a possible implementation, if the target display mode is a loose mode, the second zoom processing module may be used to display the elements to be displayed in the design draft according to the display mode corresponding to the target display mode:

[0181] According to the importance attributes of all elements, all elements are divided into first type elements and second type elements, the first type elements are determined as first elements to be displayed, and the second type elements are determined as second elements to be displayed, wherein the importance of the first elements to be displayed is higher than that of the second elements to be displayed;

[0182] Modify the size attribute of the first element to be displayed according to the zoom ratio;

[0183] Determine the screen blank height according to the screen size, the height value of the first element to be displayed, and the height value of the second element to be displayed;

[0184] Calculate the height distance between the first element to be displayed and the second element to be displayed according to the blank height of the screen;

[0185] Modify the outer margin attributes of the first element to be displayed and the second element to be displayed according to the height spacing to obtain the modified attributes of the first element to be displayed and the second element to be displayed;

[0186] The first element to be displayed and the second element to be displayed are displayed according to their respective modified attributes.

[0187] In a possible implementation, if the target display mode is a compact mode, the second zoom processing module may be used to display the elements to be displayed in the design draft according to the display mode corresponding to the target display mode:

[0188] According to the importance attributes of all elements, all elements are divided into third type elements and fourth type elements, wherein the importance of the third type elements is higher than that of the fourth type elements;

[0189] Modify the display attribute of the fourth type element to non-display, and modify the display attribute of the third type element to Flexbox, so as to determine the third type element as an element to be displayed;

[0190] Modify the margin attribute of the element to be displayed according to the preset spacing value to obtain the modified attribute of the element to be displayed;

[0191] The element to be displayed is displayed according to the modified attribute of the element to be displayed.

[0192] In a possible implementation, the second scaling processing module may also be used to: after displaying the elements to be displayed in the design draft according to the display mode corresponding to the target display mode, respond to a display mode switching instruction and display the elements to be displayed in the design draft according to the display mode corresponding to the switched mode.

[0193] The screen adaptation device provided in the embodiment of the present application may correspond to the screen adaptation method provided above, and details may be referred to the above description, which will not be repeated here.

[0194] The present application also provides an electronic device in an embodiment. Fig.16 As shown, it shows a schematic diagram of the structure of an electronic device suitable for implementing the embodiment of the present application. The electronic device in the embodiment of the present application may include but is not limited to fixed terminals such as mobile phones, laptops, PDAs (personal digital assistants), PADs (tablet computers), desktop computers, etc. Fig.16 The electronic device shown is merely an example and should not bring any limitation to the functions and scope of use of the embodiments of the present application.

[0195] like Fig.16 As shown, the electronic device may include a processing device (e.g., a central processing unit, a graphics processing unit, etc.) 601, which can perform various appropriate actions and processes according to a program stored in a read-only memory (ROM) 602 or a program loaded from a storage device 608 to a random access memory (RAM) 603. When the electronic device is powered on, various programs and data required for the operation of the electronic device are also stored in the RAM 603. The processing device 601, the ROM 602, and the RAM 603 are connected to each other via a bus 604. An input / output (I / O) interface 605 is also connected to the bus 604.

[0196] Typically, the following devices may be connected to the I / O interface 605: an input device 606 including, for example, a touch screen, a touch pad, a keyboard, a mouse, a camera, a microphone, an accelerometer, a gyroscope, etc.; an output device 607 including, for example, a liquid crystal display (LCD), a speaker, a vibrator, etc.; a storage device 608 including, for example, a memory card, a hard disk, etc.; and a communication device 609. The communication device 609 may allow the electronic device to communicate with other devices wirelessly or by wire to exchange data. Although Fig.16 An electronic device having various devices is shown, but it should be understood that it is not required to implement or possess all the devices shown. More or fewer devices may be implemented or possessed instead.

[0197] An embodiment of the present application also provides a computer program product including computer-readable instructions. When the computer-readable instructions are executed on an electronic device, the electronic device implements any screen adaptation method provided in the embodiment of the present application.

[0198] A computer-readable storage medium is also provided in an embodiment of the present application. The storage medium carries one or more computer programs. When the one or more computer programs are executed by an electronic device, the electronic device can implement any screen adaptation method provided in the embodiment of the present application.

[0199] It should also be noted that the device embodiments described above are merely schematic, wherein the units described as separate components may or may not be physically separated, and the components displayed as units may or may not be physical units, that is, they may be located in one place, or they may be distributed over multiple network units. Some or all of the modules may be selected according to actual needs to achieve the purpose of the scheme of this embodiment. In addition, in the drawings of the device embodiments provided by the present application, the connection relationship between the modules indicates that there is a communication connection between them, which may be specifically implemented as one or more communication buses or signal lines.

[0200] Through the description of the above implementation mode, the technicians in the field can clearly understand that the present application can be implemented by means of software plus necessary general hardware, and of course, it can also be implemented by special hardware including special integrated circuits, special CPUs, special memories, special components, etc. In general, all functions completed by computer programs can be easily implemented by corresponding hardware, and the specific hardware structure used to implement the same function can also be various, such as analog circuits, digital circuits or special circuits. However, for the present application, software program implementation is a better implementation mode in more cases. Based on such an understanding, the technical solution of the present application is essentially or the part that contributes to the prior art can be embodied in the form of a software product, which is stored in a readable storage medium, such as a computer floppy disk, a U disk, a mobile hard disk, a ROM, a RAM, a disk or an optical disk, etc., including a number of instructions to enable a computer device (which can be a personal computer, a training device, or a network device, etc.) to execute the methods described in each embodiment of the present application.

[0201] In the above embodiments, all or part of the embodiments may be implemented by software, hardware, firmware or any combination thereof. When implemented by software, all or part of the embodiments may be implemented in the form of a computer program product.

[0202] The computer program product includes one or more computer instructions. When the computer program instructions are loaded and executed on a computer, the process or function described in the embodiment of the present application is generated in whole or in part. The computer may be a general-purpose computer, a special-purpose computer, a computer network, or other programmable devices. The computer instructions may be stored in a computer-readable storage medium, or transmitted from one computer-readable storage medium to another computer-readable storage medium. For example, the computer instructions may be transmitted from a website site, a computer, a training device, or a data center by wired (e.g., coaxial cable, optical fiber, digital subscriber line (DSL)) or wireless (e.g., infrared, wireless, microwave, etc.) mode to another website site, computer, training device, or data center. The computer-readable storage medium may be any available medium that a computer can store or a data storage device such as a training device, a data center, etc. that includes one or more available media integrations. The available medium may be a magnetic medium, (e.g., a floppy disk, a hard disk, a tape), an optical medium (e.g., a DVD), or a semiconductor medium (e.g., a solid-state drive (SSD)), etc.

Claims

1. A screen adaptation method, characterized in that: include: Get the screen size of the device to be displayed and the design size of the game to be displayed; Calculate the zoom ratio according to the screen size and the design draft size; If the zoom ratio is less than or equal to a preset threshold, all elements included in the design draft are zoomed and displayed according to the zoom ratio; If the zoom ratio is greater than the preset threshold, in response to a target display mode selected by the user from a plurality of preset display modes, the elements to be displayed in the design draft are displayed according to the display mode corresponding to the target display mode, wherein the display modes and elements to be displayed corresponding to different display modes are different.

2. The screen adaptation method according to claim 1, characterized in that: The step of scaling and displaying all elements included in the design draft according to the scaling ratio includes: Obtaining the target display position selected by the user; Modifying the position attributes of all the elements according to the target display position, and modifying the size attributes of all the elements according to the zoom ratio, to obtain modified attributes of all the elements; All the elements are displayed according to the modified attributes.

3. The screen adaptation method according to claim 2, characterized in that: The target display position is one of centered, left and right; The modifying the position attributes of all the elements according to the target display position includes: If the target display position is the center, the position attributes of all the elements are kept unchanged; If the target display position is the left alignment, then the position attributes of all the elements are changed to the first attribute value representing the left alignment under fixed; If the target display position is the right alignment, the position attributes of all the elements are changed to the second attribute value representing the right alignment under fixed.

4. The screen adaptation method according to claim 1, characterized in that: If the target display mode is a loose mode, displaying the elements to be displayed in the design draft according to the display mode corresponding to the target display mode includes: According to the importance attributes of all the elements, the elements are divided into first type elements and second type elements, the elements of the first type are determined as first elements to be displayed, and the elements of the second type are determined as second elements to be displayed, wherein the importance of the first elements to be displayed is higher than that of the second elements to be displayed; modifying a size attribute of the first to-be-displayed element according to the scaling ratio; Determine a screen blank height according to the screen size, the height value of the first element to be displayed, and the height value of the second element to be displayed; Calculate the height distance between the first to-be-displayed element and the second to-be-displayed element according to the screen blank height; Modify the outer margin attributes of the first element to be displayed and the second element to be displayed according to the height spacing to obtain modified attributes of the first element to be displayed and the second element to be displayed; The first element to be displayed and the second element to be displayed are displayed according to their respective modified attributes.

5. The screen adaptation method according to claim 1, characterized in that: If the target display mode is the compact mode, displaying the elements to be displayed in the design draft according to the display mode corresponding to the target display mode includes: According to the importance attributes of all the elements, the elements are divided into third type elements and fourth type elements, wherein the importance of the third type elements is higher than that of the fourth type elements; Modify the display attribute of the fourth type element to non-display, and modify the display attribute of the third type element to Flexbox, so as to determine the third type element as the element to be displayed; Modifying the margin attribute of the element to be displayed according to the preset spacing value to obtain the modified attribute of the element to be displayed; The element to be displayed is displayed according to the modified attribute of the element to be displayed.

6. The screen adaptation method according to any one of claims 1 to 5, characterized in that: After displaying the elements to be displayed in the design draft in a display manner corresponding to the target display mode, the method further includes: In response to the display mode switching instruction, the elements to be displayed in the design draft are displayed in a display manner corresponding to the switched mode.

7. A screen adaptation device, characterized in that: include: A size acquisition module is used to obtain the screen size of the device to be displayed and the design size of the game to be displayed; A zoom ratio calculation module, used to calculate the zoom ratio according to the screen size and the design draft size; A first zoom processing module, configured to zoom and display all elements included in the design draft according to the zoom ratio if the zoom ratio is less than or equal to a preset threshold; The second zoom processing module is used to display the elements to be displayed in the design draft according to the display mode corresponding to the target display mode in response to the target display mode selected by the user from the preset multiple display modes if the zoom ratio is greater than the preset threshold value, wherein the display modes and elements to be displayed corresponding to different display modes are different.

8. A computer program product, characterized in that It comprises computer-readable instructions, and when the computer-readable instructions are executed on an electronic device, the electronic device implements the screen adaptation method as claimed in any one of claims 1 to 6.

9. An electronic device, characterized in that: The method comprises at least one processor and a memory connected to the processor, wherein: The memory is used to store computer programs; The processor is used to execute the computer program so that the electronic device can implement the screen adaptation method as described in any one of claims 1 to 6.

10. A computer storage medium, characterized in that: The storage medium carries one or more computer programs, and when the one or more computer programs are executed by an electronic device, the electronic device can implement the screen adaptation method as described in any one of claims 1 to 6.