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 1em:

textarea,
input {
  font: inherit;
}

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 15px, or 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:

button,
select,
textarea,
input {
  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!

---

Some notes:

• 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 maximum-scale=1.0, or user-scalable=no in the viewport meta tag. Despite Safari ignoring them since iOS 10 to allow users to pinch-zoom regardless, they're still bad for accesibility.