数字键盘android弹力网站模板(Numeric keyboard android stretch website template)

我是初学者，我在使用android数字键盘时遇到困难。我正在使用Android Studio开发webview，每次打开数字小键盘时，网站模板都会以错误的方式拉伸。我该怎么做才能解决它？

HTML：

<html> <head> <title>Descrição do Produto</title> <link rel="stylesheet" href="../css/descricaoProduto.css"> <script type="text/javascript" src="../js/jquery.js"></script> <script type="text/javascript" src="../js/jquery.numeric.min.js"></script> <script type="text/javascript" src="../js/jquery.numeric.js"></script> <meta charset="utf-8"> </head> <body> <div class="corpo"> <div class="menu"> </div> <div class="conteudoNomeDoProduto"> <span class="nomeDoProduto"> CALÇA JEANS LEGGING DE DOS OS TAMANHOS E MODELOS PARA V</span> <div align="center" class="botaoDescricao" onclick="alert('voce clicou em descricao')"> <span class="btnDescricao"> VER MAIS</span> </div> </div> <div id="fotoDoProduto" class="limiteFotoProduto"> <img class="fotoDoProduto" src="../img/sapato1.png"> </div> <div id="fotosAdicionais"> <div class="conteudoFoto1"> <img class="fotoDoProduto" src="../img/sapato2.png"> </div> <div class="conteudoFoto2"> <img class="fotoDoProduto" src="../img/sapato3.png"> </div> </div> <div class="conteudoPreco"> <div class="boxPreco"> <span class="cifrao"> R$</span> <span class="valorProduto">8888.00</span> </div> </div> <div class="conteudoComprar"> <div class="conteudoQuantidadeProduto"> <div class="boxQuantidade"> <input class="numeric txtQuantidade" type="tel" size="3" maxlength="3" value="1" /> <span class="txtProduto"> QUANTIDADE</span> </div> </div> <div class="adicionarAoCarrinho"> <img src="../img/btn/add1.png" onclick="alert('voce clicou em add')" class="btnAcao"/> </div> <div class="comprar"> <img src="../img/btn/compre.png" onclick="alert('voce clicou em compre')" class="btnAcao"/> </div> </div> </div> </body> <script type="text/javascript"> $(".numeric").numeric(); $(".integer").numeric(false, function() { alert("Integers only"); this.value = ""; this.focus(); }); $(".positive").numeric({ negative: false }, function() { alert("No negative values"); this.value = ""; this.focus(); }); $(".positive-integer").numeric({ decimal: false, negative: false }, function() { alert("Positive integers only"); this.value = ""; this.focus(); }); $(".decimal-2-places").numeric({ decimalPlaces: 2 }); $("#remove").click( function(e) { e.preventDefault(); $(".numeric,.integer,.positive,.positive-integer,.decimal-2-places").removeNumeric(); } ); </script> </html>

CSS：

