Site does not get responsive

Asked

Viewed 836 times

-2

I did a test with Bootstrap, the desktop browser works beauty, but the mobile device is 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 in mobile browser became small?

html twitter-bootstrap
  • 1

    Became small what? In which browser?

  • I tried it on firefox, or google... it loads the image and buttons very far, I have to zoom in to visualize.

  • Set width 100% for small monitors.

1 answer

5


You accurate define the metatag with the viewport in the document header:

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

You can see a template simple 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>

  • Worked thanks.

Browser other questions tagged html twitter-bootstrap

You are not signed in. Login or sign up in order to post.