Por que nosso site responsivo, em uma janela de 320px de largura, é dimensionado de maneira diferente em um telefone e em um navegador de desktop
o problema acabou sendo esta atualização no arquivo responsive-utilities.less do Bootstrap v2.3.2.
@-ms-viewport{
/* comment this out!!! */
width: device-width;
}
Quando comentamos isso, o navegador de 320px para celular é renderizado da mesma forma que um navegador de 320px para desktop.
Não foi necessário fazer nenhuma outra alteração. Ou seja, não havia problema em ter imagens de 1.500 pixels em nosso site e não precisávamos alterar nossa metatag de janela de visualização existente, que é a seguinte:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Uma pergunta de acompanhamento: para que serve essa linha @ -ms-viewport?
Respostas:
1 para resposta № 1Adicione uma largura de 100% na imagem ofensiva em seu CSS, que deve esclarecer quaisquer problemas.
EDITAR:
A tag ms-viewport em seu css é na verdade a maneira padrão de acordo com a especificação W3 para implementar uma tag viewport. Trent Walton tem um ótimo postar e links para um mais alguns que explicam a regra.
Não sei por que essa regra está causando um problema, usei-a em combinação com vários sites e nunca tive um problema.
0 para resposta № 2
Tente isso.
<meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" />
0 para resposta № 3
Você pode definir propriedades completas conforme abaixo :)
<meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=1" name="viewport" />
0 para a resposta № 4
Eu também tenho esse problema, você deve verificar se pode ajustá-lo no css ou parar o script responsivo para alguns componentes.
Não escolha o "script responsivo de parada de bootstrap" pronto no google, ele não funcionará bem, pois bagunçará a capacidade de resposta da barra de navegação.