¿Dónde puedo encontrar una lista de consultas de medios CSS3 para todos los dispositivos comunes?

Question

Estoy buscando una lista de consultas de medios que se dirijan a todos los tamaños de dispositivo comunes en sus diferentes orientaciones (vertical u horizontal).

Además, para identificar correctamente el ancho (y la altura) de los medios, ¿necesito establecer una metaetiqueta para el nivel de zoom o la ventana gráfica? Es decir. ¿afecta el nivel de zoom a [min | max] - [width | height]?

Answer 1

Parece que hay una lista bastante exhaustiva here.

Contiene reglas diferentes para ordenadores portátiles, ordenadores de sobremesa, teléfonos inteligentes y dispositivos específicos (como el iPhone 4)

Answer 2

Una buena lista de preguntas de los medios. http://nmsdvid.com/snippets/

Answer 3

Utilice esta lista

/* Laptop/Tablet (1024px) */ 
@media only screen and (min-width: 481px) and (max-width: 1024px) 

and (orientation: landscape) { 
} 

/* Tablet Portrait (768px) */ 
@media only screen and (min-width: 321px) and (max-width: 1024px) 

and (orientation: portrait) { 
} 

/* Phone Landscape (480px) */ 
@media only screen and (min-width: 321px) and (max-width: 480px) 

and (orientation: landscape) { 
} 

/* Phone Portrait (320px) */ 
@media only screen and (max-width: 320px) { 
} 

Answer 4

Varias buenas respuestas ya, pero ahora con el iPhone 6 y 6 Plus no se aplican esas dimensiones "normales":

/* iPhone 6 landscape */ 
@media only screen and (min-device-width: 375px) 
    and (max-device-width: 667px) 
    and (orientation: landscape) 
    and (-webkit-min-device-pixel-ratio: 2) 
{ } 

/* iPhone 6 portrait */ 
@media only screen 
    and (min-device-width: 375px) 
    and (max-device-width: 667px) 
    and (orientation: portrait) 
    and (-webkit-min-device-pixel-ratio: 2) 
{ } 

/* iPhone 6 Plus landscape */ 
@media only screen 
    and (min-device-width: 414px) 
    and (max-device-width: 736px) 
    and (orientation: landscape) 
    and (-webkit-min-device-pixel-ratio: 3) 
{ } 

/* iPhone 6 Plus portrait */ 
@media only screen 
    and (min-device-width: 414px) 
    and (max-device-width: 736px) 
    and (orientation: portrait) 
    and (-webkit-min-device-pixel-ratio: 3) 
{ } 

/* iPhone 6 and 6 Plus */ 
@media only screen 
    and (max-device-width: 640px), 
    only screen and (max-device-width: 667px), 
    only screen and (max-width: 480px) 
{ } 

/* Apple Watch */ 
@media 
    (max-device-width: 42mm) 
    and (min-device-width: 38mm) 
{ } 

Answer 5

Esta lista le ayudará a ampliamente: -

/* Smartphones (portrait and landscape) ----------- */ 
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { 
/* Styles */ 
} 

/* Smartphones (landscape) ----------- */ 
@media only screen and (min-width : 321px) { 
/* Styles */ 
} 

/* Smartphones (portrait) ----------- */ 
@media only screen and (max-width : 320px) { 
/* Styles */ 
} 

/* iPads (portrait and landscape) ----------- */ 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { 
/* Styles */ 
} 

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

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

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

/* Large screens ----------- */ 
@media only screen and (min-width : 1824px) { 
/* Styles */ 
} 

/* iPhone 4 ----------- */ 
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) { 
/* Styles */ 
} 

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) { 
/* Styles */ 
} 

/* iPhone 5 ----------- */ 
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){ 
/* Styles */ 
} 

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){ 
/* Styles */ 
} 

/* iPhone 6 ----------- */ 
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){ 
/* Styles */ 
} 

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){ 
/* Styles */ 
} 

/* iPhone 6+ ----------- */ 
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){ 
/* Styles */ 
} 

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){ 
/* Styles */ 
} 

/* Samsung Galaxy S3 ----------- */ 
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){ 
/* Styles */ 
} 

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){ 
/* Styles */ 
} 

/* Samsung Galaxy S4 ----------- */ 
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){ 
/* Styles */ 
} 

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){ 
/* Styles */ 
} 

/* Samsung Galaxy S5 ----------- */ 
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){ 
/* Styles */ 
} 

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){ 
/* Styles */ 
}