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

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

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

app.vue文件

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;
            }
        }
    }
}