How to specify high resolution display in css


media query

@media only screen and (-webkit-min-device-pixel-ratio: 2),
	   only screen and (min-resolution: 2dppx){
	   // css for high resolution display here 

Attension of media query solution

You should use resolution property to specify high resolution display. Because device-pixel-ratio is non-standard property. But iOS safari dose not support resolution property.

Actually, You need to use both property.

browser support

image-set in background-image

  width: 200px;
  height: 200px;
  display: block;
  background-repeat: no-repeat;
  background-image: -webkit-image-set(
    url( 1x, // for non-retina
    url( 2x  // for retina
  background-size: contain;

Attension of image-set solution

You can use background-image#image-set to specify high resolution display. It is more simply than media query.
All of mobile browser including Android browser can use it.

brower support