O design responsivo da web funciona no desktop, mas não no dispositivo móvel

117

Tenho um site que deve ser responsivo para celulares. Eu criei usando meu desktop. Quando ajusto as janelas do navegador, ele está funcionando perfeitamente para o celular, mas quando eu verifico no meu celular real: o Samsung Galaxy S2 não responde à visualização do celular.

O que pode estar errado?

mobile web responsive-design

— Tadas Davidsonas
fonte

1

Você terá que adicionar mais informações e código para que alguém seja útil. Seu CSS, HTML, etc. Qual estrutura (como Twitter Bootstrap) você está usando, se houver, etc.

— ajacian81

306

Provavelmente está faltando a meta tag da janela de visualização no cabeçalho do html:

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

Sem ele, o dispositivo assume e define a janela de visualização para o tamanho máximo.

Mais informações aqui .

— Agush
fonte

2

Ele pode funcionar no navegador sem esta linha, mas no celular, ele só precisa desta linha.

— Tadas Davidsonas

3

Eu simplesmente te amo

— Dimitris Filippou

Também te amo @ ΔημήτρηςΦιλίππου

— Agush,

Outras palavras de amor para você

— btlm

3

certifique-se de que a produção index.htmlrealmente inclua a tag, bem como o desenvolvimentoindex.html

— halafi

6

Eu também enfrentei esse problema. Finalmente encontrei uma solução. Use este código abaixo. Espero: o problema será resolvido.

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

— Saiful Islam
fonte

2

Embora seja respondido acima e seja correto usar

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

mas se você estiver usando React e webpack, não se esqueça de fechar a tag do elemento

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

— Shadab Ahmed
fonte

-1

Metatag responsiva

Para garantir a prestação adequada e zoom de toque para todos os dispositivos, adicione a tag viewport meta sensível ao seu <head>.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

— Marcelo Austria
fonte