Skip to content

Instantly share code, notes, and snippets.

@coliff
Forked from marcedwards/high-dpi-media.css
Last active October 13, 2015 14:48
Show Gist options
  • Save coliff/4212036 to your computer and use it in GitHub Desktop.
Save coliff/4212036 to your computer and use it in GitHub Desktop.
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 */
/* - Low DPI Windows PCs & Macs with Firefox zoomed in */
/* - Android hdpi devices and above */
/* - Android tvdpi devices, including Google Nexus 7 */
/* - Chrome running on high DPI Macs and PCs */
/* - Opera running on high DPI Macs, PCs and mobile devices */
/* */
/* 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.2),
only screen and (-o-min-device-pixel-ratio: 5/4),
only screen and (min-resolution: 120dpi)
{
/* Your code to swap higher DPI images */
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment