Question

我是初学者，我在使用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;
}

Answer 1

您必须将页面css属性更改为“绝对”

数字键盘android弹力网站模板

1 个答案: