input框 placeHolder小字體垂直居中

.inputPlaceCss::-input-placeholder{
  transform: translate(0, 11%);
  -webkit-transform: translate(0, 11%);
}
.inputPlaceCss::-webkit-input-placeholder{
  transform: translate(0, 11%);
  -webkit-transform: translate(0, 11%);
}

 

login.html

//placeholder樣式兼容坑妹IOS
        if(isPhone() !=1){
            $("#phone").addClass("inputPlaceCss");
        }
        function isPhone(){
            var u = navigator.userAgent, app = navigator.appVersion;
            var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
            var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端
            var isIphoneX = /iphone/gi.test(navigator.userAgent) && (screen.height == 812 && screen.width == 375);
            if (isAndroid) {
                return 1;//安卓操作系統
            }else if (isIOS && !isIphoneX) {
                return 2;//ios操作系統
            }else if(isIOS && isIphoneX){
                return 3; //iphoneX機型
            }
        }

 

需求：placeholder小字居中，input輸入手機號大字體。

效果：==================================>>