How to specify high resolution display in css

css
tomoyukikashiro
tomoyukikashiro

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

.img-image-set{
  width: 200px;
  height: 200px;
  display: block;
  background-repeat: no-repeat;
  background-image: -webkit-image-set(
    url(http://dummyimage.com/200x200/000000/fff&text=min-resolution-1) 1x, // for non-retina
    url(http://dummyimage.com/400x400/000000/fff&text=min-resolution-2) 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

Deomo

http://codepen.io/Tkashiro/full/NPxwwg

Reference

Leave a comment