Terminal screen adaptation method and device and medium
By obtaining the size of the terminal screen and DOM container for adaptation and conversion, and using the scale attribute of CSS3, the content stretching or flattening problems caused by device size differences is solved, which improves development efficiency and reduces resource waste, and realizes the design draft Automatic adaptation to different resolutions.
Patent Information
- Application Number
- CN202411256463.4
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2024-09-09
- Publication Date
- 2024-12-27
AI Technical Summary
When facing multiple devices, directly scaling the visual manuscript will cause the content to be stretched or flattened, and it needs to be designed according to different device sizes, resulting in waste of resources and inefficient development.
By obtaining the terminal screen resolution and DOM container size, performing adaptation conversion processing, and adjusting the size using the scale attribute in CSS3, it can automatically adapt to design drafts of different resolutions, avoid unit conversion, and directly modify the design draft size according to the scale.
It solves the problem of content stretching or flattening, improves development efficiency, reduces resource waste, and achieves the purpose of a design draft to adapt to equipment with different resolutions.
Smart Images
Figure CN119201027A_ABST
Abstract
Description
Technical Field
[0001] This application relates to the field of visualization technology, and in particular to a terminal screen adaptation method, device and medium. Background Technology
[0002] In the era of "big data", we are paying more and more attention to the value brought by massive amounts of data. However, the logic hidden behind this data needs to be presented in a visual way. By presenting big data on the screen in a more intuitive and visual form, people can make decisions and discover its intrinsic value.
[0003] Driven by big data, data visualization has developed rapidly, with various visualization technologies emerging on the front end, and JavaScript, suitable for running on various terminals, experiencing rapid growth. Simultaneously, various devices have emerged as the carriers of visualization, such as computers, high-definition screens, handheld devices, and self-service terminals. In different industries and scenarios, various technologies and devices can be used to implement their own data visualization solutions according to their specific needs. However, with the ever-increasing variety of devices, directly scaling visualization materials will cause the content to be stretched or shrunk. Therefore, it is usually necessary to design different visualization materials based on different device sizes, leading to a waste of resources when adapting to different terminal screens. Summary of the Invention
[0004] This application provides a terminal screen adaptation method, device, and medium to solve the following technical problem: In the face of a wide variety of devices, directly scaling the visual manuscript will cause the content to be stretched or flattened. Therefore, it is usually necessary to design different visual manuscripts based on different device sizes, which leads to a waste of resources when adapting to the terminal screen.
[0005] The embodiments of this application adopt the following technical solutions:
[0006] This application provides a terminal screen adaptation method. It includes obtaining the terminal screen resolution size and the DOM container size; wherein the DOM container size is related to the size of the completed UI design draft; performing adaptation conversion processing on the terminal screen resolution size and the DOM container size to obtain a reference adaptation size; and using the scale property of the transform in CSS3 to perform error processing on the reference adaptation size to obtain a visual data size adapted to the terminal screen resolution.
[0007] This application's embodiment adapts the terminal screen resolution to the DOM container size to obtain a reference adaptation size. This solves the problem of content being stretched or shrunk, or having blank edges, when relying solely on scaling solutions if the width-to-height ratio is too large. By using the CSS3 transform's scale property to handle errors in the reference adaptation size, it resolves the issue of inconsistent width-to-height ratios and overflowing parent elements when relying on unit conversion for adaptation. This application's embodiment does not require unit conversion; instead, it directly modifies the original design size based on the ratio. That is, only one design draft is needed for a large screen, and the design drafts for different resolutions are automatically calculated by this solution. This achieves the goal of adapting a single design draft to devices with different resolutions, improving development efficiency and reducing resource waste during terminal screen adaptation.
[0008] In one implementation of this application, obtaining the terminal screen resolution size and the DOM container size specifically includes: obtaining the terminal screen resolution size via JavaScript; wherein the terminal screen resolution size includes a first width and a first height; obtaining the DOM structure via JavaScript to determine the DOM container size; wherein the DOM container size includes a second width and a second height.
[0009] In one implementation of this application, before adapting the terminal screen resolution size to the DOM container size, the method further includes: in JavaScript, parsing the JavaScript code string into a syntax tree using a pre-built parser, so as to perform adaptation processing by parsing the syntax tree.
[0010] In one implementation of this application, the terminal screen resolution size and the DOM container size are adapted and converted to obtain a reference adapted size. Specifically, this includes: processing the ratio between the terminal screen resolution size and the DOM container size to obtain a scaling ratio; and adjusting the DOM container size based on the scaling ratio to obtain the reference adapted size.
[0011] In one implementation of this application, the scaling ratio is obtained by comparing the terminal screen resolution size with the DOM container size. Specifically, this includes: comparing the first width with the second width to obtain the width scaling ratio; and comparing the first height with the second height to obtain the height scaling ratio.
[0012] In one implementation of this application, the size of the DOM container is adjusted based on the scaling ratio to obtain a reference adaptation size. Specifically, this includes: multiplying the second width by the width scaling ratio to obtain the converted width; multiplying the second height by the height scaling ratio to obtain the converted height; multiplying the horizontal inner and outer spacing corresponding to the DOM container size by the width scaling ratio to obtain the converted horizontal inner and outer spacing; multiplying the vertical inner and outer spacing corresponding to the DOM container size by the height scaling ratio to obtain the converted vertical inner and outer spacing; and multiplying the font size corresponding to the DOM container size by the width scaling ratio to obtain the converted font size. Based on the converted width, converted height, converted horizontal inner and outer spacing, converted vertical inner and outer spacing, and converted font size, the reference adaptation size is determined.
[0013] In one implementation of this application, before performing error handling on the reference adaptation size using the scale property of transform in CSS3, the method further includes: creating a parent DOM container using JavaScript; creating a child DOM container within the parent DOM container; and adjusting the width and height of the parent DOM container and the child DOM container respectively based on the terminal screen resolution.
[0014] In one implementation of this application, after adjusting the width and height of the parent DOM container and the child DOM container respectively, the method further includes: setting the scale property of transform in CSS3 on the child DOM container to render the reference adaptation size into the child container; and adjusting the reference adaptation size through the scale property of transform in CSS3 when there is a boundary error in the scaling ratio corresponding to the reference adaptation size to obtain a visual data size adapted to the terminal screen resolution.
[0015] This application provides a terminal screen adaptation device, including: at least one processor; and a memory communicatively connected to the at least one processor; wherein the memory stores instructions executable by the at least one processor, the instructions being executed by the at least one processor to enable the at least one processor to: obtain the terminal screen resolution size and obtain the DOM container size; wherein the DOM container size is related to the size of the completed UI design draft; perform adaptation conversion processing on the terminal screen resolution size and the DOM container size to obtain a reference adaptation size; and perform error processing on the reference adaptation size using the scale property of transform in CSS3 to obtain a visual data size adapted to the terminal screen resolution.
[0016] This application provides a non-volatile computer storage medium storing computer-executable instructions, which are configured to: obtain the terminal screen resolution size and obtain the DOM container size; wherein the DOM container size is related to the size of the completed UI design draft; perform adaptation conversion processing on the terminal screen resolution size and the DOM container size to obtain a reference adaptation size; and perform error processing on the reference adaptation size using the scale property of transform in CSS3 to obtain a visual data size adapted to the terminal screen resolution.
[0017] The above-mentioned technical solutions adopted in this application embodiment can achieve the following beneficial effects: This application embodiment obtains a reference adaptation size by adapting and converting the terminal screen resolution size and the DOM container size, thus solving the problem that if the width-to-height ratio is too large when relying solely on scaling solutions, the content will be stretched or flattened, or there will be white space at the edges. By using the scale property of transform in CSS3 to handle errors in the reference adaptation size, the problem that the width-to-height ratio is easily inconsistent and child elements easily overflow the parent element when relying on unit conversion adaptation is solved. This application embodiment does not require unit conversion, but directly modifies the original design draft size according to the ratio. That is, only one design draft is needed for a large screen. The design drafts for different resolutions are automatically calculated by this solution, thereby achieving the goal of adapting one design draft to devices with different resolutions, improving development efficiency, and reducing resource waste in the process of terminal screen adaptation. Attached Figure Description
[0018] To more clearly illustrate the technical solutions in the embodiments of this application or the prior art, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments recorded in this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.
[0019] In the picture:
[0020] Figure 1 A flowchart of a terminal screen adaptation method provided in an embodiment of this application;
[0021] Figure 2 This is a schematic diagram of the structure of a terminal screen adapter device provided in an embodiment of this application. Detailed Implementation
[0022] This application provides a terminal screen adaptation method, device, and medium.
[0023] To enable those skilled in the art to better understand the technical solutions in this application, the technical solutions in the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this application, and not all embodiments. Based on the embodiments of this specification, all other embodiments obtained by those skilled in the art without creative effort should fall within the scope of protection of this application.
[0024] This application embodiment uses JavaScript to collect the aspect ratio between the screen device and the content container. By parsing the syntax tree and applying conversion rules, it transforms the size scheme from a single screen to any screen carrier. Then, it adds an overall scaling adaptation layer, solving the problem of stretching and squaring during scaling adaptation, and also addressing the difficulty in precisely controlling spacing and height when using adaptive units, which can easily lead to detachment from the container. This application embodiment does not require consideration of the original content pixel size. It decouples the screen content code from the screen to be adapted, reducing the number of adaptation developments for different terminal screens. Screen content developers only need to develop based on a single UI design, reducing development resource waste.
[0025] The technical solutions proposed in the embodiments of this application will be described in detail below with reference to the accompanying drawings.
[0026] Figure 1 A flowchart of a terminal screen adaptation method provided in this application embodiment is shown below. Figure 1 As shown, the terminal screen adaptation method includes the following steps:
[0027] S101. Obtain the terminal screen resolution and the DOM container size.
[0028] The size of the DOM container is related to the size of the final UI design draft.
[0029] In one embodiment of this application, the terminal screen resolution size is obtained via JavaScript; wherein the terminal screen resolution size includes a first width and a first height. The DOM structure is obtained via JavaScript to determine the size of the DOM container; wherein the DOM container size includes a second width and a second height.
[0030] Specifically, the terminal screen resolution and the size of the DOM container generated by the program code are obtained through JavaScript, that is, the size completed according to the UI design draft.
[0031] Furthermore, obtain the browser's screen dimensions via JavaScript: width screenWidth (first width) and height screenHeight (first height).
[0032] Furthermore, the DOM structure is obtained through JavaScript, and the actual DOM dimensions developed according to the design draft are determined: the width designWidth (second width) and the height designHeight (second height).
[0033] S102. Adapt and convert the terminal screen resolution size to the DOM container size to obtain a reference adaptation size.
[0034] In one embodiment of this application, in JavaScript, a pre-built parser parses the JavaScript code string into a syntax tree, so as to perform adaptation and conversion processing by parsing the syntax tree.
[0035] Specifically, the pre-defined parser is responsible for converting JavaScript code strings into Abstract Syntax Trees (ASTs). The process involves: breaking down the code string into a series of tokens, such as keywords, identifiers, operators, and literals; combining these tokens into a grammatical structure according to the language's syntax rules; constructing the AST; and performing various transformations by traversing the constructed AST.
[0036] It's important to note that a syntax tree is a tree-like representation of source code, where each node represents a structure within the source code. In the context of JavaScript, these structures might include expressions, statements, declarations, and so on.
[0037] In one embodiment of this application, the ratio of the terminal screen resolution to the DOM container size is calculated to obtain a scaling ratio. Based on the scaling ratio, the DOM container size is adjusted to obtain a reference adaptation size.
[0038] Specifically, by parsing the abstract syntax tree, the pixel dimensions written in the code based on the original UI design draft are reduced or enlarged according to the ratio of the screen size to the program code size (the screen size is compared with the design draft size as the conversion rule). (This process is equivalent to modifying the reference size of the original design draft to the current screen size according to the conversion rule.)
[0039] In one embodiment of this application, the ratio of the first width to the second width is calculated to obtain a width scaling ratio. Similarly, the ratio of the first height to the second height is calculated to obtain a height scaling ratio.
[0040] Specifically, the width scaling ratio is determined based on the function: widthScale = screenWidth / designWidth.
[0041] Where widthScale is the width scaling ratio; screenWidth is the first width, that is, the width corresponding to the terminal screen resolution; and designWidth is the second width, that is, the width corresponding to the DOM container size.
[0042] The height scaling ratio is determined by the function: heightScale = screenHeight / designHeight.
[0043] Where heightScale is the height scaling ratio; screenHeight is the first height, which is the height corresponding to the terminal screen resolution; and designHeight is the second height, which is the height corresponding to the DOM container size.
[0044] In one embodiment of this application, the second width is multiplied by the width scaling ratio to obtain the converted width. The second height is multiplied by the height scaling ratio to obtain the converted height. The horizontal inner and outer spacing corresponding to the DOM container size is multiplied by the width scaling ratio to obtain the converted horizontal inner and outer spacing. The vertical inner and outer spacing corresponding to the DOM container size is multiplied by the height scaling ratio to obtain the converted vertical inner and outer spacing. The font size corresponding to the DOM container size is multiplied by the width scaling ratio to obtain the converted font size. Based on the converted width, converted height, converted horizontal inner and outer spacing, converted vertical inner and outer spacing, and converted font size, a reference adaptation size is determined.
[0045] Specifically, multiplying the second width by the calculated width scaling ratio yields the element's correct width for the current screen size, i.e., the "converted width." Multiplying the element's height in the design (the second height) by the height scaling ratio gives the "converted height." The horizontal padding and margin of the DOM container also need to be adjusted according to the width scaling ratio. This is because padding is usually related to the element's width to maintain layout balance and aesthetics. Similarly, vertical padding and margin (the top and bottom padding and margin) are adjusted according to the height scaling ratio. Font size scaling is typically based on the width scaling ratio because font readability largely depends on its size relative to the container width. Based on the converted width, height, horizontal and vertical padding, and font size, a DOM container size specification adapted to the current screen size can be constructed to ensure that interface elements maintain appropriate proportions and layout across different screen sizes.
[0046] The specific calculation method is as follows:
[0047] The converted width = the width in the current design draft * widthScale;
[0048] Converted height = current design height * heightScale;
[0049] Convert horizontal inner and outer spacing = current horizontal inner and outer spacing * widthScale;
[0050] Convert vertical inner and outer spacing = current vertical inner and outer spacing * heightScale;
[0051] Convert font size = current font size * widthScale.
[0052] S103. The scale property of transform in CSS3 is used to perform error processing on the reference adaptation size in order to obtain the visualization data size adapted to the terminal screen resolution.
[0053] In one embodiment of this application, a parent DOM container is created using JavaScript. A child DOM container is then created within the parent DOM container. The width and height of both the parent and child DOM containers are adjusted based on the terminal screen resolution.
[0054] In one embodiment of this application, the `scale` property of `transform` in CSS3 is set on the child DOM container to render a reference adaptation size into the child container. If there is a boundary error in the scaling ratio corresponding to the reference adaptation size, the `scale` property of `transform` in CSS3 is used to adjust the reference adaptation size to obtain a visual data size adapted to the terminal screen resolution.
[0055] Specifically, a parent DOM container (parent-container) is created using JavaScript, and a child container (child-container) is created inside the parent container. The width and height of both the parent and child containers are set to the width and height of the terminal screen (screenWidth) and (screenHeight). The scale(widthScale, heightScale) of the CSS3 transform property is set on the child container, and the transformed screen DOM is rendered into the child container.
[0056] This embodiment does not change the original pixel unit; it directly converts the original design size to the current screen size. Essentially, the code modifies the design based on the current screen size each time, ensuring that each design size is tailored to the current screen. Finally, a scaling adaptation container is created using JavaScript, and the converted code is rendered within it. Within the container, the overall scaling is performed using the CSS3 transform's scale property.
[0057] Furthermore, this application's embodiments address the issue of inconsistent aspect ratios and overflowing parent elements when adapting to unit conversion. This application's embodiments do not perform unit conversion; instead, they directly modify the original design draft size based on the proportions. This can be understood as requiring only one design draft for a large screen, while design drafts for different resolutions are automatically calculated by this solution, ensuring that a single design draft can adapt to any resolution. It also solves the problem of content being stretched or flattened, or having blank edges, when relying solely on scaling solutions if the aspect ratio is too large. In addition, this application's embodiments also have out-of-the-box functionality; the large-screen content program code can be directly wrapped after being included in the entry file.
[0058] Figure 2 This is a schematic diagram of the structure of a terminal screen adaptation device provided in an embodiment of this application. Figure 2 As shown, a terminal screen adaptation device includes: at least one processor; and a memory communicatively connected to the at least one processor; wherein the memory stores instructions executable by the at least one processor, the instructions being executed by the at least one processor to enable the at least one processor to: obtain the terminal screen resolution size and obtain the DOM container size; wherein the DOM container size is related to the size of the completed UI design draft; perform adaptation conversion processing on the terminal screen resolution size and the DOM container size to obtain a reference adaptation size; and perform error processing on the reference adaptation size using the scale property of transform in CSS3 to obtain a visual data size adapted to the terminal screen resolution.
[0059] This application embodiment also provides a non-volatile computer storage medium storing computer-executable instructions, which are configured to: obtain the terminal screen resolution size and obtain the DOM container size; wherein, the DOM container size is related to the size of the completed UI design draft; perform adaptation conversion processing on the terminal screen resolution size and the DOM container size to obtain a reference adaptation size; and perform error processing on the reference adaptation size using the scale property of transform in CSS3 to obtain a visual data size adapted to the terminal screen resolution.
[0060] Those skilled in the art will understand that the embodiments of this specification can be provided as methods, systems, or computer program products. Therefore, the embodiments of this specification can take the form of a completely hardware embodiment, a completely software embodiment, or an embodiment combining software and hardware aspects. Furthermore, the embodiments of this specification can take the form of a computer program product implemented on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.
[0061] This specification is described with reference to flowchart illustrations and / or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of this specification. It will be understood that each block of the flowchart illustrations and / or block diagrams, and combinations of blocks in the flowchart illustrations and / or block diagrams, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, special-purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, create a machine for implementing the flowchart illustrations and / or block diagrams. Figure 1 One or more processes and / or boxes Figure 1 A device that provides the functions specified in one or more boxes.
[0062] These computer program instructions may also be stored in a computer-readable storage medium that can direct a computer or other programmable data processing device to function in a particular manner, such that the instructions stored in the computer-readable storage medium produce an article of manufacture including instruction means, which are implemented in a process Figure 1 One or more processes and / or boxes Figure 1 The function specified in one or more boxes.
[0063] These computer program instructions may also be loaded onto a computer or other programmable data processing equipment to cause a series of operational steps to be performed on the computer or other programmable equipment to produce a computer-implemented process, thereby providing instructions that execute on the computer or other programmable equipment for implementing the process. Figure 1 One or more processes and / or boxes Figure 1 The steps of the function specified in one or more boxes.
[0064] In a typical configuration, a computing device includes one or more processors (CPU), input / output interfaces, network interfaces, and memory.
[0065] Memory may include non-persistent storage in computer-readable media, such as random access memory (RAM) and / or non-volatile memory, such as read-only memory (ROM) or flash RAM. Memory is an example of computer-readable media.
[0066] Computer-readable media includes both permanent and non-permanent, removable and non-removable media that can store information using any method or technology. Information can be computer-readable instructions, data structures, modules of programs, or other data. Examples of computer storage media include, but are not limited to, phase-change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technologies, CD-ROM, digital versatile optical disc (DVD) or other optical storage, magnetic tape, magnetic magnetic disk storage or other magnetic storage devices, or any other non-transferable medium that can be used to store information accessible by a computing device. As defined herein, computer-readable media does not include transient computer-readable media, such as modulated data signals and carrier waves.
[0067] The various embodiments in this application are described in a progressive manner. Similar or identical parts between embodiments can be referred to mutually. Each embodiment focuses on describing the differences from other embodiments. In particular, the embodiments of apparatus, devices, and non-volatile computer storage media are basically similar to the method embodiments, so the descriptions are relatively simple; relevant parts can be referred to the descriptions of the method embodiments.
[0068] The above descriptions are merely embodiments of this application and are not intended to limit the scope of this application. For those skilled in the art, various modifications and variations can be made to the embodiments of this application. These modifications or substitutions do not cause the essence of the corresponding technical solutions to depart from the spirit and scope of the technical solutions in the embodiments of this application.
Claims
1. A terminal screen adaptation method, characterized in that: The method comprises: Obtain the terminal screen resolution size and the DOM container size; wherein the DOM container size is related to the size of the design draft after the UI design is completed; Perform adaptation conversion processing on the terminal screen resolution size and the DOM container size to obtain a reference adaptation size; The reference adaptation size is error processed by using the scale attribute of transform in CSS3 to obtain a visualization data size adapted to the terminal screen resolution.
2. A terminal screen adaptation method according to claim 1, characterized in that: The obtaining of the terminal screen resolution size and the DOM container size specifically includes: Obtaining the terminal screen resolution size through JavaScript; wherein the terminal screen resolution size includes a first width and a first height; The DOM structure is obtained through JavaScript to determine the size of the DOM container; wherein the size of the DOM container includes a second width and a second height.
3. A terminal screen adaptation method according to claim 1, characterized in that: Before performing the adaptation conversion process on the terminal screen resolution size and the DOM container size, the method further includes: In JavaScript, a JavaScript code string is parsed into a syntax tree by a preset parser, so as to perform adaptation conversion processing by parsing the syntax tree.
4. A terminal screen adaptation method according to claim 2, characterized in that: The adapting and converting the terminal screen resolution size and the DOM container size to obtain a reference adaptation size specifically includes: Performing ratio processing on the terminal screen resolution size and the DOM container size to obtain a scaling ratio; Based on the scaling ratio, the size of the DOM container is adjusted to obtain the reference adaptation size.
5. A terminal screen adaptation method according to claim 4, characterized in that: The ratio processing of the terminal screen resolution size and the DOM container size to obtain the scaling ratio specifically includes: Performing ratio processing on the first width and the second width to obtain a width scaling ratio; and The first height is ratioed to the second height to obtain a height scaling ratio.
6. A terminal screen adaptation method according to claim 4, characterized in that: The adjusting the size of the DOM container based on the scaling ratio to obtain the reference adaptation size specifically includes: Multiplying the second width by the width scaling ratio to obtain a converted width; and Multiplying the second height by the height scaling ratio to obtain a converted height; and Multiplying the horizontal inner and outer spacing corresponding to the DOM container size by the width scaling ratio to obtain a converted horizontal inner and outer spacing; and Multiplying the vertical inner and outer spacing corresponding to the DOM container size by the height scaling ratio to obtain a converted vertical inner and outer spacing; and Multiplying the font size corresponding to the DOM container size by the width scaling ratio to obtain a converted font size; The reference adaptation size is determined based on the converted width, the converted height, the converted transverse inner-outer spacing, the converted longitudinal inner-outer spacing, and the converted font size.
7. A terminal screen adaptation method according to claim 1, characterized in that: Before performing error processing on the reference adaptation size by using the scale attribute of transform in CSS3, the method further includes: Create a parent DOM container via JavaScript; Create a child DOM container within the parent DOM container; Based on the terminal screen resolution size, the width and height of the parent DOM container and the child DOM container are adjusted respectively.
8. A terminal screen adaptation method according to claim 7, characterized in that: After adjusting the width and height of the parent DOM container and the child DOM container respectively, the method further includes: Setting the scale attribute of transform in CSS3 on the child DOM container to render the reference adaptation size into the child container; In the case where there is a boundary error in the scaling ratio corresponding to the reference adaptation size, the reference adaptation size is adjusted through the scale attribute of transform in CSS3 to obtain a visualization data size adapted to the terminal screen resolution.
9. A terminal screen adaptation device, characterized in that: The device comprises: at least one processor; and, a memory communicatively connected to the at least one processor; wherein, The memory stores instructions executable by the at least one processor, the instructions being executed by the at least one processor to enable the at least one processor to: Obtain the terminal screen resolution size and the DOM container size; wherein the DOM container size is related to the size of the design draft after the UI design is completed; Perform adaptation conversion processing on the terminal screen resolution size and the DOM container size to obtain a reference adaptation size; The reference adaptation size is error processed by using the scale attribute of transform in CSS3 to obtain a visualization data size adapted to the terminal screen resolution.
10. A non-volatile computer storage medium storing computer executable instructions, wherein the computer executable instructions are configured to: Get the terminal screen resolution and DOM container size; The size of the DOM container is related to the size of the finished UI design draft; Perform adaptation conversion processing on the terminal screen resolution size and the DOM container size to obtain a reference adaptation size; The reference adaptation size is error processed by using the scale attribute of transform in CSS3 to obtain a visualization data size adapted to the terminal screen resolution.