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

  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



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