Prevent the need to zoom into inputs with CSS
Adrian Roselli describes a quick, effective way to make HTML inputs inherit the styles of the page they're on, rather than deriving their appearance from operating system conventions. The following (simplified) declaration makes the font match the input's surroundings; in particular, it makes its
font-size equivalent to
If you use mobile Safari, you've probably noticed that it sometimes zooms into inputs as you focus them, to make them easier to read and type into. It happens whenever an input has its text smaller than
16px, and it's a sensible thing to do. However, in some cases, it's purely accidental: you get this barely zooming into an input because it happens to have a computed font size of
14px, as inherited from its parent.
To proactively fix this, and spare the user a useless interaction, I got into the habit of throwing in an extra declaration:
font-size: max(16px, 1em);
In browsers supporting the
max() function — including, thankfully, Safari — it prevents the inherited font size of inputs from going below
16px, and avoids the zoom behavior.
Nice and easy!
- This technique only applies to 100% zoom; starting from version 13, mobile Safari has zoom controls, and zooming out of the page understandably brings back the zoom into input thing.
- One thing that's still prevalent is using
viewportmeta tag. Despite Safari ignoring them since iOS 10 to allow users to pinch-zoom regardless, they're still bad for accesibility.