项目里准备做一个模仿支付宝6位密码输入框，做完在谷歌浏览器上模拟，没有任何问题，附图如下：

因为密码输入框小黑点太小了，所以我把font-size调到了50px，在电脑网页上也是一切运行正常，但是当我在手机上打开时，发现输入框异常的大，附图如下：

发现原因出自"font-size"，如果我把"font-size"修改为0，手机上效果就和电脑一样了，但是这样就看到输入的内容了，请问如何解决这个问题，保证input的大小不变，同时font-size变大。在PC上是可行的，但不知为什么在手机上不行。

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"}); //成功跳转至about页面

}else{

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

}

}

}

}

}

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;

}

}

}

}