Skip to content

Instantly share code, notes, and snippets.

@wylieconlon
Forked from marcedwards/high-dpi-media.css
Created August 24, 2012 22:05
  • Star 4 You must be signed in to star a gist
  • Fork 4 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save wylieconlon/3456250 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 */
/* - 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 */
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment