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
Tabla de contenidos
- 1 iPad en portrait & landscape
- 2 iPad en landscape
- 3 iPad en portrait
- 4 Retina iPad en portrait & landscape
- 5 Retina iPad en landscape
- 6 Retina iPad en portrait
- 7 iPad 1 & 2 in portrait & landscape
- 8 iPad 1 & 2 in landscape
- 9 iPad 1 & 2 in portrait
- 10 iPad mini in portrait & landscape
- 11 iPad mini in landscape
- 12 iPad mini in portrait
- 13 Resolución del iPad mini
@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/
Muchas gracias por el aporte , saludos!!!