body{ margin:0; padding: 0; } @font-face{ font-family: gotham_light; src: url(../fonts/gotham_light.ttf); } @font-face{ font-family: gotham_ultra; src: url(../fonts/gotham_ultra.ttf); } .menu{ position: absolute; top: 0; right: 0; width: 100%; height: 10%; background-color: #232f3e; } .corpo{ background-color: #fafafa; } .conteudoNomeDoProduto{ position: absolute; width: 96%; height: 13.5%; /*background-color: #1bb776;*/ right: 2%; top: 12%; } .nomeDoProduto{ font-size: 130%; font-family: gotham_light; color: #242638; } .botaoDescricao{ position: absolute; width: 30%; height: 30%; background-color: #232f3e; right: 0.5%; bottom: 2%; } .btnDescricao{ position: relative; top: 30%; font-size: 90%; font-family: gotham_light; color: #ffffff; } .limiteFotoProduto{ position: absolute; width: 70%; height: 35.5%; background-color: #ffffff; left: 2%; top: 26%; padding: 0; margin: 0; overflow: hidden; box-shadow: 3px 3px 3px #d8d8d8; } .fotoDoProduto{ position: relative; max-width: 100%; max-height: 100%; width: auto; height: auto; } .conteudoFoto1{ position: absolute; width: 25%; height: 17.5%; background-color: #ffffff; right: 2%; top: 26%; overflow: hidden; box-shadow: 2px 2px 2px #d8d8d8; } .conteudoFoto2{ position: absolute; width: 25%; height: 17.5%; background-color: #ffffff; right: 2%; top: 44%; overflow: hidden; box-shadow: 2px 2px 2px #d8d8d8; } .conteudoComprar{ position: absolute; width: 96%; height: 26%; background-color: #ffffff; right: 2%; bottom: 2%; } .boxPreco{ position: absolute; width: 60%; height: 100%; left: 0; } .cifrao{ position: relative; font-family: gotham_light; font-size: 100%; color: #fd9729; top: 50%; left: 3%; } .valorProduto{ position: absolute; font-family: gotham_ultra; font-size: 200%; color: #fd9729; bottom: 5%; left: 16%; } .conteudoQuantidadeProduto{ position: absolute; width: 99.5%; height: 32%; top: 0; border: 1px solid #a8a8a8; background-color: #f4f4f4; } .adicionarAoCarrinho{ position: relative; width: 100%; height: 33%; background-color: blue; top: 34.1%; } .comprar{ position: absolute; width: 100%; height: 33%; /*background-color: green;*/ bottom: 0; } .boxQuantidade{ position: absolute; width: 65%; height: 71%; /*background-color: green;*/ top: 18%; } .txtProduto{ font-family: gotham_light; font-size: 110%; color: #4a4a4a; } .txtQuantidade{ height: 100%; color: #4a4a4a; } input{ text-align: center; border:0; } .conteudoPreco{ position: absolute; width: 96%; height: 9%; background-color: #ffffff; right: 2%; bottom: 29%; overflow: hidden; } .btnAddCarrinho{ background-color: #4CAF50; /* Green */ border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; } .btnAddCarrinho:hover{background-color: #000000; /* Green */} button:focus{outline:none;} .btnAcao{ width: 100%; height: 100%; position: absolute; }

I'm a beginner and I'm having difficulty with the android numeric keypad. I'm developing a webview with Android Studio and every time the numeric keypad is opened, the website template is stretched in the wrong way. What can I do to fix it?

HTML:

<html> <head> <title>Descrição do Produto</title> <link rel="stylesheet" href="../css/descricaoProduto.css"> <script type="text/javascript" src="../js/jquery.js"></script> <script type="text/javascript" src="../js/jquery.numeric.min.js"></script> <script type="text/javascript" src="../js/jquery.numeric.js"></script> <meta charset="utf-8"> </head> <body> <div class="corpo"> <div class="menu"> </div> <div class="conteudoNomeDoProduto"> <span class="nomeDoProduto"> CALÇA JEANS LEGGING DE DOS OS TAMANHOS E MODELOS PARA V</span> <div align="center" class="botaoDescricao" onclick="alert('voce clicou em descricao')"> <span class="btnDescricao"> VER MAIS</span> </div> </div> <div id="fotoDoProduto" class="limiteFotoProduto"> <img class="fotoDoProduto" src="../img/sapato1.png"> </div> <div id="fotosAdicionais"> <div class="conteudoFoto1"> <img class="fotoDoProduto" src="../img/sapato2.png"> </div> <div class="conteudoFoto2"> <img class="fotoDoProduto" src="../img/sapato3.png"> </div> </div> <div class="conteudoPreco"> <div class="boxPreco"> <span class="cifrao"> R$</span> <span class="valorProduto">8888.00</span> </div> </div> <div class="conteudoComprar"> <div class="conteudoQuantidadeProduto"> <div class="boxQuantidade"> <input class="numeric txtQuantidade" type="tel" size="3" maxlength="3" value="1" /> <span class="txtProduto"> QUANTIDADE</span> </div> </div> <div class="adicionarAoCarrinho"> <img src="../img/btn/add1.png" onclick="alert('voce clicou em add')" class="btnAcao"/> </div> <div class="comprar"> <img src="../img/btn/compre.png" onclick="alert('voce clicou em compre')" class="btnAcao"/> </div> </div> </div> </body> <script type="text/javascript"> $(".numeric").numeric(); $(".integer").numeric(false, function() { alert("Integers only"); this.value = ""; this.focus(); }); $(".positive").numeric({ negative: false }, function() { alert("No negative values"); this.value = ""; this.focus(); }); $(".positive-integer").numeric({ decimal: false, negative: false }, function() { alert("Positive integers only"); this.value = ""; this.focus(); }); $(".decimal-2-places").numeric({ decimalPlaces: 2 }); $("#remove").click( function(e) { e.preventDefault(); $(".numeric,.integer,.positive,.positive-integer,.decimal-2-places").removeNumeric(); } ); </script> </html>

CSS:

body{ margin:0; padding: 0; } @font-face{ font-family: gotham_light; src: url(../fonts/gotham_light.ttf); } @font-face{ font-family: gotham_ultra; src: url(../fonts/gotham_ultra.ttf); } .menu{ position: absolute; top: 0; right: 0; width: 100%; height: 10%; background-color: #232f3e; } .corpo{ background-color: #fafafa; } .conteudoNomeDoProduto{ position: absolute; width: 96%; height: 13.5%; /*background-color: #1bb776;*/ right: 2%; top: 12%; } .nomeDoProduto{ font-size: 130%; font-family: gotham_light; color: #242638; } .botaoDescricao{ position: absolute; width: 30%; height: 30%; background-color: #232f3e; right: 0.5%; bottom: 2%; } .btnDescricao{ position: relative; top: 30%; font-size: 90%; font-family: gotham_light; color: #ffffff; } .limiteFotoProduto{ position: absolute; width: 70%; height: 35.5%; background-color: #ffffff; left: 2%; top: 26%; padding: 0; margin: 0; overflow: hidden; box-shadow: 3px 3px 3px #d8d8d8; } .fotoDoProduto{ position: relative; max-width: 100%; max-height: 100%; width: auto; height: auto; } .conteudoFoto1{ position: absolute; width: 25%; height: 17.5%; background-color: #ffffff; right: 2%; top: 26%; overflow: hidden; box-shadow: 2px 2px 2px #d8d8d8; } .conteudoFoto2{ position: absolute; width: 25%; height: 17.5%; background-color: #ffffff; right: 2%; top: 44%; overflow: hidden; box-shadow: 2px 2px 2px #d8d8d8; } .conteudoComprar{ position: absolute; width: 96%; height: 26%; background-color: #ffffff; right: 2%; bottom: 2%; } .boxPreco{ position: absolute; width: 60%; height: 100%; left: 0; } .cifrao{ position: relative; font-family: gotham_light; font-size: 100%; color: #fd9729; top: 50%; left: 3%; } .valorProduto{ position: absolute; font-family: gotham_ultra; font-size: 200%; color: #fd9729; bottom: 5%; left: 16%; } .conteudoQuantidadeProduto{ position: absolute; width: 99.5%; height: 32%; top: 0; border: 1px solid #a8a8a8; background-color: #f4f4f4; } .adicionarAoCarrinho{ position: relative; width: 100%; height: 33%; background-color: blue; top: 34.1%; } .comprar{ position: absolute; width: 100%; height: 33%; /*background-color: green;*/ bottom: 0; } .boxQuantidade{ position: absolute; width: 65%; height: 71%; /*background-color: green;*/ top: 18%; } .txtProduto{ font-family: gotham_light; font-size: 110%; color: #4a4a4a; } .txtQuantidade{ height: 100%; color: #4a4a4a; } input{ text-align: center; border:0; } .conteudoPreco{ position: absolute; width: 96%; height: 9%; background-color: #ffffff; right: 2%; bottom: 29%; overflow: hidden; } .btnAddCarrinho{ background-color: #4CAF50; /* Green */ border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; } .btnAddCarrinho:hover{background-color: #000000; /* Green */} button:focus{outline:none;} .btnAcao{ width: 100%; height: 100%; position: absolute; }