Font-size of Input causes mobile Safari to zoom viewport about flowbite

[binury]

Another workaround:

I have looked through multiple answers.

[…] setting maximum-scale=1 in meta tag works fine on iOS devices but disables the pinch to zoom functionality on Android devices. […]

So I wrote a JS function to dynamically change meta tag:

  var iOS = navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);
  if (iOS)
      document.head.querySelector('meta[name="viewport"]').content = "width=device-width, initial-scale=1, maximum-scale=1";
  else
      document.head.querySelector('meta[name="viewport"]').content = "width=device-width, initial-scale=1";

Another hack:

OK, I've read through all the old answers but none of them worked for me. After many hours of trying different things the solution seemed simple in the end:

input{
    transform: scale(0.875);
    transform-origin: left center;
    margin-right: -14.28%;
}

Another hack:

[…] In order to not impact the original design fields, including combo, I opted to apply the transformation at the focus of the field:

input[type="text"]:focus, input[type="password"]:focus,
textarea:focus, select:focus {
  font-size: 16px;
}