我是初学者，在使用 Android 数字小键盘时遇到困难。我正在使用 Android Studio 开发一个 webview，每次打开数字键盘时，网站模板都会以错误的方式拉伸(stretch)。我该怎么做才能修复它？
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;
}
最佳答案
您必须将页面 css 属性更改为“绝对”
关于css - 数字键盘android stretch网站模板，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41811443/