1

I've been asked to make different responsive layouts for tablets, depending on if they are high pixel density displays or not.

This code, which would target an iPhone 5s in landscape, doesn't seem to work. Is it possible?

@media
only screen ( min-width: 568px) and (-webkit-min-device-pixel-ratio: 1.25),
only screen ( min-width: 568px) and ( min--moz-device-pixel-ratio: 1.25),
only screen ( min-width: 568px) and ( -o-min-device-pixel-ratio: 1.25/1),
only screen ( min-width: 568px) and ( min-device-pixel-ratio: 1.25),
only screen ( min-width: 568px) and ( min-resolution: 200dpi),
only screen ( min-width: 568px) and ( min-resolution: 1.25dppx)
{
    body {
        background-color: maroon;               
    }               
}

By nesting the min-width inside the queries for dpi it seems to be working (I haven't tested on a large arsenal of devices). I've never heard of this being done, is it safe to do?

@media
only screen and (-webkit-min-device-pixel-ratio: 1.25),
only screen and ( min--moz-device-pixel-ratio: 1.25),
only screen and ( -o-min-device-pixel-ratio: 1.25/1),
only screen and ( min-device-pixel-ratio: 1.25),
only screen and ( min-resolution: 200dpi),
only screen and ( min-resolution: 1.25dppx)
{
    @media only screen and ( min-width: 568px) {
        body {
            background-color: maroon;               
        }
    }       
}
Volker E.
  • 5,911
  • 11
  • 47
  • 64
gneek
  • 77
  • 10
  • 1
    Well according to http://stackoverflow.com/questions/16114000/nesting-media-queries you cannot. Also see http://stackoverflow.com/questions/11746581/nesting-media-rules-in-css – Huangism Jun 19 '14 at 18:51

1 Answers1

2

Your media query is missing and after only screen

@media only screen and  ( min-width: 568px)

http://jsfiddle.net/L2dhY/

Checked on my mac book pro which on safari has pixel ratio > 1. Also note, you have and on your second block media query after only screen

Huangism
  • 16,278
  • 7
  • 48
  • 74