Entrar Ainda não tem acesso?
2
respostas

Dúvida com media querie e resolução do smartphone

Referente ao curso Web Design Responsivo: Páginas que se adaptam do mobile ao desk

por Vinícius Xavier
| 83.7k xp | 18 posts

Boa noite. Eu estou utilizando as media queries em um projeto, mas estou tendo alguns problemas.

O meu aparelho de celular que estou utilizando para testar é um Lenovo Vibe B que tem a resolução de 854 x 480 (com 218 ppi). Por causa disso, a minha menor media querie é de 480 px qe estou declarando da seguinte forma:

@media (min-width: 480px){

   //Código e classes css

}

A minha tag viewport está assim:

<meta name="viewport" content="width=device-width">

Porém quando abro no smartphone, os estilos CSS que determinei são ignorados. Já tentei diminuir a media querie, porém os estilos só começam a ser utilizados a partir de 320px (o que não faz sentido já que o aparelho diz ter 480px). Quando viro na horizontal, ele pega os estilos CSS de uma media querie maior que criei normalmente. O que estou fazendo de errado?

2 respostas
por Vitor Leon de Sá Gultzgoff
| 42.5k xp | 8 posts
Front-end Architect

Para que os estilos CSS definidos entrem em vigor para sua aplicação no seu aparelho, você deve definir o valor mínimo e máximo formando o intervalo almejado. No exemplo abaixo foi definido que no intervalo de largura do dispositivo de 200 à 480 pixels a box ficará vermelha.

2) Quando você vira o celular na horizontal ele identifica uma media query pré definida porque os valores de width e height trocam de lugar neste caso.

Obs: Provavelmente você já deu uma lida no conteúdo abaixo, mas caso não tenha:

1 - https://developer.android.com/guide/practices/screens_support.html< 2 - https://www.w3schools.com/css/css3_mediaqueries_ex.asp

por Vinícius Xavier
| 83.7k xp | 18 posts

Vitor eu fiz isso. Quando me referi ao ajuste horizontal, quis dizer que estava correto. Realmente deveria ser ajustado para a media querie maior (já que o width aumenta).

Eu queria saber se tem alguma forma de saber a resolução horizontal do meu navegador do smartphone. Por mais que ele diz que possui 480px, ele só aplica os estilos css (quando está no modo retrato) quando defino o min-width: 320px.