I am working on a future proof fluid website and dont agree with the following:
@media
only screen and (-webkit-min-device-pixel-ratio: 2) ,
only screen and ( min--moz-device-pixel-ratio: 2) ,
only screen and ( -o-min-device-pixel-ratio: 2/1) ,
only screen and ( min-device-pixel-ratio: 2) ,
only screen and ( min-resolution: 192dpi) ,
only screen and ( min-resolution: 2dppx) {
}
The world is not only retina or devices with 1, 1.5 or 2 pixel ratio. We will keep on having more numbers in the future. My question is: how do I target all those resolutions and future resolutions?
My problem is I have SVG versions of my PNG (PNG to support older browsers and devices with pixel ratio 1) for high resolution displays with I want to come into effect when the user has "any" high resolution display like the retina. So in order to spare all the tons of media queries and have it all future proof I prefer to write it once only. Like a master media query for all high resolution screens, be it mac retina, iphone, dell, HP, etc, nexus phone, etc.
Also why only min-resolution: 192dpi or 2dppx? I mean what about pixel density 1.5 144dpi ? isnt it better to set the minimum to lets say 100dpi (standard is 96) and everything above the normal will use my SVG. 100dpi, 101, 102......144dpi......192.......300dpi........900dpi.......1000 dpi and so on.
/* 1.25 dpr */
@media
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi){
/* Retina-specific stuff here */
}
/* 1.3 dpr */
@media
(-webkit-min-device-pixel-ratio: 1.3),
(min-resolution: 124.8dpi){
/* Retina-specific stuff here */
}
/* 1.5 dpr */
@media
(-webkit-min-device-pixel-ratio: 1.5),
(min-resolution: 144dpi){
/* Retina-specific stuff here */
}
/* 2 dpr */
@media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi){
/* Retina-specific stuff here */
}