Mídia consultas funcionam no navegador, mas não no celular

votos
0

Eu tenho uma consulta de mídia para Iphone X da seguinte forma:

@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;
  }
}

Ele funciona perfeitamente no Chrome, mas não no celular em si. Eu tenho a tag viewport na meta:

<meta name=viewport content=width=device-width,initial-scale=1.0>
Publicado 13/01/2020 em 23:53
fonte usuário
Em outras línguas...                            


1 respostas

votos
0

sua consulta parece direito, mas se certificar de que é realmente o que este dispositivo você está necessidades testintg. você pode obter o @media correta cross-browser (largura) e @media (altura) valores, entrando o seguinte para o console com 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);

Também verifique novamente a initial-scalemeta e zoom, eles poderiam estar atrapalhando seus dispositivos viewport.

Além disso, essa consulta é muito, muito específico. Se você só - e quero dizer única - quer atingir este dispositivo, em seguida, que é ok, mas poderia ser melhor para gi para consultas mais globais, que geralmente têm como alvo 320 e 767 (menores que Ipads de idade) e talvez 480 inbetween se necessário.

Respondeu 14/01/2020 em 00:00
fonte usuário

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