How to specify high resolution display in css

December 08, 2014

Reading time ~1 minute

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

add ticket number to git commit automatically

Most of ticket tracker like Github, pivotal tracker have function to connect your commit to ticket(story).But every time when you commit ...… Continue reading

I will build frontend and backend separately

Published on September 28, 2016

order of angular controller's initialisation

Published on October 05, 2015