ios - queries - media query mobile iphone
Consultas de medios iPhone 6 y 6 Plus (7)
¿Alguien conoce tamaños de pantalla específicos para dirigir consultas de medios para iPhone 6 y 6 Plus?
Además, ¿los tamaños de los iconos y las pantallas de bienvenida?
iPhone X
/* Portrait and Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 812px)
and (-webkit-min-device-pixel-ratio: 3)
/* uncomment for only portrait: */
/* and (orientation: portrait) */
/* uncomment for only landscape: */
/* and (orientation: landscape) */ {
}
iPhone 6+, 7+ y 8+
/* Portrait and Landscape */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
/* uncomment for only portrait: */
/* and (orientation: portrait) */
/* uncomment for only landscape: */
/* and (orientation: landscape) */ {
}
iPhone 6, 6S, 7 y 8
/* Portrait and Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
/* uncomment for only portrait: */
/* and (orientation: portrait) */
/* uncomment for only landscape: */
/* and (orientation: landscape) */ {
}
iphone 6
-
Paisaje
@media only screen and (min-device-width : 375px) // or 213.4375em or 3in or 9cm and (max-device-width : 667px) // or 41.6875em and (width : 667px) // or 41.6875em and (height : 375px) // or 23.4375em and (orientation : landscape) and (color : 8) and (device-aspect-ratio : 375/667) and (aspect-ratio : 667/375) and (device-pixel-ratio : 2) and (-webkit-min-device-pixel-ratio : 2) { } -
Retrato
@media only screen and (min-device-width : 375px) // or 213.4375em and (max-device-width : 667px) // or 41.6875em and (width : 375px) // or 23.4375em and (height : 559px) // or 34.9375em and (orientation : portrait) and (color : 8) and (device-aspect-ratio : 375/667) and (aspect-ratio : 375/559) and (device-pixel-ratio : 2) and (-webkit-min-device-pixel-ratio : 2) { }si lo prefiere, puede usar
(device-width : 375px)y(device-height: 559px)en lugar de la configuraciónmax-ymax-.No es necesario utilizar todas estas configuraciones, y estas no son todas las configuraciones posibles. Estas son solo la mayoría de las opciones posibles para que pueda elegir las que satisfagan sus necesidades.
-
Agente de usuario
probado con mi iPhone 6 (modelo MG6G2LL / A) con iOS 9.0 (13A4305g)
# Safari Mozilla/5.0 (iPhone; CPU iPhone OS 9_0 like Mac OS X) AppleWebKit/601.1.39 (KHTML, like Gecko) Version/9.0 Mobile/13A4305g Safari 601.1 # Google Chrome Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_3) AppleWebKit/534.53.11 (KHTML, like Gecko) Version/5.1.3 Safari/534.53.10 (000102) # Mercury Mozilla/5.0 (iPhone; CPU iPhone OS 7_0_4 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11B554a Safari/9537.53 -
Lanzar imágenes
- 750 x 1334 (@ 2x) para retrato
- 1334 x 750 (@ 2x) para paisaje
-
Icono de la aplicación
- 120 x 120
iPhone 6+
-
Paisaje
@media only screen and (min-device-width : 414px) and (max-device-width : 736px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 3) { } -
Retrato
@media only screen and (min-device-width : 414px) and (max-device-width : 736px) and (device-width : 414px) and (device-height : 736px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 3) and (-webkit-device-pixel-ratio : 3) { } -
Lanzar imágenes
- 1242 x 2208 (@ 3x) para retrato
- 2208 x 1242 (@ 3x) para paisaje
-
Icono de la aplicación
- 180 x 180
iPhone 6 y 6+
@media only screen
and (max-device-width: 640px),
only screen and (max-device-width: 667px),
only screen and (max-width: 480px)
{ }
Predicho
Según el sitio web de Apple, el iPhone 6 Plus tendrá 401 píxeles por pulgada y será 1920 x 1080. La versión más pequeña del iPhone 6 será 1334 x 750 con 326 PPI.
Entonces, suponiendo que la información sea correcta, podemos escribir una consulta de medios para el iPhone 6:
@media screen
and (min-device-width : 1080px)
and (max-device-width : 1920px)
and (min-resolution: 401dpi)
and (device-aspect-ratio:16/9)
{ }
@media screen
and (min-device-width : 750px)
and (max-device-width : 1334px)
and (min-resolution: 326dpi)
{ }
Tenga en cuenta que device-aspect-ratio quedará en desuso en http://dev.w3.org/csswg/mediaqueries-4/ y se reemplazará aspect-ratio
El ancho mínimo y el ancho máximo pueden ser algo así como 1704 x 960.
Apple Watch (especulativo)
Las especificaciones en el reloj todavía son un poco especulativas ya que (hasta donde yo sé) todavía no ha habido una hoja de especificaciones oficial. Pero Apple mencionó en este comunicado de prensa que el reloj estará disponible en dos tamaños ... 38 mm y 42 mm.
Suponiendo además ... que esos tamaños se refieren al tamaño de la pantalla en lugar del tamaño general de Watch, estas consultas de medios deberían funcionar ... Y estoy seguro de que podría dar o tomar unos pocos milímetros para cubrir cualquier escenario sin sacrificar ninguna orientación no deseada porque..
@media (!small) and (damn-small), (omfg) { }
o
@media
(max-device-width:42mm)
and (min-device-width:38mm)
{ }
Vale la pena señalar que Media Consultas Nivel 4 del W3C actualmente solo está disponible como un primer borrador público, una vez que esté disponible para su uso traerá consigo muchas características nuevas diseñadas con dispositivos portátiles más pequeños como este en mente.
Debe seleccionar el tamaño de la pantalla mediante la consulta de medios para diferentes tamaños de pantalla.
para iphone :
@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio : 2)
{ }
@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio : 2)
{ }
y para la versión de escritorio :
@media only screen (max-width: 1080){
}
Esto es lo que me está funcionando en este momento:
iphone 6
@media only screen and (max-device-width: 667px)
and (-webkit-device-pixel-ratio: 2) {
iPhone 6+
@media screen and (min-device-width : 414px)
and (-webkit-device-pixel-ratio: 3)
Esto funciona para mí para el iphone 6
/*iPhone 6 Portrait*/
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait) {
}
/*iPhone 6 landscape*/
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : landscape) {
}
/*iPhone 6+ Portrait*/
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : portrait) {
}
/*iPhone 6+ landscape*/
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : landscape) {
}
/*iPhone 6 and iPhone 6+ portrait and landscape*/
@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px){
}
/*iPhone 6 and iPhone 6+ portrait*/
@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : portrait){
}
/*iPhone 6 and iPhone 6+ landscape*/
@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : landscape){
}
Para iPhone 5
@media screen and (device-aspect-ratio: 40/71)
para iPhone 6,7,8
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait)
para iPhone 6 +, 7 +, 8 +
@media screen and (-webkit-device-pixel-ratio: 3) and (min-device-width: 414px)
Trabajando bien para mí a partir de ahora.
Solo para que sepas que el iPhone 6 miente sobre su ancho mínimo. Se cree que es 320 en lugar de 375 se supone que es.
@media only screen and (max-device-width: 667px)
and (-webkit-device-pixel-ratio: 2) {
}
Esto fue lo único que pude poner a trabajar para apuntar al iPhone 6. El 6+ funciona bien usando este método:
@media screen and (min-device-width : 414px)
and (max-device-height : 736px) and (max-resolution: 401dpi)
{
}