Search code examples
cssresponsive-designmedia-queries

what is the Media queries for ipad 3

I need to make specific changes to the page layout for iPads 3.There is any media query css for I-pad3 9'7inch screen 1536 x 2048 pixels (~264 ppi pixel density)

Solution

  • The media query itself doesn't appear to have changed significantly from the previous iterations of the iPad with the exception that pixel ratio is set to handle retina displays via the -webkit-min-device-pixel-ratio attribute : 

    @media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2) {
     /* Place iPad 3 Styles Here */
}

    These higher-resolution retina displays generally still report the same device-width as earlier versions, but you can think of the previously mentioned attribute effectively as a "multiplier" to your minimum and maximum values.