Devicepixelratio the reason for the blurred phone picture

First, mobile device picture blur problem

Cell phone blur The problem is the difference in the actual pixels that a pixel represents on the computer and on the phone.

The PX (independent pixel) units we use in the stylesheet do not necessarily represent the actual one pixel (physical pixel), which depends on the hardware settings. For example, a stolen image below, a separate pixel on the right is equal to four pixels, and a separate pixel on the left is equal to one pixel. Devicepixelratio is the value that represents this ratio, if the device is 640 physical pixels wide and 320 independent pixels, then Devicepixelratio is 640/320=2, and a separate pixel equals 4 physical pixels.

So, if you cut a 10-pixel-wide graph on a screen with a devicepixelratio of 2, and set the width to 10px, you actually put a 10-pixel picture in a 20-pixel-wide area, and the picture is stretched to 20 pixels, so it's mushy. If you want it to be perfect, put a picture of 20 pixels wide.

Ii. Solutions

So we can give different styles according to the devicepixelratio of the device.

If the script can be used to judge Window.devicepixelratio, currently on the mobile device basically support this property.

CSS can be used for media queries, such as:

@media only screens and (-webkit-min-device-pixel-ratio:1.5), only screens and (min-device-pixel-ratio:1.5) {         //Style       } @media only screens and (-webkit-min-device-pixel-ratio:2), only screens and ( Min-device-pixel-ratio:2){        //Style       }

Note: the value of device-width with media query is not the same in iOS and Android, one represents the independent pixel, one represents the physical pixel, Just as the screen width is taken with window.screen.width, the values obtained on both systems are not the same.

The mainstream smartphone devicepixelratio is now mostly 2, with fewer 1.5,3 and 1 less (PC 1).

Iii. about Viewport

Here is the main talk about the width and scale two properties, after a rough test:

on iOS : If Initial-scale is set without setting width, width = device-width/initial-scale; If no initial-scale is set and width is set, So scale=device-width/width.

on Android : If you set the Initial-scale without setting width, then width = device-width; If you do not set the Initial-scale and width is set, then scale= Device-width/width.

So, if you want the picture to appear normal on the phone, you can also take advantage of viewport, for example, on IPhone5S, Device-width is 320, the physical pixel width is 640, you can set width to 640 (independent pixels) in viewport. Scale is 0.5, the picture can be displayed intact in the screen, equivalent to the 640 wide pressure to 320 wide (independent pixels).