Site responsivo diminuiu o zoom para toda a largura no celular

139

Estou testando a navbar de resposta do Bootstrap e tenho um site de demonstração . Quando redimensiono o navegador em uma área de trabalho, tudo funciona bem, incluindo a barra de navegação que se torna o menu dobrável com um pequeno ícone na parte superior, no qual posso clicar para ver mais botões do menu.

Mas quando tentei em um navegador móvel (tentei no Chrome e na Internet em um Android), não vi o design responsivo. Eu só podia ver uma versão muito pequena da área de trabalho, como um site.

Alguém poderia apontar o que estou fazendo de errado?

twitter-bootstrap user-interface twitter-bootstrap-3 responsive-design bootstrap-4 lawphotog
fonte

Respostas:

378

Adicione isso ao seu cabeçalho HTML.

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

Isso informa aos navegadores de dispositivos menores como dimensionar a página. Você pode ler mais sobre isso aqui: https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

Zim
fonte
1
eu adicionei este código na seção de cabeça, mas não o seu trabalho para o meu Internet Explorer padrão do Android você pode verificar - www.freerechargeapp.com/index.html
santosh
Eu realmente não entendo porque para mim não está funcionando. Em um site funciona e em outro site não. E a estrutura do código é o semelhante com inicialização fresco
bheatcoker
1
@ Skelly - Outras respostas que eu vi deixadas de fora maximum-scalee usadas em 1.0vez de 1. Você sabe se essas coisas fazem diferença?
onebree
1
Você me salvou :) Obrigado.
Fatih
1
Obrigado, dois anos depois, seu post ainda é o shiznizzle (sic.) 😎 #
Walt
17

conforme sugerido aqui http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/

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

seria uma escolha ainda melhor, pois faz com que passar do retrato para a paisagem e retroceder seja uma experiência do usuário muito mais agradável, pois o / height adotaria naturalmente por causa do possível dimensionamento automático.

Tom
fonte
Obrigado, isso corrigiu o problema de dimensionamento no iPhone e exibe retrato e paisagem de maneira diferente (e corretamente).
SexxLuthor
0

Adicionando isso a pessoas que pesquisam esse erro para quem a resposta aceita não está funcionando. Acredito que este será um caso mais raro, mas frustrante:

Se sua página estiver renderizando dentro de um conjunto de quadros (por exemplo, camuflagem de domínio), colocar as metatags não ajudará. Você precisaria colocá-los na página do domínio de camuflagem, ao qual você pode ou não ter acesso, dependendo do host DNS.

Dia Davis Waterbury
fonte
0

Tente limpar o cache do navegador e abra a página em uma nova guia. Às vezes, isso resolve o problema para mim sempre que acontece.

John Q.
fonte