4

Estou tentando usar media queries em um site pensando em dispositivos móveis, mas estou enfrentando um problema: embora as regras especifiquem o que fazer quando a largura for pequena - e as mesmas se apliquem corretamente quando se vê num browser com o tamanho da janela reduzido - nos dispositivos móveis ele é apresentado com uma largura um tanto maior, ficando minúsculo na tela. Como não tenho experiência desenvolvendo pra essa mídia, não sei o que estou fazendo de errado.

Meu CSS (simplificado) é:

.parede {
    width: 332px;
    margin: 0 auto;
}

.meio2, .meio4, .meio5 {
    display: none; 
}

@media all and (min-width: 540px) {
    .parede { width: 530px; }
    .meio1 { display: none; }
    .meio2 { display: inline-block; }
}

@media all and (min-width: 700px) {
    .parede { width: 690px; }
    .meio3 { display: none; }
    .meio4 { display: inline-block; }
}

@media all and (min-width: 860px) {
    .parede { width: 850px; }
    .meio5 { display: inline-block; }
}

Essencialmente ele muda o tamanho de uma div e exibe/oculta alguns elementos conforme o tamanho da tela. Mas o problema não está nas regras em si, e sim no fato delas não estarem sendo seguidas: quando visto num dispositivo móvel (ex.: Galaxy S4), ou mesmo na simulação de um dispositivo móvel (ferramentas de desenvolvedor do Chrome), todas as regras são ativadas, embora que eu saiba a largura da tela deveria ser 360px.

O link pro site é esse. Note que, visto num browser comum, redimensionar a janela faz com que a parede fique mais estreita e mais alta (comportamento esperado e alcançado).

Minha suspeita é que alguma coisa no cabeçalho esteja "forçando" a largura a ser maior do que ela precisa ser. O cabeçalho é uma lista comum utilizando flexbox - que até onde eu saiba é bem suportado nos principais dispositivos móveis. No browser os itens mudam de linha normalmente quando a janela é estreita (flex-flow: row wrap) - melhor no Firefox que no Chrome - mas no smartphone fica tudo na mesma linha.

    <div class="ajustar todo menu">
        <ul class="flex-container">
            <li class="flex-item">
                <h5>CONTATO: 
                    <a class="fonte_destaque link_limpo"  href="...">...</a> |  
                    <a class="fonte_destaque link_limpo" href="...">...</a>
                </h5>
            </li>
            <li class="flex-item">
                <h5>sobre</h5>
            </li>
            <li class="flex-item">
                <h5>currículo</h5>   
            </li>
            <li class="flex-item">
                <h5>portfolio em pdf</h5>
            </li
        </ul>
    </div>

Parte do CSS aplicável ao cabeçalho:

.ajustar {
    overflow: auto;
}

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;

  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -webkit-flex-flow: row wrap;
  -moz-flex-flow: row wrap;
  flex-flow: row wrap;

  justify-content: space-around;
}

.flex-item {
  padding: 5px;
  margin-top: 10px;
  text-align: center;

  flex-shrink: 0;
}

.todo {
    width: 100%;
}

Se faltou algo no CSS acima, favor ver no site completo (não fui eu quem fez esse cabeçalho, ao revisar só achei as regras acima [potencialmente] relevantes, as outras só mudam cor ou coisas assim). Não notei nada de anormal nas ferramentas de desenvolvedor, as regras estão sendo aplicadas e tudo mais - só que a largura está em 964 pixels e eu não entendo por que.

P.S. Pensei também ser algo relacionado a device pixel ratio, mas pelo que entendi desse post o viewport deveria continuar tendo 360px de conteúdo, estou errado?

3 Respostas 3

1

Por favor, verifique que seu html contenha a seguinte tag dentro do seu<head>:

<meta name="viewport" content="width=device-width, initial-scale=1">

Essa tag é importante porque sem ela seu dispositivo móvel vai ignorar o media queries e redimensionar o conteúdo do seu site.

2
  • 1
    Funcionou, obrigado! Estava totalmente perdido em relação a isso...
    – mgibsonbr
    19/12/2015 às 4:01
  • Ainda bem que era simples. O seu media queries tava certo demais pra ser problema no CSS.
    – P. Calixto
    21/12/2015 às 15:29
0

Você pode usar o @viewport dentro de uma media query para determinar o tamanho que a visão terá em determinada resolução. Exemplo:

@media all and (min-width: 540px) {
    @viewport {
          width: 480px;
    }
}

Dessa, forma, quando o tamanho da tela for pelo menos com 540px, a tela vai se comportar como se o tamanho total fosse de 480px.

Link: http://tableless.com.br/manipulando-metatag-viewport/

1
  • O problema é que a media query de 860px está sendo ativada mesmo num device de 360px... De todo modo, vou experimentar sua sugestão, se tiver sucesso volto a postar aqui.
    – mgibsonbr
    17/12/2015 às 15:19
0

Tente trocar o min-width por max-width no seu css. Caso não funcione, faça um teste, force colocando um !important depois da regra. Exemplo:

@media screen and (max-width: 540px) {
    .parede { width: 530px !important; }
    
}

1
  • Acho que vocês não estão entendendo, o problema não é com as regras, elas estão ok, o problema é que no mobile o viewport está sendo "forçado" a ficar maior não sei por que (o que faz com que as regras que só deveriam ser ativadas em telas largas ativem, ainda que o dispositivo só tenha 360 pixels de área útil). Tal como na sugestão do Gabriel (que não funcionou, como eu já esperava), vou testar a sua também por via das dúvidas, assim que puder, e se tiver sucesso eu dou um feedback.
    – mgibsonbr
    18/12/2015 às 3:22

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .