This is the first day of my participation in the August Text Challenge.More challenges in August

Basic concept

When we talk about the screen of a device, how do we describe it? I don’t know if there’s a more precise concept than that.

The above screen description of the iPhone 12 is taken from Apple’s website. You can see that there are three words: size, pixel resolution and PPI. What do they mean? Let’s interpret them one by one.

The screen size

Screen size is a key metric for users. As you can see above, apple’s website lists the screen size of each model in the most obvious place. Screen size is generally expressed as the physical length of the diagonal of the screen, in inches. So the most direct way to get the screen size is to use a ruler to measure the diagonal length of the screen.

Note: Inch is an absolute physical unit. 1 inch =2.54 cm.

Resolution & physical pixels

In addition to its size, the iPhone12 screen also has a resolution of 2532 x 1170 pixels.

6.1-inch (diagonal) OLED full screen with 2532 x 1170 pixels resolution and 460 ppi

Before we talk about resolution, we need to understand one concept. A line, a surface, an image on our phones is represented by the smallest unit pixel, which you can easily interpret as being made up of small squares. Just look at the graph below.

So, a resolution of 2532 x 1170 pixels means that on the iPhone12’s 6.1-inch screen, there are 2,532 pixels in vertical height and 1,170 pixels in horizontal width.

Note: Generally speaking, you can right-click the screen resolution on a computer (Windows). On a Mac, it’s about PC -> Screen Tab. On a mobile phone, you can go to Settings > About PC to find the resolution.

A pixel of resolution is called a physical pixel or device pixel (750px by 1334px on the iPhone 7), and it is the tiniest physical part of a display device.

PPI – Pixel density

In addition to pixel resolution, what is the concept of another important PPI parameter that introduces screens?

2532 x 1170 pixel resolution, 460 ppi

Pixels Per Inch (PPI) is the number of Pixels Per Inch. The higher the PPI, the more detailed the image.

So what is the relationship between pixel density, resolution and size? The relationship can be described simply by a formula.

But for the iPhone 12, using a 2532 x 1170 resolution and a 6.1-inch substitute, the PPI is not 460. Why?

Math. SQRT (2532 + 1170 x1170 x2532) / 6.1 = 457.2543463119592

We found the following line of fine print on Apple’s website, and it turns out that 6.1 inches is a rounded number.

The iPhone 12 display has a curvy, rounded design, with four rounded corners inside a standard rectangle. When measured in a standard rectangle, the screen measures 6.06 inches diagonally (the actual viewing area is small).

Plug in again

Math. SQRT (2532 + 1170 x1170 x2532) / 6.06 = 460.27252681566847

Rounded to 460 PPI as stated on the official website.

Device independent pixel

Dimensions, resolution, PPI several concepts, are facing consumers. For daily development of the front end, the most common values are 414×736 px, 375×667 px and 320×568 px, as shown below. What kind of dimensional description is this.

CSS dimensions 375px667px are called device-Independent Pixels (DIPs) or CSS pixels (390px844px on the iPhone 12). It is an abstract unit used primarily in browsers to accurately measure (determine) the content on a Web page.

DPR – Device pixel ratio

DevicePixelRatio, or DPR for short, describes the ratio of physical pixels to device-independent pixels. The value is equal to “Physical pixels/device-independent pixels”.

From the above information, iPhone12 resolution pixel width and height is 1170×2532, device independent pixel width and height is 390×844, 1170=390×3, 2532=844×3, so THE DPR of iPhone12 is 3.

A devicePixelRatio value of 1 is our standard screen, a value of 2 is what we call a 2x screen, and 3 is a 3x screen.

Retina

I met Retina

Apple unveiled the iPhone4 at WWDC in 2010, showing off the retina display for the first time, and has since released a series of r-screen products.

“Retina” is a display technology that compresses more pixels into a single screen, resulting in higher resolution and finer display. This resolution is sufficient at normal viewing distance to render individual pixels indistinguishable to the human eye.

Retina does not refer to resolution, nor does it refer to PPI alone, but to visual effects. We generally call a Retina screen with a devicePixelRatio greater than or equal to 2, or a non-R screen.

WWDC 2010 non-R screen versus R screen display effect comparison

For two screens with the same area but different PPI, naturally, the one with the larger PPI has more total pixels and greater potential and ability to display details. As shown in the figure below, using only 4×4 pixels to express a curve is naturally less delicate and smooth than 8×8 pixels. The latter has twice the PPI and four times the number of pixels.

Non-r screen versus r screen when displaying the top left edge of the letter A

The principle of the Retina

Under the influence of The Windows operating system, most people have this logic in their minds: the higher the resolution, the smaller the words appear. This is because the area of the entire screen is mainly composed of pixel area, that is, under the same area, the higher the resolution, the more pixels, the smaller the area of a single pixel must be. So high resolution corresponds to small pixels, and small pixels mean small text made of pixels. The higher the resolution, the smaller the words appear.

But what about apple’s R screen, which doesn’t make text smaller? Since apple’s 2x R screen contains about four times as many pixels as a non-R screen of the same size, each pixel is about a quarter the size of a non-R screen, why isn’t the text displayed reduced by a quarter?

This is because of the OPERATING system’s HiDPI rendering, which determines how many pixels a text or icon will ultimately be represented in. 2 x R screen it uses 4 times as many pixels as non-R screen to represent each element on the screen. This works out to a quarter of the pixel size and four times the number of pixels, resulting in text and ICONS that match the size of a non-R-screen.

