-3

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...

2
  • Posta o formulário completo que você criou, tem pouca informação pra que alguém consiga te ajudar. Commented 29/12/2017 às 23:38
  • 1
    Bem vinda, Marina. Comece fazendo o Tour para saber como funciona a comunidade. Para podermos te ajudar, edite sua pergunta e nos forneça um MCVE pois apenas com o código que você colocou, não da pra identificar aonde está o problema.
    – NoobSaibot
    Commented 29/12/2017 às 23:41

1 Resposta 1

1

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://webdesign.tutsplus.com/pt/articles/quick-tip-dont-forget-the-viewport-meta-tag--webdesign-5972

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>

inserir a descrição da imagem aqui

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

https://getbootstrap.com/docs/4.0/layout/grid/

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .