Add a HiDPI example media query

`-webkit-device-pixel-ratio` targets WebKit browsers. `min-resolution` targets everything else. Reference: http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/ Fix gh-1127
h5bp · Aug 18, 2012 · 28f922f · 28f922f
1 parent 445037c
commit 28f922f
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,6 @@
 == HEAD
 
+* Add a HiDPI example media query (#1127).
 * Add bundled docs (#1154).
 * Add MIT license (#1139).
 * Separate normalize.css from the rest of the CSS (#1160).

diff --git a/css/main.css b/css/main.css
@@ -218,6 +218,11 @@ textarea {
     /* Style adjustments for viewports that meet the condition */
 }
 
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+       only screen and (min-resolution: 144dpi) {
+    /* Style adjustments for high resolution devices */
+}
+
 /* ==========================================================================
    Print styles.
    Inlined to avoid required HTTP connection: h5bp.com/r