Mobile WEB pixel knowledge and web pixel knowledge

Mobile WEB pixel knowledge and web pixel knowledge

The knowledge of mobile web pixels is mainly used to understand the number of mobile web pixels when cropping images. This article focuses on the following question: how can we obtain the logic pixels required for graph cutting based on the screen size and physical pixels provided by the device manufacturer? This article uses iPhone 5 as an example to explain the related web pixel knowledge.

I. Prerequisites

1. iphone5 Parameters

IPhone 5
Processor	Apple A6 processor, 1.3 Ghz
Screen	4 inch 1136x640 Retina Display
Main camera	8 million pixels
Front camera	1.2 million pixels
Flash Memory	16 GB 32 GB 64 GB
Body	Front tempered glass panel, rear hybrid panel + metal border
Mobile phone size	123.8 × 58.6 × 7.6mm
Network Support	2G: GSM 850/900/1800/1900 3G: CDMA EV-DO rev. AWCDMA 850/900/1900/2100 China Mobile 2G China Unicom 2G/3G/4G (US version v supports China Telecom 3G)

2. Cut-off theorem: right triangle. The sum of the squares of the two straight angle edges is equal to the square of the Oblique edges!

2. Relationship between terms related to pixels and terms 1. px, dp, And dpr

Px: css pixels logical pixel, the abstract unit used by the browser [logical pixel for graph cutting]

Dp: device independent pixels device-independent pixels, that is, physical pixels [physical pixels provided by device manufacturers]

Dpr: devicePixelRatio: pixel scaling ratio of a device [processing the relationship between physical pixels and logical pixels. The specific conversion relationship will be discussed later]

2. DPI and PPI

DPI: ink points that can be sprayed per inch by printer (Printing Industry)

PPI: Pixels per inch. The number of Pixels per inch on the screen, that is, the pixel density per inch.

The device parameter description on the computer displays the same meaning.

The higher the PPI, the higher the number of shards, And the clearer the image.

2.1relationship between PPI and default zoom ratio DPR

Retina screen (HD screen): dpr is greater than or equal to 2

As can be seen from the corresponding relationship, the higher the PPI, the larger the system default setting scaling ratio, the lower the visibility (small ).

2.2 calculate the iphone5 PPI

The pixel information of iPhone 5 can be learned from the front-end knowledge: 4 inch 1136x640 Retina Display

First, the iPhone 5 mobile phone screen is calculated based on the hook theorem.Diagonal equivalent PixelAnd divide it by the diagonal line (4 inch), and the PPI is 326.

Note: The calculation uses physical pixels rather than px.

According to the 3.1 relationship, we can see that the iPhone 5's ppi is 326, and the corresponding screen zoom ratio dpr is 2.

2.3 obtain the device's dpr through window [update20161125]

In mobile browsers and some desktop browsers, the window object has a devicePixelRatio attribute. We can directly obtain the device's dpr through window. devicePixelRatio.

3. dpx indicates the relationship between px and physical pixel dp.

We already know that the dpr of iPhone 5 is 2, and the image of a pixel in iPhone 5 is shown as follows:

This graph can be understood from two perspectives

• On the plane: 1px equals 2 square * dp
• Horizontal or vertical dimension: 1px equals 2 * dp

3.1 calculate the logic pixel of iPhone 5

The pixel information of iPhone 5 can be learned from the front-end knowledge: 4 inch 1136x640 Retina Display

Now we know that the dpx of the iPhone 5 is 2. Based on the above calculation formula, we can calculate the logic pixel for the iPhone 5 slice: 320px * 568px.

4. Obtain the screen resolution from the device resolution

The entire Link is chained as follows:

 

Reference: http://www.imooc.com/u/2022616/courses? Sort = publish

Additional reading:

Brief Introduction to devicePixelRatio (Zhang xinxu)

 

 

Starof, the author of this article, is constantly learning and growing because of the changing knowledge. The content of this article is also updated from time to time. To avoid misleading readers and facilitate tracing, Please repost the Source: Ghost.