[Original] HD display principle and design scheme

After the end of the year, the product staff had to catch up with KPIs, And the development had been working hard. So after four weeks of continuous overtime, the project was a little better and finally took some time, write an article, just for fun ~

This is a similar sharing I have done in my team, because a garden friend asked me about css sprite on my mobile phone last time.I don't know why the pictures on the mobile phone end are twice the size, and how is background positioning calculated? In fact, I am not familiar with the display of retina. I will try again today to share with you the principles of retina and its design solutions for HTML5 pages on mobile terminals ~

First, play a game. You can scan the following QR code on your mobile phone to check the devicePixelRatio value of your mobile phone. After scanning, click "OK" or "OK" to see whether it is true or not ~

 

What kind of jobs do you see on your mobile phone? The devicePixelRatio values are 1.0, 1.5, and 2.0, respectively. If you are 1.5 or above, congratulations, your mobile phone display is in high-definition resolution; if you are 1.0, you know ~

 

Directory:

• High-Definition display principle
  • The retina display is only a type of high-definition display.
  • Blurred HD display
  • The proportion of the bitmap to be enlarged in a common HD display.
• How to distinguish between common display and HD display
• How to design a high-definition background image
  • Media Queries design HD background image
  • Image-set design retina background image

 

HD display originated from retina. Open Wikipedia and search for the Retina display. It is a display designed and commissioned by Apple, the LCD screen with high pixel density makes it impossible for the human eye to distinguish individual pixels.

The principle of HD display is as follows:

 

The retina display is only a type of high-definition display.

Since Apple's retina display was launched, many manufacturers have also begun to launch their own HD display, such as Samsung mobile phones, meizu mobile phones, and Xiaomi televisions, at present, most of the mobile devices on the market are high-definition display screens. In fact, their display principles are all from Apple's retina display. I believe that the high-definition display is called a retina display.

For example, the high-definition display screen of Xiaomi 3 has a resolution of 5 feet x 1920.

Blurred HD display

After learning about the principles of the high-definition display, we can imagine that there are two pictures on two different mobile phones, one is a normal display, the other is a high-definition display, on a screen of the same size, the bitmap in the HD display is enlarged, and the image is blurred.

For example, the picture on the right of the bridge helper on the retina display is blurred because the contrast displayed on the Retina display is four times that of the normal display, and the number of display pixels is changed from one to four, that is to say, the image is doubled, and thus blurred ~

The proportion of the bitmap to be enlarged in a common HD display.

We can see that the image in the retina display is magnified in multiples of upIn fact, the magnification of various HD display screens is different.1.5: 1,,At present, the maximum isAnd HTC Butterfly, Nexus 5, Samsung Galaxy S4, and Sony Xperia Z.

Think of the devicePixelRatio value of the game at the beginning of the article, and use its value to distinguish between a general display and a high-definition display. For devicePixelRatio, we recommend that you read this article, "Brief Introduction to devicePixelRatio". speak very well ~

In brief, devicePixelRatio is the ratio of physical pixels on the device to device independent pixels (dips), that is, devicePixelRatio = screen physical pixels/device independent pixels.

For example, for iPhone 4S, the resolution is 960x640, the screen width is calculated, the physical pixel is 640px, and the device independent pixel is 320px. Then, the value of devicePixelRatio is 640px/320px = 2, another example is iPhone 3, the calculated devicePixelRatio value is

Therefore, by calculating the devicePixelRatio value, you can distinguish between a common display and a high-definition display.When the devicePixelRatio Value

To better improve user experience and reduce traffic on the mobile end, we can use a no-use solution for different display screens to ensure that images can be normally displayed on different display screens, this method is similar to the principle of using different images for different resolutions in the native APP ~

Determine the value of devicePixelRatio to load images of different sizes.

Because 3.0 of mobile phones are currently relatively small, it is acceptable for 3.0 to load a 2x image. So, through the above scheme, we do not need to design 2 sets of images, or even 3 sets of images?

It depends on the user groups, maintenance costs, and urgent product launches. For example, most of the user groups come from high-end mobile phones, it is acceptable to load a 2x image ~

We recommend that you load 2 sets of images ~

Media Queries design HD background image

Best compatibility with media queriesA solution ~

{:;}{:;  }

Here is a test demo for Media Queries combined with sprites. If you are interested, go

Image-set design retina background image

Image-set, which is a private attribute of Webkit and also a property of Css4. It is currently used by some websites, let's take a look at W3C instructions on the mongoretina display and some android display.

{:;:;                }

OK ~