A página Simple Bootstrap não responde no iPhone

StackOverflow https://stackoverflow.com/questions/9386429

Pergunta

Baixei o exemplo do Twitter Bootstrap e criei um projeto simples de rails com ele.Copiei o css onde necessário e ele exibe bem.Também copiei o js e tudo funciona muito bem no meu desktop: ele reorganiza a página quando eu mudo o tamanho do meu navegador.Ao usar algumas "ferramentas de teste de design responsivo" com tamanhos diferentes, funciona muito bem.

O problema que tenho está no meu iPhone: ele exibe juste como na minha área de trabalho.

Quando tento a página Bootstrap Hero Example (que é aquela em que comecei), ela funciona muito bem no meu iPhone.

O que pode dar errado?Praticamente não toquei em nenhum CSS, apenas adicionei um preenchimento no rodapé.

Para sua informação, o CSS que mudei é que estou vinculando meu aplicativo a application.css com o seguinte conteúdo: 

/* Application stylesheet */

@import url(bootstrap.css);
@import url(bootstrap-responsive.css);

/* Body */
body {
    padding-top: 60px;
    padding-bottom: 40px;   
}   

/* Footer */
footer {
    padding: 20px 0;
}
Foi útil?

Solução

Certifique-se de adicionar: 

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

ao seu <head>.

Tive um problema semelhante e, por engano, pensei que era apenas uma questão de largura da janela de visualização.

Atualização : verifique a resposta de @NicolasBADIA para uma versão mais completa.

Outras dicas

O código proposto por frntk não funciona quando você liga o aparelho no modo paisagem, e a solução dada pelo virtualeyes está incorreta porque usa ponto-e-vírgula em vez de vírgulas.Aqui está o código correto: 

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

Fonte: https://developer.mozilla.org/en/Mobile/Viewport_meta_tag

Concedido, um caso extremo muito pequeno, mas vale a pena mencionar.

Se você estiver usando o encaminhamento de domínio por meio de seu provedor de DNS, seu site pode acabar empacotado em um iframe.GoDaddy, por exemplo, use essa técnica se estiver mascarando seu domínio e encaminhando.

Fiquei preso a esse problema por várias horas.

Não se esqueça de também colocar o conteúdo dentro de um <div class="container-fluid">...</div>

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top