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?

— lawphotog
fonte

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