7

I have search a lot about CSS Specfic Media Queries for Ipad mini adn found this page. Which says this the Ipad Mini have 7.9 in 162 ppi. How to apply this properties in CSS Media Queries. Please help

thorn0
  • 9,362
  • 3
  • 68
  • 96
Imran Qadir Baksh - Baloch
  • 32,612
  • 68
  • 179
  • 322

1 Answers1

8

The iPad mini will just inherit the same viewport size as the original iPad. But for more precise, you can target pixel density of the iPad mini, so:

/* ipad Mini Portrait */
@media only screen and (width:768px) and (resolution: 163dpi) {

}

/* ipad Mini Landscape */
@media only screen and (width:1024px) and (resolution: 163dpi) {

}
Eli
  • 14,779
  • 5
  • 59
  • 77
  • 1
    This is technically correct in terms of how to apply resolution to a media query, but it will not do anything as of iOS 6. (see http://jsfiddle.net/egid/DX9eJ/ for an example). – egid Jun 27 '13 at 23:25
  • 2
    Actually you can't: "[*] Webkit engine does not support CSS resolution query as in the specification, the use of the non-standard device-pixel-ratio query is needed for browsers Safari, see bug 16832." https://developer.mozilla.org/en-US/docs/Web/CSS/resolution – hexalys Feb 09 '14 at 03:45