Basic mobile phone resolution knowledge (DPI, DIP computing)
1. terms and concepts
Terms |
Description |
Remarks |
Screen size) |
It refers to the actual physical size of the mobile phone, such as the commonly used 2.8 inch, 3.2 inch, 3.5 inch, 3.7 inch |
Motorola's milestone mobile phone is 3.7 inch |
Aspect Ratio (width/height Ratio) |
Refers to the actual physical size width/height ratio, divided into long and nolong |
Milestone is and belongs to long |
Resolution (Resolution) |
Similar to the definition of computer resolution, it refers to the number of pixels in the portrait and horizontal directions of the mobile phone screen. |
Milestone is 854*480 |
DPI (dot per inch) |
Number of pixels per inch, such as 120 dpi and 320 dpi. Assume that the physical size of the QVGA (240*2 inch) resolution screen is (1.5 inch * 160), dpi = |
Can reflect the definition of the screen, used to scale the UI |
Density (Density) |
The pixel value concentration in the Screen. resolution/Screen size can reflect the cell phone density, |
|
Density-independent pixel (dip) |
The Unit for calculating the logic density. The formula for the dip and the specific pixel value is dip/pixel = dpi/160, that is, px = dp * (dpi/160) |
|
2. DPI Value Calculation
For example, calculate the WVGA (800*480) Resolution, 3.7 inch density DPI, as shown in 1
Figure 1
Diagonal pixel indicates the pixel value of the Diagonal line (=), DPI = 933/3. 7 = 252
3. Mobile phone screen Classification
3.1 is divided into the following three categories based on the cell phone screen density (DPI) or screen size, as shown in figure 2.
Figure 2
3. 2 The relationship between mobile phone screen classification and pixel density is shown in Table 1:
|
Lowdensity (120), ldpi |
Medium density (1, 160), mdpi |
High density (240), hdpi |
Small screen |
QVGA (240x320) |
|
|
Normal screen |
WQVGA400 (240x400) WQVGA432 (240x432) |
HVGA (320x480) |
WVGA800 (480x800) WVGA854 (480x854) |
Large screen |
|
WVGA800 * (480x800) WVGA854 * (480x854) |
|
Table 1
3.3 mobile phone size distribution (http://developer.android.com/resources/dashboard/screens.html) 3 shows, the current is mainly to the resolution of 800*480 and 854*480 mobile phone users mostly
Figure 3
From the above screen size distribution, we can only consider mobile phones with a density of 1 and 1.5 between 3-inches.
4. uidesign
From the perspective of development, the application provides three sets of UI layout files based on the screen of three types of Android phones, but three sets of corresponding interface icons are also required, as shown in table 2.
Icon Type |
Standard Asset Sizes (in Pixels), for Generalized Screen Densities |
|
Low density screen (ldpi) |
Medium density screen (mdpi) |
High density screen (hdpi) |
Launcher |
36x36 px |
48x48 px |
72x72 px |
Menu |
36x36 px |
48x48 px |
72x72 px |
Status Bar |
24x24 px |
32x32 px |
48x48 px |
Tab |
24x24 px |
32x32 px |
48x48 px |
Dialog |
24x24 px |
32x32 px |
48x48 px |
List View |
24x24 px |
32x32 px |
48x48 px |
Table 2
5. How can I achieve adaptive screen size?
1) interface Layout
Five layout, similar to the title bar of the windos window), layout-small (layout with a screen size less than 3 inch), layout-normal (screen size less than 4.5 inch ), layout-large (between 4 inch and 7 inch), layout-xlarge (between 7 and 10 inch)
2) image resources
You need to prepare 5 sets of image resources, including drawable, drawalbe-ldpi, drawable-mdpi, drawable-hdpi, and drawable-xhdpi Based on the dpi value.
Android has an automatic matching mechanism to select the corresponding layout and image resources.
The resolution pixel density and screen size of mobile phones are the words we often hear,The relationships between them are as follows::
Resolution refers to the number of container points on the screen, which are used to hold one pixel.
Pixels are strictly used on images. The more pixels there are, the clearer the images will be.
The cell phone can have the same resolution, but the screen size can be different. For example, the screen size of 3.7 inch can be 320*480 resolution, and the screen size of 5.1 inch can be 320*480 resolution, what are the differences between the two screens?
For example, if the screen width of mobile phone A is 5 Cm, the width of mobile phone B is 10 Cm, and the resolution width is 320, when the same image is displayed, the pictures on mobile phone B will be larger, and there is no clear picture on mobile phone. Why? This is our common concept of density (DPI), that is, the number of dots per inch. There are 5CM points in a row of 320, and DPI is about 150. Now there are 10CM points in a row of 320, and the density is about 75. The density is greatly reduced, so the image displayed on mobile phone B will become larger and unclear. Just like we use Android Screen Monitor to display mobile phone screens on a computer, we always feel a little big when it is displayed on a computer. This is because the resolution density of your computer is not as high as that of your mobile phone, you can increase the resolution of a computer so that the screen density is the same as that of a mobile phone.
Conversion Method:
72 pixels/inch = 28.346 pixels/centimeter
300 pixels/inch = 118.11 pixels/centimeter
1 CM = 0.3937 inch
1 inch = 2.54 cm
Pixels cannot be directly converted to inches or centimeters. pixels must be converted to dpi!
Compare with common 1024 pixels:
1024 pixels = 3.413 inch = 8.67 cm (300 pixels/inch dpi ≈ 0.003333 pixels per inch), so the centimeter size of 1024 pixels is: 1024*0.003333*2.54
1024 pixels = 14.222 inch = 36.12 cm (72 pixels/inch dpi ≈ 0.013889 pixels per inch), so the centimeter size of 1024 pixels is: 1024*0.013889*2.54
When raising the resolution, we need to understand two concepts: image resolution and output resolution.
The image resolution is the number of pixels per inch, in the unit of ppi. The image resolution is often expressed as the total number of pixels in each direction, such as 640x480 pixels and 1280x960 pixels. What determines the image output quality is the image output resolution, which describes the points (dpi) that can be generated per inch when the device outputs the image, in dpi, the two are correlated but not always equal.
Dpi (dot per inch) output resolution
The printer resolution is also called the output resolution. It refers to the maximum number of points that can be printed per inch in both the horizontal and vertical directions during output printing, it is usually represented by "dot/inch", that is, dpi (dot per inch. The so-called maximum resolution refers to the maximum resolution that the printer can print, that is, the maximum resolution of the print output. The printer resolution usually refers to the maximum resolution of the printer. At present, the resolution of the general laser printer is above 600 × 600dpi.
Dpi is short for "dot per inch. As the name suggests, it refers to the number of points in the length of each inch. We usually use dpi as the Resolution Unit for scanners and printers. The higher the value, the higher the resolution. At present, the optical resolution of scanners on the market is mainly 600 × 1200 dpi and 1200 × 2400 dpi. The optical resolution of a scanner consists of two numbers because the horizontal and vertical resolutions are different. A smaller number is usually a vertical resolution, that is, we generally distinguish the values used by the scanner resolution. That is to say, 600 × 1200 dpi scanners are usually referred to as 600 dpi.
The resolution of a computer monitor is about 72 dpi. This value is calculated in this way: for a 15-inch computer monitor, the horizontal length of the visible area is about 11.2, if the display mode is 800 × 600, the resolution is 800/11. 2 = 71.4. For a 17-inch computer display, the resolution will change to 1024. 8 = 80 in 768x1024/12 display mode.
Pixel (Pixel)
Pixel or px is a basic unit of a computer's screen device, which is a point. All other units have a fixed proportional Conversion Relationship with pixels. When all length units are displayed on the screen, they are converted to the number of pixels first and then displayed. Therefore, there is no essential difference between relative length and absolute length in computer screens. All units are actually pixels, and the difference is only different proportions.
If we extend the discussion to other output devices, such as printers, the basic length units may not be pixels, but other units that are consistent with the measurement units in life.
The absolute unit of CSS length is for the output device. For pt, This is a commonly used font unit in text formatting tools (such as word and adobe), whether your display resolution is 1024*768 or 800*600, the results of printing a document on paper are the same.
Which length unit is better for writing a webpage? Is it px or pt?
I personally prefer px, because px can accurately represent the position and size of elements on the screen. webpages mainly aim at screen display, rather than printing and other needs.
Relative length unit)
The two characters in the unit of relative length of CSS indicate that the unit of length changes with the change of its reference value, which is not fixed. The following is a list of CSS relative length units:
Unit of relative CSS Length
Note:
Em element font height The height of the element s font
The height of the letter x of The letter "x"
Px pixel Pixels
% Percentage
Absolute CSS length unit)
The absolute length unit is a fixed value. For example, we often use mm, which means mm. The following is a list of absolute CSS length units:
Absolute CSS length unit
Description
In inch Inches (1 inch = 2.54 cm)
Cm Centimeters
Mm Millimeters
Pt point Points (1 point = 1/72 inch)
Pc pickup Picas (1 pickup =)
Pixels are relative to the display screen resolution. For example, WiNDOWS users generally use a 96 pixel/inch resolution. MAC users generally use 72 pixels/inch resolution. Therefore, in WiNDOWS CSS, dpi is 96 pixels/inch.
See the following table for comparison:
Common Photo size, pixel and print size table (practical)
Inch Photo type |
Centimeter |
Pixels |
Digital Camera type |
Print size Resolutions: 300 dpi |
1 inch |
2.5x3.5 |
413 × 295 |
/ |
/ |
ID card photo |
3.3 × 2.2 |
390 × 260 |
/ |
/ |
2 |
3.5x5.3 |
626 × 413 |
/ |
/ |
Small 2-inch (passport) |
4.8x3.3 |
567 × 390 |
/ |
/ |
5 inch |
12.7 × 8.9 |
1200 × 840 + |
1 million pixels |
/ |
6-inch |
15.2 × 10.2 |
1440 × 960 + |
1.3 million pixels |
/ |
7-inch 7x5 |
17.8 × 12.7 |
1680 × 1200 + |
2 million pixels |
12.7x17.7 |
8-inch 8x6 |
20.3 × 15.2 |
1920 × 1440 + |
3 million pixels |
15.2x20.3 |
10 inch 10x8 |
25.4 × 20.3 |
2400 × 1920 + |
4 million pixels |
20.3x25.4 |
12-inch 12x10 |
30.5 × 20.3 |
2500 × 2000 + |
5 million pixels |
25.4x30.5 |
15-inch 15 × 10 |
38.1 × 25.4 |
3000 × 2000 |
6 million pixels |
25.4x38.1 |
Recently, I found that two machines with the same resolution have different styles on one interface. After multiple tests, I found that the density of the first pad (lenovo A1_07) was 1.5, conversion to dpi is 240, which is of high density. The density of another pad is 1, which is of medium density. The conversion to dpi is 160, which should be of medium density.
This finds the problem,Solution:
Put the values-hdpi and values-mdpi corresponding styles respectively under the values folder.
The following are learning materials
Screen resolution
Convert physical dpi on the device to dips by multiplication
Androidname approx. resolution multiply by this get dips
Ldpi ~ 120 dpi 1.333
Mdpi ~ 160 dpi 1.0 (baseline density)
Tvdpi ~ 213 dpi 0.751
Hdpi ~ 240 dpi 0.67
Xhdpi ~ 320 dpi 0.5
Dpi: the number of pixels per inch (density * 160)
Density: density
In fact, the cell phone's pixel density (density) is based on 160 pixels per inch. The main density is 0.75, 1, 1.5, and 2, when the density is 2, 1 inch has 320 pixels. In Android, the pixel value and density of the screen can be obtained through code. Based on these values, the physical size of the screen can be calculated reversely.
Screen size = pixel value of the screen diagonal line/(density * 160) = [(long square + wide square) root number]/(density * 160)
Practice Process:
Since the density obtained in the Android device is itself approximately equal to a value, for example, the precise density value density = 1.575 is calculated, the density actually read in the Code is 1.5, you need to implement a simple screen size calculation application to verify the accuracy of the physical size on different devices. The specific code is as follows:
DisplayMetrics metric = new DisplayMetrics ();
GetWindowManager (). getDefaultDisplay (). getMetrics (metric );
Int width = metric. widthPixels; // screen width (pixels)
Int height = metric. heightPixels; // screen height (pixels)
Float density = metric. density; // screen density (0.75/1.0/1.5)
Int densityDpi = metric. densityDpi; // screen density DPI (120/160/240)
Double diagonalPixels = Math. sqrt (Math. pow (width, 2) + Math. pow (height, 2 ));
Double screenSize = diagonalPixels/(160 * density );
It is possible that the size of the above computing screen is not too accurate.