CSS para iPhone y iPad

Pequeña chuleta de CSS para diseños responsive dirigidos a dispositivos como iphone y ipad

Hay que tener en cuenta la orientación del dispositivo. Horizontal (landscape) y vertical (portrait)

 

iPad en portrait & landscape

@media only screen
 and (min-device-width : 768px)
 and (max-device-width : 1024px) { /* ESTILO AQUI */}

iPad en landscape

 @media only screen
 and (min-device-width : 768px)
 and (max-device-width : 1024px)
 and (orientation : landscape) { /* ESTILO AQUI */}

iPad en portrait

 @media only screen
 and (min-device-width : 768px)
 and (max-device-width : 1024px)
 and (orientation : portrait) { /* ESTILO AQUI */ }

Retina iPad en portrait & landscape

 @media only screen
 and (min-device-width : 768px)
 and (max-device-width : 1024px)
 and (-webkit-min-device-pixel-ratio: 2) { /* ESTILO AQUI */}

Retina iPad en landscape

 @media only screen
 and (min-device-width : 768px)
 and (max-device-width : 1024px)
 and (orientation : landscape)
 and (-webkit-min-device-pixel-ratio: 2) { /* ESTILO AQUI */}

Retina iPad en portrait

 @media only screen
 and (min-device-width : 768px)
 and (max-device-width : 1024px)
 and (orientation : portrait)
 and (-webkit-min-device-pixel-ratio: 2) { /* ESTILO AQUI */ }

iPad 1 & 2 in portrait & landscape

 @media only screen
 and (min-device-width : 768px)
 and (max-device-width : 1024px)
 and (-webkit-min-device-pixel-ratio: 1){ /* ESTILO AQUI */}

iPad 1 & 2 in landscape

 @media only screen
 and (min-device-width : 768px)
 and (max-device-width : 1024px)
 and (orientation : landscape)
 and (-webkit-min-device-pixel-ratio: 1) { /* ESTILO AQUI */}

iPad 1 & 2 in portrait

 @media only screen
 and (min-device-width : 768px)
 and (max-device-width : 1024px)
 and (orientation : portrait)
 and (-webkit-min-device-pixel-ratio: 1) { /* ESTILO AQUI */ }

iPad mini in portrait & landscape

 @media only screen
 and (min-device-width : 768px)
 and (max-device-width : 1024px)
 and (-webkit-min-device-pixel-ratio: 1) { /* ESTILO AQUI */}

iPad mini in landscape

 @media only screen
 and (min-device-width : 768px)
 and (max-device-width : 1024px)
 and (orientation : landscape)
 and (-webkit-min-device-pixel-ratio: 1) { /* ESTILO AQUI */}

iPad mini in portrait

 @media only screen
 and (min-device-width : 768px)
 and (max-device-width : 1024px)
 and (orientation : portrait)
 and (-webkit-min-device-pixel-ratio: 1) { /* ESTILO AQUI */ }

Resolución del iPad mini

 Screen Width = 768px (CSS Pixels)
 Screen Height = 1024px (CSS Pixels)
 Screen Width = 768px (Actual Pixels)
 Screen Height = 1024px (Actual Pixels)
 Device-pixel-ratio: 1

Texto original: http://www.stephentgilbert.com/mediaqueries/