amitabhaghosh197
9/19/2016 - 1:54 PM

A CSS media query that captures almost all high DPI aware devices.

A CSS media query that captures almost all high DPI aware devices.

/* -------------------------------------------------------- */
/*                                                          */
/* A media query that captures:                             */
/*                                                          */
/* - Retina iOS devices                                     */
/* - Retina Macs running Safari                             */
/* - High DPI Windows PCs running IE 8 and above            */
/* - Low DPI Windows PCs with IE zoomed in                  */
/* - Android hdpi devices and above                         */
/* - Android tvdpi devices, including Google Nexus 7        */
/* - Chrome running on high DPI Macs and PCs                */
/*                                                          */
/* Please note that that this code assumes you'll swap a    */
/* 2× version of your images. If you'd like to supply       */
/* finer increments, other thresholds might be appropriate. */
/*                                                          */
/*                                @marcedwards from @bjango */
/*                                                          */
/* -------------------------------------------------------- */

@media
	only screen and (-webkit-min-device-pixel-ratio: 1.3),
	only screen and (min-device-pixel-ratio: 1.3),
	only screen and (min-resolution: 120dpi)
	{
		/* Your code to swap higher DPI images */
	}