Как сделать размер шрифта заполнителя (в форме) одинаковыми на разных устройствах?

Question

Используя приведенную ниже CSS, мне удалось сделать размер шрифта заполнителя одинаковым для всех распространенных android браузеров, но браузер iphone делает шрифт заполнителя настолько крошечным, что он едва читаем. Если я увеличу размер, чтобы он стал читабельным, он станет настолько огромным во всех других android браузерах, что даже не поместится в поля формы (и выглядит нелепо, так как он больше, чем даже шрифт заголовка).

Есть ли обходной путь для изменения размера шрифта только для браузеров Safari? Это огромное неравенство в размере шрифта абсурдно, и я даже не могу найти компромисс между двумя, где оба читабельны. cbtemail.com - это сайт, если вы хотите его увидеть.

input {
    margin-bottom: 20px;
    background-color: #CCC;
    color: #000;
    height: 60px;
    font-size:28px
}
textarea {
    background-color: #ccc;
    width:100%;
    margin-bottom: 20px;
    height: 90px;
    font-size:12px
}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #555;
  opacity: 1; /* Firefox */
  font-size: 28px;
}
::-webkit-input-placeholder {
    font-size: 18px;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #555;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: #555;
}
:-moz-placeholder {
    font-size: 28px;
}
::-moz-placeholder {
    font-size: 28px;
}