For example, rendering a 2px by 2px box on a standard screen would use 2px by 2px physical pixels, like our normal computer screen; But for a 2x screen, rendering a 2px by 2px box will use (2px by 2) * (2px by 2) physical pixels, like our iPhone 4, 5, 6, 7, as shown below:

Under the condition that the display size is not shrunk and PPI is doubled, the HiDPI rendering effect has the following visual improvement effects (menu bar under rMBP(2560×1600) and MBP(1280×800)) :

To sum up, the high PPI provides the hardware foundation for r screen equipment to achieve good visual effect, and the HiDPI rendering mode of the system provides the software support. Both are indispensable, namely:

High PPI(Hardware) + HiDPI Rendering (Software) = Finer display (Retina)

With low PPI+ HiDPI rendering, or high PPI but no HiDPI rendering, Retina display will not be achieved. See retina and HiDPI for more details.

Will the Retina all require 326 DPI?

Retina Display is a marketing buzzword that Apple introduced in 2010, and it’s not a serious one. The term was first used when Joe announced at the launch of the iPhone4 that he would increase the screen resolution of the iPhone4 from 320×480 to 640×960, and 326ppi was probably the lowest point for Retina Display at that time.

But in layman’s terms, a Retina Display can be defined as long as the pixels on the Display are so small that the edge of the object on the screen is too granular or jagged to be seen by the naked eye at a certain line-length (which generally defaults to normal line-length).

The calculation formula for Retina is as follows:

A represents the Angle of view of the human eye, H represents the pixel spacing, and D represents the distance between the naked eye and the screen. A screen that can make a single physical pixel invisible to the naked eye is what Apple calls a “Retina display.”

Substituting the commonly used distance into the above formula, we can know:

  • When the pixel density of mobile phone display reaches or is higher than 300ppi, the sense of granularity will no longer appear (the sight distance is about 35CM).
  • Apple’s Retina display, on the other hand, can’t distinguish individual pixels if the pixel density exceeds 200ppi (the line of sight is about 60CM).

The ppi of the physical screen does not need to be the same due to the length of view to achieve the same Retina effect. The larger the length of view, the lower the PPI requirement.

Retina screen compatibility

Since devicePixelRatio is no longer 1, our physical pixels are no longer equal to the device-independent pixels, so we face two problems in actual web development: blurred images and thickened 1px borders

Compatibility problem 1: The picture is blurred

As we know, bitmaps (PNG, JPG, GIF, etc.) are composed of pixels, each pixel has a specific position and color value, we call it bitmap pixel, as shown below:

When a bitmap is displayed on a standard screen, a bitmap pixel corresponds to a physical pixel, ensuring a full fidelity display. But when under the double screen, physical pixel area is four times the figure of pixels in the (CSS 1 equipment independent pixel equivalent to 2 physical pixels), the images need to enlarge four times (wide high twice) to maintain the same physical pixel size, it will lose a lot of details, cause the distortion of the situation, also is the problem we often say the image blur. The diagram below:

So how to solve the problem? We can double the size of the image we want to use. For example, if we want to use a 2px 2px image, we can use a 4px 4px image and set the image size to 2px by 2px. This works well for a 2x screen and reduces pixel sampling (to a certain degree of waste) for a standard screen.

This solved the problem of blurring our image on a 2x screen, and the same goes for a 3x screen

Compatibility issues 2:1 Thickened px borders

Let’s take a look at a demo, screenshot below (iPhone 6 screenshot) :

If we compare the image above with the 1px border on our phone system, it looks like this:

We will find that the upper and lower lines are the correct thickness, and the upper line is a little thick. However, the upper line was generated with a pure 1px border, while the lower line was actually simulated by using transform compression with half of 1px height, which is equivalent to 0.5px height. Why is that?

This is because one CSS pixel actually corresponds to two physical pixels in a 2x screen, so in order to achieve the true 1px thickness, we need to use 0.5 pixels for simulation. At present, in addition to ios8+ can directly use 0.5px units, the rest have to be done by simulation. 7 ways to solve the 1px border problem on the mobile Retina Screen

Some discussions

Is the pixel size fixed?

Pixel can refer to the screen resolution – the physical pixel, or the device-independent pixel of the operating system… The meaning varies greatly from context to context.

So it can be said that pixels have no actual physical size. It’s not an absolute unit. Not like inches or centimeters in real life.

Here’s an example:

In the two images above, the first is the screen parameters of the iPhone 6 and the second is the screen parameters of the Huawei Honor 7. How come apple has 469 pixels per inch while Huawei only has 424? We know that an inch is a unit of length that has a fixed physical size. The problem, then, is pixels. So what this means is that pixels, this thing, are getting smaller on the iPhone. So the pixel, like a gold hoop, can get bigger and smaller.

Here’s another example:

The CSS elements are 1px by 1px in width and height, and the actual rendered physical pixels are 2px by 2px on a 2x Retina screen, and 1px by 1px on a non-Retina screen. It’s also a relative unit compared to the physical world in absolute terms.

Reference thanks

  • What is the relationship between screen size, resolution, pixel and PPI?
  • What exactly is a Retina Display? – Answer of the sanctuary – Zhihu
  • That retina and HiDPI thing
  • Retina display – Allenyhy’s blog -CSDN blog
  • What is the difference between DPI and PPI? – zhihu