Closed binury closed 8 hours ago
Another workaround:
I have looked through multiple answers.
[…] setting
maximum-scale=1
inmeta
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;
}
input components default their
font-size
with.text-sm
or 14pxThis causes mobile Safari to zoom the viewport when focusing the element since the size is < 16px.
One workaround for this is to disable zooming through the
<meta>
viewport tag – in any various number of ways — but this is ofc bad for users with accessibility needs… ❌Another workaround is to override the
font-size
rule withimportant
at theinput
level… but this is not always ideal and some circumstances might necessitate overriding the override… 🤷Had anyone else run into this issue and found a better workaround?