Web Development – Windows (1)

This series will cover the impact of resolution, logical pixels, device pixels, Windows, and viewports on web development. I put them together because these concepts are interrelated, and forgive me if I can’t find a good word to describe them, so I’ll use the word Windows first.

Device pixels, CSS pixels, and devicePixelRatio

This series ends with a look at some of the concepts of pixels in web development.

Device Pixel (also known as actual Pixel) is an intuitive concept. A computer has as many Device pixels as the resolution of its monitor. For example, when engaged in PC web design, designers will generally be based on 1920*1080 resolution design, which is also the resolution of our common 24 inch display, which means that the 24 inch display above, 1920 pixels wide, 1080 pixels high, There are 1,920 *1080 = 2,073,600 pixels in total. We can get the device resolution from screen.width and screen.height.

It’s also intuitive for developers, if I write an element with width:1920px, that element will take up the entire screen width.

There was a problem. Not content with the 1080p resolution of the 24-inch display, they doubled it to 3840 by 2160 (what we call 4K). The 24-inch device had four times as many pixels. If the page is rendered according to the number of pixels specified in the CSS, the original width:1920px element takes up only half of the screen. This is definitely not what the web developers wanted, because the screen is still 24 inches, and the design of the web has shrunk.

What to do? If you are smart enough, you must have thought of it. It is very simple. Let each CSS px point (also called logical pixel) correspond to two points (actual pixel) on the device. When the DPR is 2, the width:1920px element is actually rendered to the computer monitor at 3840 pixels.

In windows10 system, open the display options in Settings, you can see the DPR of the current display set by the system.

You can also access it through window.devicepixelRatio

However, this represents the DPR of the browser itself, which is different from the DPR set by the system because the browser itself also has the function of zooming in and out. In other words, the principle of the browser zooming in and out is to change its DPR.

For example, on our 4K display, the DPR of the system is 2. On this basis, if we enlarge the browser page twice, the DPR of the browser becomes 2 * 2 = 4

This means that by default, one CSS pixel is displayed with two actual device pixels, now it is displayed with four pixels.

We scaled the browser back to 100% so that the DPR of the browser and the DPR of the system were the same, both of which were 2. We said earlier that screen.width or height gets the resolution of the device. We should expect screen.width to be 3840, but you still get 1920, Screen.width or height is actually the screen resolution/system DPR value, and this value does not change as long as the system DPR does not change. To be precise, the browser gets the display resolution as :(screen.width or height when the browser is scaled at 100%) * window.devicepixelratio.

PPI

With the release of the iPhone 4, the concept of retine (Retina) screens came to us. At the time, Apple defined PPI as the unit of Pixel Density on a screen that the human eye could no longer detect if it exceeded 300. The full name is Pixels Per Inch — the number of Pixels Per Inch. Since screen size is usually described in terms of diagonal length, PPI is usually calculated in terms of the number of pixels on the diagonal/diagonal length.

Take the iPhone4, for example, with a screen resolution of 640 x 960 and a screen size of 3.54 inches (the diagonal length), and the PPI calculation formula is as follows.

$\dfrac{ \sqrt{ 640 ^ { 2 } +960 ^ { 2 } \phantom{\tiny{! }}}}{3.54} \approx 326$

With a PPI of 326, the iPhone 4’s display was stunning. The problem then, as on the desktop, is matching the logical pixels with the device pixels. At the time of web development, the logical pixel is still 320 * 480, in order to be consistent with the iPhone before the iPhone 4, which is equivalent to a DPR of 2. Most UI designers now base their pages on the iPhone6, which is 750 widths, and open chrome’s emulator, which has 375 logical pixels.

Both desktops 24-inch 4 k display, and mobile terminal retina screen above, for new web developers in the development is not intuitive, why it is the width of 3840, is developed according to the width of 1920, especially after when all 1080 p display, only after the retina screen in the world. This is a compatibility of technology. Technological progress is iterative, and when you can’t get rid of the past, it’s best to add something new without compromising the functionality of the past. If the original display had been 4K, the logical pixels now available on a 24-inch display would have been 3840 in origin.

So for developers, what we should really care about is the approximate size of the logical pixel and its corresponding display. The DPR of the device will increase as the technology advances. It will be possible to cram an 8K (7680 * 4320) display into a 24-inch device, but the logical pixel will still be 1080p, so we can design a web page with 1080p logical pixel and 24-inch logical pixel.

For instance,

27 inch – 2560 x 1440

24寸 – 1920 * 1080

15.6 inches – 1440 x 810

14寸 – 1376 * 774

The display sizes above are actually based on the diagonal length of the screen. Developers only care about the width of the display. Using 16:9:18, the corresponding widths are approximately 24 inches, 21 inches, 13.8 inches and 12 inches, respectively. But this is for the desktop.

If we refer to the breakpoint in Bootstrap4, since it is designed primarily for mobile, it defines any logical pixel width of 1200px or more as a very large desktop application.

// Micro devices (erect mobile phones, smaller than576px// Media Query is not required, as this is the default in bootstrap // small devices (horizontal phones,576pxAnd above)@media (min-width: 576px) {... } // Medium device (tablet,768pxAnd above)@media (min-width: 768px) {... } // Large device (desktop side,992pxAnd above)@media (min-width: 992px) {... } // Very large devices (large desktops,1200pxAnd above)@media (min-width: 1200px) {... }Copy the code

You can see that some websites limit their content to 1200px, and then center it with white space on both sides. Bootstrap design is similar to that of Facebook and Twitter, and this design is already applicable to most websites.

As on Twitter, the middle area is fixed at 1200px and the sides are left blank.

test

Here are a few quizzes to help you review the concepts above.

1. What is the PPI of a 24-inch 1920 x 1080 screen?
2. The device pixel is 5120 x 2880, sreen.width = 2560, window.devicePixelRation = 3. How much zoom is the browser?
3. Is there a way to accurately get the resolution of the device through JavaScript without knowing anything about the environment, and if so, by?
4. Compare the PPI you got in question 1 to the pre-iphone 4 (320*480, PPI 163). What do you think this reminds you of in web development? (Note: 1920/320 = 6, but the screen width ratio is more than 6 times.)

Refer to the article

A Tale of Two Viewports — Part One (Quirksmode.org)

A tale of Two Viewports — Part Two (quirksmode.org)

Meta viewport (quirksmode.org)