Introduce a new, cross-browser HiDPI CSS @media rule to be used everywhere.

{{{
@media print,
  (-o-min-device-pixel-ratio: 5/4),
  (-webkit-min-device-pixel-ratio: 1.25),
  (min-resolution: 120dpi) {
}}}

Serve HiDPI graphics for printing, regardless of screen resolution.

Specify Opera's vendor-prefixed device pixel ratio property, for Opera desktop.

Specify a minimum Webkit device pixel ratio of 1.25 instead of 1.5, to serve
2x images to Android devices that are between 1 and 1.5x (like the Nexus 7).
Firefox and Opera will respond to 1.5x on these devices, but Chrome will not.

Specify min-resolution, which covers Firefox 19. Opera on Android also supports
min-resolution, but Opera Mini does not support dppx, so the dpi unit is used.

props iammattthomas for the exhaustive research.
props lessbloat for patching.

fixes #22238.



git-svn-id: http://core.svn.wordpress.org/trunk@22629 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Andrew Nacin
2012-11-17 06:50:08 +00:00
parent 0a888e8aa0
commit 7183a9cce9
11 changed files with 128 additions and 119 deletions

View File

@@ -74,7 +74,10 @@ abbr {
overflow: hidden;
display: block;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
@media print,
(-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi) {
#logo a {
background-image: url('../images/wordpress-logo-2x.png?ver=20120412');
background-size: 274px 63px;