javascript - 在移动端中Input大小随着font-size而变化

Question

项目里准备做一个模仿支付宝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;
            }
        }
    }
}

Answer 1

font-size 在没有设置 line-height时 会带有 默认行高的，并且在此时 你 应该没有对input 进行任何宽高限制操作吧。 请给段 源码