¿Cuáles serían las CSS media querys de todos los dispositivos móviles actuales?

Hola, me gustaría que me indicasen cuáles serían las media querys de CSS para controlar todos los dispositivos móviles.   Gracias.

Preguntada on 10 enero, 2017 en CSS3.
Agregar Comentario
1 Respuesta(s)

Hola kalan.

 

Te dejo por aquí de casi todos los dispositivos móviles de Apple:

 

iPAD

/****iPad en portrait & landscape****/
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) { /* CÓDIGOS CSS AQUÍ */ }
 
 
/****iPad en landscape****/
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { /* CÓDIGOS CSS AQUÍ */ }
 
 
/****iPad en portrait****/
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { /* CÓDIGOS CSS AQUÍ */ }

 

iPad 3 & 4

/****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) { /* CÓDIGOS CSS AQUÍ */ }
 
 
/****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) { /* CÓDIGOS CSS AQUÍ */ }
 
 
/****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) { /* CÓDIGOS CSS AQUÍ */ }

 

 

iPad 1 & 2

/****iPad 1 & 2 en portrait & landscape****/
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (-webkit-min-device-pixel-ratio: 1){ /* CÓDIGOS CSS AQUÍ */ }
 
 
/****iPad 1 & 2 en landscape****/
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1) { /* CÓDIGOS CSS AQUÍ */ }
 
 
/****iPad 1 & 2 en portrait****/
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) 
and (-webkit-min-device-pixel-ratio: 1) { /* CÓDIGOS CSS AQUÍ */ }

 

iPAD MINI

/****iPad mini en portrait & landscape****/
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1) { /* CÓDIGOS CSS AQUÍ */ }
 
 
/****iPad mini en landscape****/
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1) { /* CÓDIGOS CSS AQUÍ */ }
 
 
/****iPad mini en portrait****/
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 1) { /* CÓDIGOS CSS AQUÍ */ }

 

iPHONE

/****iPhone 6 en portrait & landscape****/
@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) { /* CÓDIGOS CSS AQUÍ */ }
 
 
/****iPhone 6 en landscape****/
@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) 
and (orientation : landscape) { /* CÓDIGOS CSS AQUÍ */ }
 
 
/****iPhone 6 en portrait****/
@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) 
and (orientation : portrait) { /* CÓDIGOS CSS AQUÍ */ }
 
 
/****iPhone 6 Plus en portrait & landscape****/
@media only screen 
and (min-device-width : 414px) 
and (max-device-width : 736px) { /* CÓDIGOS CSS AQUÍ */ }
 
 
/****iPhone 6 Plus en landscape****/
@media only screen 
and (min-device-width : 414px) 
and (max-device-width : 736px) 
and (orientation : landscape) { /* CÓDIGOS CSS AQUÍ */ }
 
 
/****iPhone 6 Plus en portrait****/
@media only screen 
and (min-device-width : 414px) 
and (max-device-width : 736px) 
and (orientation : portrait) { /* CÓDIGOS CSS AQUÍ */ }
 
 
/****iPhone 5 & 5S en portrait & landscape****/
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) { /* CÓDIGOS CSS AQUÍ */ }
 
 
/****iPhone 5 & 5S en landscape****/
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : landscape) { /* CÓDIGOS CSS AQUÍ */ }
 
 
/****iPhone 5 & 5S en portrait****/
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait) { /* CÓDIGOS CSS AQUÍ */ }
 
 
/****iPhone 2G-4S en portrait & landscape****/
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { /* CÓDIGOS CSS AQUÍ */ }
 
 
/****iPhone 2G-4S en landscape****/
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) 
and (orientation : landscape) { /* CÓDIGOS CSS AQUÍ */ }
 
 
/****iPhone 2G-4S en portrait****/
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) 
and (orientation : portrait) { /* CÓDIGOS CSS AQUÍ */ }

 

AdministradorAnalista Programador Respondida on 14 enero, 2017.
Agregar Comentario

Tu Respuesta

Al publicar tu respuesta, confirmas estar de acuerdo con las políticas de privacidad y términos de servicio.