Um amigo meu recentemente entrou em contato comigo para pedir ajuda com um site WordPress que ele construiu usando o tema X. Seu cliente ligou para ele naquela manhã depois que percebeu que seu site não estava sendo exibido corretamente em seu iPhone. Nick verificou pessoalmente e, com certeza, o belo design responsivo que ele projetou não estava mais funcionando.
Ele ficou ainda mais perplexo com o fato de que, quando redimensionou a janela do navegador na área de trabalho, o site era responsivo, mas no iPhone, apenas a versão da área de trabalho era exibida. Por que um site seria responsivo em um computador desktop e não responsivo em um dispositivo móvel?
Por que o design responsivo não funciona
O design responsivo para de funcionar quando f alta uma linha de código no cabeçalho de um arquivo HTML. Se esta única linha de código estiver ausente, seu iPhone, Android e outros dispositivos móveis assumirão que o site que você está visualizando é um site de desktop em tamanho real e ajustará o tamanho do viewportpara abranger a tela inteira.
O que você quer dizer com viewport e tamanho da viewport?
Em todos os dispositivos, o tamanho da janela de visualização refere-se ao tamanho da área de uma página da Web que está atualmente visível para o usuário. Imagine que você está segurando um iPhone 5 com largura de 320 pixels. A menos que explicitamente dito o contrário, os iPhones assumem que todo site que você visita é um site para computador com largura de 980px.
Agora, usando seu iPhone 5 imaginário, você visita um site projetado para desktop com 800px de largura. Ele não tem um layout responsivo, então seu iPhone exibe a versão de desktop de largura total.
Não, não é. Com o tamanho da viewport, o dimensionamento pode estar envolvido. O iPhone precisa diminuir o zoom para ver a versão de largura total da página da web. Lembre-se de que viewport refere-se à área de uma página que está atualmente visível para o usuário. O usuário do iPhone está vendo apenas 320 pixels da página ou está vendo a versão de largura total?
Isso mesmo: eles estão vendo a página da web de largura total em sua tela porque o iPhone assumiu seu comportamento padrão: o zoom é reduzido para que o usuário possa visualizar uma página da web com largura de até 980 pixels. Portanto, a viewport do iPhone é 980px.
Conforme você aumenta ou diminui o zoom, o tamanho da viewport muda. Dissemos antes que nosso site imaginário tem uma largura de 800px, portanto, se você aumentar o zoom do seu iPhone para que as bordas do site toquem as bordas da tela do seu iPhone, a janela de visualização será de 800px. O iPhone pode ter uma viewport de 320px em um site para desktop, mas se tivesse, você veria apenas uma pequena parte dela.
Meu site responsivo está quebrado. Como posso corrigi-lo?
A resposta é uma única linha de HTML que, quando inserida no cabeçalho de uma página da Web, diz ao dispositivo para definir a janela de visualização para sua própria largura (320px no caso de um iPhone 5) e não para dimensionar (ou zoom) a página.
Para uma discussão mais técnica de todas as opções relacionadas a esta meta tag, confira este artigo em tutsplus.com.
Como corrigir o tema do WordPress X quando ele não é responsivo
Voltando ao meu amigo de antes: Esta linha de código desapareceu quando ele atualizou o tema X. Ao corrigir o seu, lembre-se de que o tema X não usa apenas um arquivo de cabeçalho – ele usa diferentes arquivos de cabeçalho para cada pilha, então você terá que editar o seu.
Como Nick usa a pilha Ethos do tema X, ele teve que adicionar a linha de código que mencionei antes ao arquivo de cabeçalho localizado em x /frameworks/views/ethos/wp-header.php . Se você usar uma pilha diferente, substitua o nome da sua pilha (Integridade, Renovar, etc.) por ‘ethos’ para encontrar o arquivo de cabeçalho correto. Insira essa linha e pronto! Você está pronto para ir.
Isso corrige minhas consultas de mídia CSS também?
Quando você insere essa linha no cabeçalho de seu arquivo HTML, suas consultas @media responsivas começarão a funcionar novamente e a versão móvel de seu site voltará à vida. Obrigado por ler e espero que ajude!
Lembre-se de Payette Forward, David P.
