Resolvi inserir bootstrap, então inseri o conteúdo da minha página dentro da classe container, chamei o bootstrap no meu head e
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Mas ainda não funcionou...
Resolvi inserir bootstrap, então inseri o conteúdo da minha página dentro da classe container, chamei o bootstrap no meu head e
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Mas ainda não funcionou...
Marina estou incluindo essa resposta apenas para esclarecer para você como o ViewPort funciona e por que provavelmente o seu site não está responsivo mesmo com o ViewPort e o Bootstrap.
Primeiro veja como funciona o <meta name="viewport">
O viewport é a área onde seu website aparece. É a área branca da janela quando você abre o browser. O viewport sempre vai ter o tamanho da janela. Mas a forma como os elementos são renderizados vai depender bastante do dispositivo.
A Meta Tag Viewport
Use a meta tag viewport, introduzida pela Apple, e então adotada e desenvolvida por mais pessoas.
Ela se parece com isso:
<meta name="viewport" content="">
Dentro do content="" você pode entrar com uma série de valores separados por vírgula, mas vamos focar nos fundamentos agora.
Por exemplo, se o seu layout móvel é definido em 320px, você pode especificar o viewport dessa forma:
<meta name="viewport" content="width=320">
Para layouts flexíveis é mais prático basear a largura do seu viewport no dispositivo em questão, para igualar a largura do layout à largura do dispositivo você deve digitar:
<meta name="viewport" content="width=device-width">
Para se certificar que o seu layout será mostrado como você planejou, você pode definir o nível de zoom inicial. Isso, por exemplo:
<meta name="viewport" content="initial-scale=1">
... irá garantir que, após a abertura, o layout será exibido corretamente em escala 1:1. Nenhum zoom será aplicado. Você pode ir mais longe e evitar qualquer zoom pelo usuário:
<meta name="viewport" content="maximum-scale=1">
Nota: Antes de aplicar o parâmetro de maximum-scale, considere se você realmente deve estar impedindo que os usuários deem o zoom. Eles são capazes de ler tudo da melhor forma possível?
Outra opção é configurar o ViewPort direto pelo CSS, inclusive essa é a recomendação da Microsoft para o Internet Explorer (ie10 e superior)
@viewport{
zoom: 1.0;
width: device-width;
}
Aqui tem dois excelentes artigos em português que serviram de referencia e vão te ajudar muito!
https://tableless.com.br/manipulando-metatag-viewport/
Agora por que seu site mesmo com o Bootstrap não está responsivo.
Pelo que vc falou muito provavelmente vc não está usando o sistema de Grid do Bootstrap. Apenas indexar o Bootstrap na <head>
do site não adianta. Você tem que usar as Classes do Grid System para o conteúdo ficar responsivo.
Aqui tem um exemplo de como fica o HTML usando as Classes do Grid do Bootstrap, e abaixo uma imagem que corresponde a esse código
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
...conteúdo da coluna 1...
</div>
<div class="col-md-3">
...conteúdo da coluna 2...
</div>
<div class="col-md-3">
...conteúdo da coluna 3...
</div>
<div class="col-md-3">
...conteúdo da coluna 4...
</div>
</div>
</div>
Repare que as Classes Originais do Grid do Bootstrap é que são as responsáveis por deixar o conteúdo que está dentro das <div>
responsivo e adaptável nas telas
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
Artigo em português pare você entender melhor o Sistema de Grid e as Classes que precisa usar
https://edsonjunior.com/compreendendo-grid-do-bootstrap/
Aqui está a documentação oficial do sistema de Grid do Bootstrap 3
https://getbootstrap.com/docs/3.3/css/#grid
Documentação do Grid do Bootstrap 4