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?