項(xiàng)目里準(zhǔn)備做一個(gè)模仿支付寶6位密碼輸入框，做完在谷歌瀏覽器上模擬，沒(méi)有任何問(wèn)題，附圖如下：

因?yàn)槊艽a輸入框小黑點(diǎn)太小了，所以我把font-size調(diào)到了50px，在電腦網(wǎng)頁(yè)上也是一切運(yùn)行正常，但是當(dāng)我在手機(jī)上打開(kāi)時(shí)，發(fā)現(xiàn)輸入框異常的大，附圖如下：

發(fā)現(xiàn)原因出自"font-size"，如果我把"font-size"修改為0，手機(jī)上效果就和電腦一樣了，但是這樣就看到輸入的內(nèi)容了，請(qǐng)問(wèn)如何解決這個(gè)問(wèn)題，保證input的大小不變，同時(shí)font-size變大。在PC上是可行的，但不知為什么在手機(jī)上不行。

app.vue文件

const PwdInput = {

template : ""

};

module.exports = {

data () {

return {

correctPassword : 123456,

items : 6,

telWidth : "",

telHeight : "",

pwdWidth : "",

pwdHeight : "",

msg : ""

};

},

//初始化事件

mounted : function(){

let _self = this;

const screenWidth = document.body.clientWidth; //獲取屏幕寬度

const fakeWidth = screenWidth*0.9 - 10; //取消邊框后的寬度

_self.pwdWidth = fakeWidth/6+"px";

_self.pwdHeight = fakeWidth/6+"px";

_self.telWidth = screenWidth*0.9 + "px";

_self.telHeight = _self.pwdHeight;

},

components : {

'pwd-input' : PwdInput

},

methods : {

},

watch : {

'msg' : function(val,oldVal){

let _self = this;

const len = val.length;

const $telInput = document.getElementsByName('tel')[0];

const $box = document.getElementsByName('password');

for(let i=0;i

$box[i].value = val[i];

}

$box.forEach(function(value,index,array){

if(index >= len){

$box[index].value = "";

}

})

const telVal = $telInput.value;

if(telVal.length == 6){

if(telVal == _self.correctPassword){

this.$router.push({path : "about"}); //成功跳轉(zhuǎn)至about頁(yè)面

}else{

console.log("wrong and value = " + telVal);

}

}

}

}

}

請(qǐng)輸入交易密碼，完成身份驗(yàn)證

app.scss

.container{

.text-info-style{

font-size: 14px;

text-align: center;

}

.pwd-box{

margin: auto;

position: relative;

overflow: hidden;

input[type="tel"]{

width: 100%;

height: 100%;

position: absolute;

top: 0;

left: 0;

border: none;

outline: none;

opacity: 0;

z-index: 1;

}

input[type="tel"]:focus{

left:-1000px;

top: -100px;

}

.fake-box{

input[type="password"]{

-webkit-appearance: none;

float: left;

border:1px #e5e5e5 solid;

border-right:none;

background-color: #ffffff;

text-align: center;

font-size: 50px;

}

}

}

}

與50位技術(shù)專家面對(duì)面20年技術(shù)見(jiàn)證，附贈(zèng)技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的html input font size,在移动端中Input大小随着font-size而变化的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。