Um amigo meu entrou em contato comigo recentemente para pedir ajuda com um site WordPress que ele construiu usando o tema X. Seu cliente ligou para ele naquela manhã depois que ele percebeu que seu site não estava sendo exibido corretamente em seu iPhone. Nick verificou por si mesmo 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 estava responsivo, mas em seu iPhone, apenas a versão para desktop foi exibida. Por que um site seria responsivo em um computador desktop e não responde em um dispositivo móvel?
Por que o design responsivo não funciona
O design responsivo para de funcionar quando uma linha de código está faltando no cabeçalho de um arquivo HTML. Se essa única linha de código estiver faltando, seu iPhone, Android e outros dispositivos móveis presumirão que o site que você está visualizando é um site para computador em tamanho real e ajustará o tamanho do janela de exibição para 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 se refere 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 uma largura de 320 pixels. A menos que seja dito explicitamente o contrário, os iPhones presumem que cada site que você visita é um site para desktop com largura de 980 px.
Agora, usando seu iPhone 5 imaginário,você visita um site projetado para desktop com 800 px de largura. Ele não tem um layout responsivo, então seu iPhone exibe a versão para desktop de largura total.
por que meu iphone não está conectando ao wi-fi
Mas um iPhone 5 tem apenas 320 pixels de largura. Não é sempre esse o tamanho da janela de visualização?
Não, não é. Com o tamanho da janela de visualização, escalonamento 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 a janela de visualização se refere à área de uma página que está atualmente visível para o usuário. O usuário do iPhone está vendo atualmente 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 o comportamento padrão: é reduzido para que o usuário possa visualizar uma página da web com uma largura de até 980 pixels. Portanto, a janela de visualização do iPhone é de 980 px.
Conforme você aumenta ou diminui o zoom, o tamanho da janela de visualização muda. Dissemos antes que nosso site imaginário tem uma largura de 800px, então, se você aumentasse o zoom em seu iPhone de forma que as bordas do site tocassem as bordas da tela do seu iPhone, a janela de visualização seria de 800px. O Iphone posso tem uma janela de visualização de 320 px em um site para computador, mas se tivesse, você veria apenas uma pequena parte dela.
como desligar o iphone 5 sem botão liga / desliga
Meu site responsivo está quebrado. Como faço para corrigir isso?
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 aplicar zoom) a página.
Para uma discussão mais técnica de todas as opções relacionadas a esta metatag, confira este artigo em tutsplus.com .
Como corrigir o tema do WordPress X quando ele não responde
De volta 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 arquivos de cabeçalho diferentes para cada pilha, então você terá que editar o seu.
o telefone continua se conectando e desconectando do wi-fi
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 de sua pilha (Integridade, Renovar, etc.) por ‘ethos’ para encontrar o arquivo de cabeçalho correto. Insira essa única linha e voila! Você está pronto para ir.
Então, isso também corrige minhas consultas de mídia CSS?
Quando você insere essa linha no cabeçalho do seu arquivo HTML, suas consultas @media responsivas de repente começarão a funcionar novamente e a versão móvel do seu site voltará à vida. Obrigado pela leitura e espero que ajude!
Lembre-se de Payette Forward,
David P.