how to make placeholder font (in form) sizes the same across devices?

问题

Using the below CSS, I have managed to get the placeholder font size to be similar for all common android browsers, but iphone's browser makes the placeholder font so tiny it's barely readable. If I increase the size so that it is readable, it becomes so huge on all other android browsers that it won't even fit in the form boxes (and looks ridiculous as it is larger than even the header font).

Is there a workaround to change the font size for just safari browsers? This massive disparity in font size is absurd, and I can't even find a compromise between the two where both are readable. cbtemail.com is the site if you want to see it.

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

来源：https://stackoverflow.com/questions/60236529/how-to-make-placeholder-font-in-form-sizes-the-same-across-devices