1. Reasons for blurred pictures

Most of the images we use are bitmaps (PNG, JPG…) A bitmap is made up of individual pixels, each with a specific position and color value:

In theory, each pixel of the bitmap should be rendered using one physical pixel on the screen for optimal display.

On a screen with DPR > 1, a pixel of the bitmap may be rendered by multiple physical pixels. However, these physical pixels cannot be accurately assigned to the color of the corresponding bitmap pixel, and can only be approximated, so the same image will be blurred on a screen with DPR > 1:

2. Solutions

1) Media query (background)

*/ @mixin bg-image($url) {background-image: /* mixin bg-image($url) {background-image: url($url + "@2x.png"); @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3){ background-image: url($url + "@3x.png"); }} /* call @include */ div{width:30px; height:20px; background-size:30px 20px; background-repeat:no-repeat; @include bg-image('.. /.. /.. /.. /static/image/map_loading'); }Copy the code

2) image-set (background image)

.avatar {
    background-image: -webkit-image-set( "conardLi_1x.png" 1x, "conardLi_2x.png" 2x );
}
Copy the code
  1. srcset (img) 

Using the srcset attribute of the IMG tag, the browser automatically matches the best display image based on pixel density:

<img src="conardLi_1x.png"
     srcset=" conardLi_2x.png 2x, conardLi_3x.png 3x">
Copy the code

4) javascript URL splicing

Use window.devicePixelRatio to get the devicePixelRatio, traverse all the images, and replace the image address:

$(document).ready(function(){ if (window.devicePixelRatio > 1) { var lowresImages = $('img'); images.each(function(i) { var lowres = $(this).attr('src'); var highres = lowres.replace(".", "@2x."); $(this).attr('src', highres); }); }}); Or const DPR = window.devicepixelRatio; const images = document.querySelectorAll('img'); images.forEach((img)=>{ img.src.replace(".", `@${dpr}x.`); })Copy the code

3. Attach the cut diagram and corresponding model used for iOS adaptation.