javascript - 在移动端中Input大小随着font-size而变化
项目里准备做一个模仿支付宝6位密码输入框，做完在谷歌浏览器上模拟，没有任何问题，附图如下：
因为密码输入框小黑点太小了，所以我把font-size调到了50px，在电脑网页上也是一切运行正常，但是当我在手机上打开时，发现输入框异常的大，附图如下：
发现原因出自"font-size"，如果我把"font-size"修改为0，手机上效果就和电脑一样了，但是这样就看到输入的内容了，请问如何解决这个问题，保证input的大小不变，同时font-size变大。在PC上是可行的，但不知为什么在手机上不行。
app.vue文件
<script>
const PwdInput = {
template : "<input type='password' readonly=''/>"
};
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<len;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"}); //成功跳转至about页面
}else{
console.log("wrong and value = " + telVal);
}
}
}
}
}
</script>
<template>
<p class="container">
<p class="text-info-style">请输入交易密码，完成身份验证</p>
<p class="pwd-box" :style="{width:telWidth,height:telHeight}">
<input type="tel" name="tel" maxlength="6" class="pwd-input" v-model.trim="msg">
<p class="fake-box">
<input type="password" readonly="" name="password" :style="{width:pwdWidth,height:pwdHeight}" onfocus="this.blur();" />
<input type="password" readonly="" name="password" :style="{width:pwdWidth,height:pwdHeight}" onfocus="this.blur();" />
<input type="password" readonly="" name="password" :style="{width:pwdWidth,height:pwdHeight}" onfocus="this.blur();" />
<input type="password" readonly="" name="password" :style="{width:pwdWidth,height:pwdHeight}" onfocus="this.blur();" />
<input type="password" readonly="" name="password" :style="{width:pwdWidth,height:pwdHeight}" onfocus="this.blur();" />
<input type="password" readonly="" name="password" :style="{width:pwdWidth,height:pwdHeight}" onfocus="this.blur();" />
</p>
</p>
</p>
</template>
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;
}
}
}
}
