For mobile web terminals, you need to know the application of devicePixelRatio in terms of devicepixelratio and devicePixelRatio.

For mobile web terminals, you need to know the application of devicePixelRatio in terms of devicepixelratio and devicePixelRatio.

What we are talking about heredevicePixelRatioActually, it referswindow.devicePixelRatioSupported by all WebKit browsers and Opera.

Concept

DevicePixelRatioIt is the ratio of physical pixels on the device to device independent pixels (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 is 320px/320px = 1.

To learn about physical pixels, independent pixels, device pixel ratio for other phone models, please view http://screensiz.es/phone

On mobile phones, our general images are blurred on the HD display. What is the HD display?

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.

Now that we know the HD display, we can analyze the reason why the general picture will be blurred on its device. If there is an image, there are two mobile phones, and one is a normal display, one is a high-definition screen. on a screen of the same size, the bitmap in the high-definition screen will be enlarged and the picture will become 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 up2:1In fact, the magnification of various HD display screens is different.1.3: 1, 1.5: 1Currently, the most2:1And HTC Butterfly, Nexus 5, Samsung Galaxy S4, and Sony Xperia Z.3:1

Distinguish between common display and HD screen

The value of devicePixelRatio can be used to distinguish between a common display screen and a high-definition screen,When the devicePixelRatio value is equal to 1 (that is, the minimum value,When the devicePixelRatio ValueIf it is greater than 1 (usually 1.5, 2.0), it is a high-definition display.

How to call mobile terminalsHD background image

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 calls HD background images

Media queries combined with devicePixelRatio can be used to distinguish between a common display and a high-definition display, and the following CSS design scheme is provided:

. Css {/* Common display screen (device pixel ratio less than or equal to 1.3) uses a 1-fold image */background-image: url(img_1x.png );} @ media only screen and (-webkit-min-device-pixel-ratio: 1.520.0000.css {/* high-definition display (device pixel ratio greater than or equal to 1.5) Use 2x figure */background-image: url(img_2x.png );}}

Image-set call retina background image

Image-set is a private attribute of Webkit and a property of Css4. Some websites have already used it. For details, refer to W3C instructions,Currently, Apple's retina display and some android display are supported.That is to say, its compatibility is quite general ~

. Css {background: url (.. /img/bank_ico.png) no-repeat;/* does not support image-set display */background:-webkit-image-set (url (.. /img/bank_ico.png) 1x,/* supports image-set browsers under the [Normal screen] */url (.. /img/bank_ico_retina.png) 2x);/* supports the [Retina screen] of the image-set browser */}

Reference address:

Brief Introduction to devicePixelRatio

HD display principle and design scheme