[Knowledge Popularization] Screen Resolution And Screen Ratio Of Tablets_Peace Elite Tablet Resolution

XỔ SỐ BA MIỀN 2023年11月19日 09:14 38 admin

Hello everyone, we meet again, I am your friend Quanzhanjun.

For IOS, reference for mobile phone resolution size, screen size, and development size. In the actual page development process, the width of the display screen is often converted to 1/2 of the pixel size.

iOS:

6.5 inches - 1242 x 2688 px - Xs Max 6.1 inches - 828 x 1792 px - XR 5.8 inches - 1125 x 2436 px - X/Xs 5.5 inches - 1242 x 2208 px - 6+/6s+ /7+/8+ 4.7 inches - 750 x 1334 px - 6/6s/7/8 4 inches - 640 x 1136 px - 5/5s/5c/SE 3.5 inches - 640 x 960 px - 4/4s

Summary of screen resolutions for each model:

Write picture description here

Today’s mainstream mobile phone types and resolutions:

Mobile phone resolution:

320×480 320×400

480×800 480×854(9:16)

540×960(9:16)

600×1024

720×1184(3:5) 720×1196 720×1280(9:16) 720××1520 720×1560

750×1334

768×1024 768×1280

800×1280

1080×1776 (3:5) 1080×1794 (3:5) 1080×1800 1080×1812 (3:5) 1080×1920 (9:16) 1080×2016 (9:17) 1080×2040 (9:17 ) 1080×2160(9:18) 1080×2240 1080×2310 1080×2312 1080×2340 1080×2244

1200×1920

1440×2560(9:16) 1440×2880 1440×2960

1600×2560

See the Alliance Global Compass

[Knowledge popularization] Screen resolution and screen ratio of tablets_Peace Elite tablet resolution

For game development we have to think like compatibility with tablets, for Apple we have to think about compatibility between screens like iPad, 3GS and 4, for almost all resolutions that summarizes the sizes and correspondences of about 20+ Chalk Girls , for developing games, the needs of future 3.0 and many tablet computers can be taken into consideration.

Conventionally, we may only consider QVGA, HVGA, WVGA, FWVGA and DVGA, but leaving aside mobile phones, tablets may use something like WSVGA's 1024×576 and WXGA's 1280×768, etc.

QVGA = 320 * 240; WQVGA = 320 * 480; = 400 * 240; = 432 * 240; HVGA = 480 * 320; VGA = 640 * 480; WVGA = 800 * 480; 480; DVGA = 960 * 640; PAL = 576 * 520; NTSC = 486 * 440; SVGA = 800 * 600; WSVGA = 1024 * 576; = 1280 * 768; WXGA2 = 1280 * 800; WXGA3 = 1280 * 854; SXGA = 1280 * 1024; WXGA4 = 1366 * 768; 0 * 900; WSXGA = 1600 * 1024; = 1680 * 1050; UXGA = 1600 * 1200; = 1920 * 1080; QWXGA = 2048 * 1152; 6; WQHD = 2560 * 1440; WQXGA = 2560 * 1600; QSXGA = 2560 * 2048; = 2800 * 2100; = 3200 * 2048; QUXGA = 3200 * 2400; QFHD = 3840 * 2160; 2304; HXGA = 4096 * 3072; WHXGA = 5120 * 3200; HSXGA = 5120 * 4096; = 6400 * 4096; HUXGA = 6400 * 4800; SHV = 7680 * 4320; = 7680 * 4800;

For tablets that adapt to high resolutions in games, resources can consider a mandatory absolute layout to ensure full-screen display, while it is more reasonable to use relative layouts for multiple resolutions on mobile phones.

2 Things to note when adapting Android phone screens 2.1 Basic settings

2.1.1 .xml settings

Add child elements in

:="true", when the application is installed on terminals with different densities, the program will load the resources in the xhdpi, hdpi, mdpi, and ldpi folders respectively.

On the contrary, if set to false, even if the same resource is found in the folder, the application will not automatically search for the resource in the corresponding folder:

1) If there are different density representations of the same image resource in the three folders -hdpi, -mdpi, and -ldpi, then the system will load the resources in the folder;

2) If there are high-density images in -hpdi and there are no corresponding image resources in the other two folders, then the system will load the resources in -hdpi, and the same applies to others;

3) If there are image resources in -hdpi and -mdpi but not in -ldpi, the system will load the resources in -mdpi. The same applies to others, using the closest density level.

2.1.2 Distinguish between horizontal and vertical screens

a) -hdpi This image is suitable for both horizontal and vertical screens;

b) -land-hdpi, when the screen is horizontal and high-density, load the resources of this folder;

c) -port-hdpi, when the screen is vertical and high-density, load the resources in this folder. The same applies to others.

Create two directories -port and -land in the res directory, and place vertical and horizontal layout files respectively in them to adapt to automatic switching between horizontal and vertical screens.

2.2 Four golden principles for multi-screen adaptation

1) When setting the control size in the file, you should use ,, and dp;

Specifically, when setting the values of view attributes: and:, or dp is better than px, the text size should be defined using sp.

2) Do not allow specific pixel values to appear in the program code, define them in .xml;

In order to keep the code simple, pix is used internally to represent the size of the control, but this is based on the current screen. In order to adapt to a variety of screens, developers are advised not to use specific pixels to represent control sizes.

3) Not used (.5 is obsolete), you can use an alternative;

4) Provide appropriately sized images for different screens.

Different size screens use different size images. The ratio of low::high:extra-high image sizes is 3:4:6:8; for example, for a medium density () screen your image pixel size is 48×48 , then the picture size for the low-density screen should be 36×36, the high-density screen should be 72×72, and the extra-high screen should be 96×96.

2.3 Using 9-patch PNG images

When using image resources, if stretching occurs, it will be deformed due to image processing, causing the interface to be out of shape. The 9-patch PNG image is also a standard PGN image. A pixel interval is left around the native PNG image to identify which parts of the PNG image can be stretched, which cannot be stretched, and the position of the border on the background.

"Top, left" defines the stretchable area

"Right, bottom" defines the display area. If a fully filled background image is used, it is recommended not to set the margin through:, but to define it through the 9-patch method.

The SDK provides tools for editing 9-Patch images. In the .bat file in the tools directory, you can immediately see the stretching effect after editing. You can also edit it directly with other image editing tools, but you will not see the effect.

2.4 Different

Mobile phone screens come in different sizes, including 480×320, 640×360, 800×480…

How can I make it automatically adapt to different screens?

In fact, it is very simple. You only need to create different folders in the res directory, such as: -640×360, -800×480... All files will be written into R.java after compilation, and the system will adjust them according to the size of the screen. Choose the one that suits you and use it.

2.5 Test verification

Generally, AVD is used to create multiple simulators of different sizes. If the conditions are met, you can also directly test with a real machine, which is more reliable.

å±å¹éé

2. Screen adaptation—calculating size

å±å¹ééè®¡ ç®å°ºå¯¸

[Knowledge popularization] Screen resolution and screen ratio of tablets_Peace Elite tablet resolution

3. Conversion relationship between dp and px

[Knowledge popularization] Screen resolution and screen ratio of tablets_Peace Elite tablet resolution

标签： Screen Resolution Pixel Resolution Screen Ratio Computer