Site is not responsive [closed]

-2

I did a test with Bootstrap, in the desktop browser it works beauty, but in the mobile device it gets small.

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="bootstrap.css">
        <script src="bootstrap.js"></script>
        <script src="logica.js"></script>
        <title>Descubra o Final Feliz </title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
 <body>

<!--  Tela  inicial principal -->
<div id="principal" align="center">
    <img src="imagens/imagem.png" width="120" heigth="120" class="img-responsive" alt="Que lindo *-*" style="margin-top:10px">
    <h4> Vai ser legal ><</h4>
    <br>
         <button type="button" class="btn btn-primary" onclick="tela1();" style="width:90%;">Sim</button>
         <br>
         <button type="button" class="btn btn-danger" onclick="sair();"style="width:90%;margin-top:2px;">Não</button>
</div>

Why was the mobile browser small?

    
asked by anonymous 23.12.2015 / 00:29

1 answer

5

You need to set the metatag with the viewport in the document header:

/ p>
<head>
  <!-- ... -->
  <meta name='viewport' content='width=device-width, initial-scale=1'/>
</head>

You can see a simple template on the Boostrap page.

<html>

<head>
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <meta name='viewport' content='width=device-width,initial-scale=1' />
  <title>Descubra o Final Feliz</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>

<body>

  <!--  Tela  inicial principal -->
  <div id="principal" align="center">
    <img src="http://i.stack.imgur.com/uNs96.jpg"width="120" heigth="120" class="img-responsive" alt="Que lindo *-*" style="margin-top:10px">
    <h4> Vai ser legal ><</h4>
    <br>
    <button type="button" class="btn btn-primary" onclick="tela1();" style="width:90%;">Sim</button>
    <br>
    <button type="button" class="btn btn-danger" onclick="sair();" style="width:90%;margin-top:2px;">Não</button>
  </div>
</body>

</html>
    
23.12.2015 / 01:05