Disable Auto Zoom in Input "Text" tag - Safari on iPhone

A deep dive into prevention and enhancement

The magic of the minimum font size

To ward off Safari's auto-zoom, set a minimum font size of 16px for input, select, and textarea elements.

input, select, textarea {
  font-size: 16px; /* Halloween costume for iOS Safari: Invisible man */
}


Making use of media queries

Use @media queries combined with the -webkit-min-device-pixel-ratio feature to apply Safari-specific styles:

@media screen and (-webkit-min-device-pixel-ratio:0) {
  input, select, textarea {
    font-size: 16px; /* I say Safari, you say Zoom-free! */
  }
}


One-ring-to-rule-them-all font sizes

Setting font-size: inherit on form elements permits centralized management from a single place, usually the body:

body {
  font-size: 16px;
}

input, select, textarea {
  font-size: inherit; /* Slide into your DM...eh, and inherit font-size */
}


The charm of mobile-friendly design

Prioritize a mobile-first approach. That means designs that require no zoom, offering enhanced accessibility.

Consistency is the key

Ensure CSS rules apply to both focused and unfocused states for better visual consistency.

input:active, input:focus {
  font-size: inherit; /* Everybody stays calm on my watch! */
}


Accessible but zoom-free experience

Providing an accessible experience is vital. Preserve user scalability by using maximum-scale=1.0, instead of user-scalable=no.

Parrying Safari's moves

Use recognized workarounds for mobile Safari's discrepancies:

select:focus {
  background: #eee; /* I got 99 problems but focus ain't one */
}


Preserve forms on floating layers and prevent UI displacement on input focus.