Cut Off Text on Input Form Width Mobile Safari

Why does an input form on mobile Safari have more padding inside it and push the text to the right so it gets cut off?

^ Desktop Safari Web Input Form ^

^ Mobile iOS Safari Input Form ^

CSS

.phone-input {
    width: 20px;
    text-align: center;
    font-size: 16px !important;
    height: 1.75em;
    //border: 0;
    outline: 0;
    background: transparent;
}

HTML

'<div class="phone-field">'+
     '(<input class="phone-input" name="phone-input" type="tel" size="1" maxlength="1" placeholder="-" autofocus="autofocus"><input class="phone-input" name="phone-input" type="tel" size="1" maxlength="1" placeholder="-"><input class="phone-input" name="phone-input" type="tel" size="1" maxlength="1" placeholder="-">)   '+
     '<input class="phone-input" name="phone-input" type="tel" size="1" maxlength="1" placeholder="-"><input class="phone-input" name="phone-input" type="tel" size="1" maxlength="1" placeholder="-"><input class="phone-input" name="phone-input" type="tel" size="1" maxlength="1" placeholder="-"> - '+
     '<input class="phone-input" name="phone-input" type="tel" size="1" maxlength="1" placeholder="-"><input class="phone-input" name="phone-input" type="tel" size="1" maxlength="1" placeholder="-"><input class="phone-input" name="phone-input" type="tel" size="1" maxlength="1" placeholder="-"><input class="phone-input" name="phone-input" type="tel" size="1" maxlength="1" placeholder="-">'+
'<\/div>'