Pixel density crisis

In screen-based design, pixels are always the smallest unit. Because it is inseparable, it becomes a tangible unit for the designer to measure the screen distance. In the past, I heard people say: "A pixel is a pixel ." This sentence is intended to help flat designers who are not accustomed to Fixed Screen density understand the concept of pixels. Because of this consistency, web designers also use pixels rather than vertices or other units to build websites.

Now, with the development of hardware, the pixel density is increasing, and it is difficult to use pixels as a reliable unit as before. Browser scaling is another matter. quirksmode is introduced in this article. On today's high-resolution devices, what exactly does pixel mean? Why does an iPhone 4 with a resolution of 640px x 960px claim to be 320px x 480px in a browser? In fact, there are two different pixel definitions: one is the minimum unit (hardware pixel) that the screen can reach, and the other is the visually consistent "reference pixel ".

Hardware pixels

Most of us are familiar with hardware pixels. The hardware pixel is the smallest point that can be displayed on the display screen. It is usually composed of three sub-pixels: Red, green, and blue. The light passing through these three sub-pixels is combined to create a pixel color. Hardware pixels correspond to physical elements on the screen. They cannot be stretched, distorted, or divided. These features make hardware pixels look like atoms-the most basic unit in any design work.

Reference pixel and split atom

The concept of pixels is changing. W3C defines a standard for all pixel-based measurements, called reference pixels. Therefore, all pixel-based designs do not have to be limited to hardware pixels, but move closer to a visual reference-based unit. This reference pixel may be twice the hardware pixel. In any reading scenario, such pixels should look as big. The key to using reference pixels is to take the screen size as the context. It is also a reference pixel, which is small on the mobile phone and large in the projection. If you are holding your cell phone and looking at the projection at the same time, no matter what the resolution of the device is, whether the pixel density is different or not, the pixels should look as big as they are. If consistent compliance is achieved, this standard will ensure that pixels are consistent in any design work and on any platform, regardless of the pixel density or the distance from viewing.

The reference pixel is really good, but now there is a different definition. The Android device has a new unit called "density independent pixel" (DIP. Developers can use it to differentiate the number of visible pixels occupied by an element. In this way, pixels can be used to display sharp images and patterns based on hardware pixels, and dip can be used to dynamically adjust the text size or to keep some parts consistent across devices. It is suitable for Android to divide the definition of one pixel into two. But what about Web? The pixel-based design will continue to be applied to various devices in a few years. It is good to use these units in web development, but if we do not completely change our current understanding of pixels, we can only destroy the web. Imagine that if the iPhone 4 tells the website that its actual width is 640px, the text will become half of the original size-of course, without scaling. At this time, the website is almost invisible. All mobile websites with scaling disabled become useless.

Figure 1: Standard pixel size in Galaxy Tab and Kindle Fire

We also don't fully understand how each device processes pixels, which may cause problems. For example, the earliest Galaxy Tab and Kindle Fire have the same screen size and resolution, but the tab pixel is adjusted according to the reference pixel. Each pixel is 1.5 times the size of the fire, fire uses hardware pixels. Therefore, all devices must be tested one by one. After all, all the information mentioned in the manual is hardware pixels. When you see the instructions for the two devices, developers will think that the screen is as big as the browser kernel is WebKit, so the website will be displayed the same. Unfortunately, this is not the case. For any website, the Galaxy Tab is 400px × 683px, while the Kindle Fire is 600px × 1024px.

Determine the breakpoint to solve the problem

Yes, there is a pixel problem. However, we can detect this inconsistency through media queries and make corresponding adjustments. Specifically, you can useDevice-pixel-RatioTo detect the scaling ratio of pixels. With the detection resolution, you canProgramTo determine the device type. IPhone 4Device-pixel-RatioThe value is 2, that is, one pixel in iPhone 4 is equal to two hardware pixels. Many Android devicesDevice-pixel-RatioIs 1.5, so one pixel equals 1.5 hardware pixels. CurrentlyDevice-pixel-RatioYou still need to add the vendor prefix, but with it, you can detect whether the device scales the pixel.

When determining the device type, the proprietary feature is the key, but you should also note that you should not be too specific to a certain device to prevent other devices from having similar features. For example, the original Galaxy Tab and similar devices,Device-pixel-RatioEqual to 1.5 is only one of the conditions. Today, most Android mobile phonesDevice-pixel-RatioIt is also 1.5, which introduces other troubles. By queryingDevice-WidthIt will know that it is bigger than the mobile phone, but it will not be bigger than other tablets that will appear in the future. UseDevice-WidthYou can know the screen resolution, whileWidthAndHeightOnly the width and height of the view are returned. Based on this indicator, you can determine the device type you are using.

@ Media screen and (device-pixel-ratio: 1.5) and (device-width: 683px) and (orientation: Landscape), screen and (device-pixel-ratio: 1.5) and (device-width: 400px) and (orientation: Portrait)
 

Note,Device-pixel-RatioIs the vendor prefix, so-WebKit-And-O-Is valid for WebKit and operabrowser.

Next we will detect devices similar to the Kindle Fire, which have the same hardware resolution as tab, so hardware pixels can be used. It is difficult for such devices to be separated from netbooks and other devices with larger screens and even iPad devices with the same resolution. Use Media query featuresOrientationAndMax-device-heightIt can be targeted at the devices we want to detect. The height of these devices is usually smallerDevice-heightTherefore, in order to avoid a flat of 1024x768, the following 600 pixels can be used as a condition. In this way, you can find similar devices with the same resolution and size:

@ Media screen and (device-pixel-ratio: 1) and (device-width: 1024px) and (max-device-Height: 600px) and (orientation: Landscape ), screen and (device-pixel-ratio: 1) and (device-width: 600px) and (max-device-Height: 1024px) and (orientation: Portrait)
 

Figure 2: normalized pixels on Galaxy Tab and Kindle Fire

Using em instead of pixels is not only conducive to scaling the font, but also can better control the scaling of the site. All you need to do is modifyHtmlElementFont-sizeValue. To make the website look the same in the Kindle Fire as in the Galaxy Tab, simply multiply the benchmark size by 3/2 (1.5) in the Kindle Fire media query. If you want to use hardware-based pixels on the Galaxy Tab, multiply the reference size by 2/3 (. 666667) in its media query ). Because everything is based on em, the whole site will naturally be relative to the benchmarkFont-sizeZoom. This gist is a complete example. You can modify it based on the context to improve cross-platform consistency.

It takes some time to understand the definition of multiple pixels. Pixel is the most basic unit, and it is difficult to understand it because of its visual consistency. Equipment vendors have also done a lot of work to solve these problems, saving us time, but various problems are inevitable. In any case, as long as we keep an eye on this field, we will find and solve these problems.