Disable Auto Zoom in Input “Text” tag - Safari on iPhone (ok)

https://stackoverflow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-safari-on-iphone

518

The browser will zoom if the font-size is less than 16px and the default font-size for form elements is 11px (at least in Chrome and Safari).

Additionally, the select element needs to have the focus pseudo-class attached.

input[type="color"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
select:focus,
textarea {
  font-size: 16px;
}

It's not necessary to use all the above, you can just style the elements you need, eg: just text, number, and textarea:

input[type='text'],
input[type='number'],
textarea {
  font-size: 16px;
}

Alternate solution to have the input elements inherit from a parent style:

body {
  font-size: 16px;
}
input[type="text"] {
  font-size: inherit;
}

share improve this answer follow edited Jan 23 '18 at 12:29Ivar4,2891111 gold badges4242 silver badges4848 bronze badgesanswered Jun 18 '11 at 7:17srikanth5,31711 gold badge1111 silver badges44 bronze badges

• 82Just to get everything covered: select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"] { font-size: 16px; } – Nic Barbier Jul 5 '13 at 15:10

• 8@Nic You need to use select:focus. Was having the same issue too. – DGibbs Jun 9 '14 at 14:25

• 163I don't understand, how is this a fix? What if I want a smaller/larger font size? – bryan Aug 3 '15 at 23:46

• 50proper way is to change meta tag to: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/> – Milos Matic Dec 4 '15 at 9:57

• 41@MilosMatic In most cases probably not a good solution, as it completely prevents the user from scaling the page. Potentially even more annoying for your visitors. – BadHorsie Jul 8 '16 at 14:32

show 18 more comments458

You can prevent Safari from automatically zooming in on text fields during user input without disabling the user’s ability to pinch zoom. Just add maximum-scale=1 but leave out the user-scale attribute suggested in other answers.

It is a worthwhile option if you have a form in a layer that “floats” around if zoomed, which can cause important UI elements to move off screen.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">share improve this answer follow edited Sep 28 '18 at 13:15answered Sep 16 '17 at 13:59daxmacrog4,85911 gold badge1111 silver badges1616 bronze badges

• 88This is the 2018+ solution. Upvote this like your life depends on it. – Henrik Petterson Feb 2 '18 at 12:35

• 28This will break android devices zooming ability – fen1ksss Aug 14 '18 at 14:52

• 4@daxmacrog, you are right, but the OP did not mention whether he wants to break androids by allowing needed behaviour. This is where personally I took incorrect option. Of course, it's better to specify. – fen1ksss Aug 15 '18 at 11:27

• 18@HenrikPetterson This does more than just disabling the auto-zoom as specified by OP, it also disables pinch zoom. So I don't think it's the 2018+ solution. – André Werlang Sep 17 '18 at 23:05

• 4@AndréWerlang That is not accurate. As stated clearly in the answer, this solution does not disable pinch zoom in Safari (or Firefox), which is what the OP asked about. But as pointed out in previous comments, it does disable user zoom on Android devices and in Chrome on iOS. – daxmacrog Sep 18 '18 at 0:07

show 10 more comments231

@media screen and (-webkit-min-device-pixel-ratio:0) { 
  select:focus,
  textarea:focus,
  input:focus {
    font-size: 16px;
    background: #eee;
  }
}

New: IOS will still zoom, unless you use 16px on the input without the focus.

@media screen and (-webkit-min-device-pixel-ratio:0) { 
  select,
  textarea,
  input {
    font-size: 16px;
  }
}

I added a background since IOS adds no background on the select.