Consultas de medios de trabajo en el navegador pero no en el móvil

votos
0

Tengo una consulta de medios para Iphone X de la siguiente manera:

@media screen and (min-width: 374px) and (max-width: 376px) and (min-height: 811px) and (max-height: 812px) {
  .welcome-banner {
    background-image: url('~assets/images/landing/welcome-banner-iphonex.jpg');
    background-size: cover;
    background-position: center;
    height: calc(110vh - 64px);
    display: flex;
  }
}

Funciona perfectamente en Chrome, pero no lo hace en el propio móvil. Tengo la etiqueta de la ventana gráfica en la meta:

<meta name=viewport content=width=device-width,initial-scale=1.0>
Publicado el 13/01/2020 a las 23:53
fuente por usuario
En otros idiomas...                            


1 respuestas

votos
0

la consulta parece correcta, pero asegurarse de que realmente es lo que este dispositivo está testintg necesidades. se puede obtener el @media correcta entre navegadores (ancho) y @media (altura) los valores ingresando el siguiente a la consola con javascript:

var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
console.log(w,h);

También vuelva a comprobar la initial-scalemeta y el zoom, que podrían estar ensuciando sus dispositivos de visualización.

Además, esa consulta es muy muy específico. Si sólo - y me refiero solamente - desea orientar este dispositivo entonces que está bien, pero podría ser mejor que gi para búsquedas más globales, que suelen dedicarse a 320 y 767 (más pequeño que Ipads de edad) y tal vez entre medio de 480 si es necesario.

Respondida el 14/01/2020 a las 00:00
fuente por usuario

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more