Rectangle 27 160

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

@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.

This is a simple, elegant solution that seems to work very well. I like the tip of adding a background to the focused element, as it helps to make the active field stand out from the rest. Thanks!

This works not only for safari on iOS (iphone/ipad/ipod), but also Safari/OSX and Chrome (windows and Mac). So if you're trying to specifically target the iphone, this will not work.

Why is everyone saying 16px but no one cares to mention why exactly is it 16px? Why such an arbitrary number? Why do we have to set our form field text size to 16px and not .. say 1.8rem or 2.5em or such? Is this just a stupid bug from a proprietary OS?

@Beebee 100% font size is 16px, that the default for most if not all browsers (desktop too). IOS uses it that as the default probably because it's a comfortable size for reading. Why it is set this way I haven't bothered to look up, don't care.

@media screen and (-webkit-min-device-pixel-ratio:0) and (max-device-width:1024px)

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

iphone html text input zoom
Rectangle 27 157

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

@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.

This is a simple, elegant solution that seems to work very well. I like the tip of adding a background to the focused element, as it helps to make the active field stand out from the rest. Thanks!

This works not only for safari on iOS (iphone/ipad/ipod), but also Safari/OSX and Chrome (windows and Mac). So if you're trying to specifically target the iphone, this will not work.

Why is everyone saying 16px but no one cares to mention why exactly is it 16px? Why such an arbitrary number? Why do we have to set our form field text size to 16px and not .. say 1.8rem or 2.5em or such? Is this just a stupid bug from a proprietary OS?

@Beebee 100% font size is 16px, that the default for most if not all browsers (desktop too). IOS uses it that as the default probably because it's a comfortable size for reading. Why it is set this way I haven't bothered to look up, don't care.

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

iphone html text input zoom
Rectangle 27 287

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;
}
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 You need to use select:focus. Was having the same issue too.

I don't understand, how is this a fix? What if I want a smaller/larger font size?

proper way is to change meta tag to: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>

@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.

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

iphone html text input zoom
Rectangle 27 278

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;
}
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 You need to use select:focus. Was having the same issue too.

I don't understand, how is this a fix? What if I want a smaller/larger font size?

proper way is to change meta tag to: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>

@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.

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

iphone html text input zoom
Rectangle 27 129

If your website is properly designed for a mobile device you could decide not allow scaling.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

This solves the problem that your mobile page or form is going to 'float' around.

Technically correct, but I disagree with the reasoning. Disabling user zooms on a properly designed site is generally still a bad idea.

"Properly designed" is very subjective. Consider a fixed, 50px header at the top of a site that is fully responsive and should work in all browsers. Zooming in iOS Safari breaks the header positioning and pretty much breaks the whole site.

Disabling user zoom capability is a terrible practice from a UX perspective and should really be avoided at all costs. Being able to zoom in freely is a basic accessibility feature, and a control that you should never take away from the user.

Properly designed means that you have taken care of all html (text) and design elements in a way that it is readable on a mobile device (primarily phones). If this is properly done there is no need to allow scaling for a visitor and avoids all the unexpected behaviour when scaling/zooming.

In native mobile apps you never get the chance to zoom and they work just fine, why would a webapp be any different? If you set the appropriate font-size and line-height with clear contrasts you should be ok.

Those using the 'it's fine in native apps' argument are overlooking the fact that well-made native apps adhere to OS-level accessibility settings such as text size. Older and badly sighted users can and do use extremely large OS-wide font sizes because they need to. Web apps often don't or can't adhere to this setting, therefore allowing the web-browser's built-in accessibility functionality such as zooming is vital. Whatever you think is perfectly readable, believe me, there are people who won't find it clear enough. Do not take this option away from users if you value usability.

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

iphone html text input zoom
Rectangle 27 126

If your website is properly designed for a mobile device you could decide not allow scaling.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

This solves the problem that your mobile page or form is going to 'float' around.

Technically correct, but I disagree with the reasoning. Disabling user zooms on a properly designed site is generally still a bad idea.

"Properly designed" is very subjective. Consider a fixed, 50px header at the top of a site that is fully responsive and should work in all browsers. Zooming in iOS Safari breaks the header positioning and pretty much breaks the whole site.

Disabling user zoom capability is a terrible practice from a UX perspective and should really be avoided at all costs. Being able to zoom in freely is a basic accessibility feature, and a control that you should never take away from the user.

In native mobile apps you never get the chance to zoom and they work just fine, why would a webapp be any different? If you set the appropriate font-size and line-height with clear contrasts you should be ok.

Those using the 'it's fine in native apps' argument are overlooking the fact that well-made native apps adhere to OS-level accessibility settings such as text size. Older and badly sighted users can and do use extremely large OS-wide font sizes because they need to. Web apps often don't or can't adhere to this setting, therefore allowing the web-browser's built-in accessibility functionality such as zooming is vital. Whatever you think is perfectly readable, believe me, there are people who won't find it clear enough. Do not take this option away from users if you value usability.

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

iphone html text input zoom
Rectangle 27 6

$('input[type=search]').on('focus', function(){
  // replace CSS font-size with 16px to disable auto zoom on iOS
  $(this).data('fontSize', $(this).css('font-size')).css('font-size', '16px');
}).on('blur', function(){
  // put back the CSS font-size
  $(this).css('font-size', $(this).data('fontSize'));
});

Of course, some other elements in the interface may have to be adapted if this 16px font-size breaks the design.

This is classy. This is stylin'. I'm out of puns. Clever approach.

This doesn't work in iOS9 (simulator).

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

iphone html text input zoom
Rectangle 27 6

$('input[type=search]').on('focus', function(){
  // replace CSS font-size with 16px to disable auto zoom on iOS
  $(this).data('fontSize', $(this).css('font-size')).css('font-size', '16px');
}).on('blur', function(){
  // put back the CSS font-size
  $(this).css('font-size', $(this).data('fontSize'));
});

Of course, some other elements in the interface may have to be adapted if this 16px font-size breaks the design.

This is classy. This is stylin'. I'm out of puns. Clever approach.

This doesn't work in iOS9 (simulator).

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

iphone html text input zoom
Rectangle 27 52

In summary the answer is: set the font size of the form elements to at least 16px

Yes, this is definetly the best practice to avoid zooming on mobile devices. No js, no hacks, no workarounds at all. But even with 16px I noticed a very little zoom in my pages so I tried 17px, 18px... to see what happens.

It is best practice to declare 100% on body, button, input, textarea and select elements. This allows the user to set a default that is not the 16px shipped with browsers. Someone who has trouble reading on screen might set their default to 18px or 20px. You don't want to override their choice by forcing 16px on them. When it comes to iOS, though, they made a decision to scale up any value that their HIG says is too small. Unfortunately it looks like it does not interpret the 100% value, so we are stuck adding in the default to appease it.

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

iphone html text input zoom
Rectangle 27 52

In summary the answer is: set the font size of the form elements to at least 16px

Yes, this is definetly the best practice to avoid zooming on mobile devices. No js, no hacks, no workarounds at all. But even with 16px I noticed a very little zoom in my pages so I tried 17px, 18px... to see what happens.

It is best practice to declare 100% on body, button, input, textarea and select elements. This allows the user to set a default that is not the 16px shipped with browsers. Someone who has trouble reading on screen might set their default to 18px or 20px. You don't want to override their choice by forcing 16px on them. When it comes to iOS, though, they made a decision to scale up any value that their HIG says is too small. Unfortunately it looks like it does not interpret the 100% value, so we are stuck adding in the default to appease it.

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

iphone html text input zoom
Rectangle 27 4

As of iOS 10 (or perhaps earlier), you can prevent Safari from automatically zooming in on text fields during user input without disabling the users ability to pinch zoom. Just add maximum-scale=1 but leave out the user-scale attribute suggested in other answers. (I would have added this as a comment to one of those answers, but I dont have privileges, apparently.)

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">

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

iphone html text input zoom
Rectangle 27 32

input[type='text'],textarea {font-size:1em;}

Note that setting user-scalable to no will disable all zooming, which is probably a bad idea.

This only works if your body font size is the default (un-specified, or 1em, or 100%). If you set a custom font size, you can set the font-size in your snippet to 16px to avoid auto-zooming.

I know this question was directed at iPhone but this is more compatible across platforms and into the future of more platforms/devices, I tried the 16px approach but on an Android tablet only reduced the auto zooming effect. Setting to '1em' as specified in the post solved the issue.

I had a custom font-size (15px), and setting the font-size to 1rem (not em) worked.

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

iphone html text input zoom
Rectangle 27 32

input[type='text'],textarea {font-size:1em;}

Note that setting user-scalable to no will disable all zooming, which is probably a bad idea.

This only works if your body font size is the default (un-specified, or 1em, or 100%). If you set a custom font size, you can set the font-size in your snippet to 16px to avoid auto-zooming.

I know this question was directed at iPhone but this is more compatible across platforms and into the future of more platforms/devices, I tried the 16px approach but on an Android tablet only reduced the auto zooming effect. Setting to '1em' as specified in the post solved the issue.

I had a custom font-size (15px), and setting the font-size to 1rem (not em) worked.

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

iphone html text input zoom
Rectangle 27 19

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>

This is not necessarily the "proper" way to prevent this behaviour. Mobile Safari zooms in if the text is deemed too small to read. Switching off zooming all together is heavy handed and prevents users from being able to interact with your page in a way that they may expect.

Apparently in iOS10 Apple changed the maximum-scale property to not be respected anymore, allowing all sites to zoom in regardless of its setting.

This works for iOS10 20/September/2016 version... at least works on my app... Thanks!!! Before I was using <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"> But I switched it to the line on the response and it worked...

"Ensure that the browser pinch zoom is not blocked by the page's viewport meta element so that it can be used to zoom the page to 200%. Restrictive values for user-scalable and maximum-scale attributes of this meta element should be avoided." w3.org/TR/mobile-accessibility-mapping/#zoom-magnification

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

iphone html text input zoom
Rectangle 27 19

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>

This is not necessarily the "proper" way to prevent this behaviour. Mobile Safari zooms in if the text is deemed too small to read. Switching off zooming all together is heavy handed and prevents users from being able to interact with your page in a way that they may expect.

Apparently in iOS10 Apple changed the maximum-scale property to not be respected anymore, allowing all sites to zoom in regardless of its setting.

This works for iOS10 20/September/2016 version... at least works on my app... Thanks!!! Before I was using <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"> But I switched it to the line on the response and it worked...

"Ensure that the browser pinch zoom is not blocked by the page's viewport meta element so that it can be used to zoom the page to 200%. Restrictive values for user-scalable and maximum-scale attributes of this meta element should be avoided." w3.org/TR/mobile-accessibility-mapping/#zoom-magnification

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

iphone html text input zoom
Rectangle 27 14

There's no clean way I could find, but here's a hack...

1) I noticed that the mouseover event happens prior to the zoom, but the zoom happens before mousedown or focus events.

So, try this (shown in jquery for compactness):

$("input[type=text], textarea").mouseover(zoomDisable).mousedown(zoomEnable);
function zoomDisable(){
  $('head meta[name=viewport]').remove();
  $('head').prepend('<meta name="viewport" content="user-scalable=0" />');
}
function zoomEnable(){
  $('head meta[name=viewport]').remove();
  $('head').prepend('<meta name="viewport" content="user-scalable=1" />');
}

This is definitely a hack... there may be situations where mouseover/down don't always catch entries/exits, but it worked well in my tests and is a solid start.

Not sure when Safari behavior might have changed, but now (iOS6.0.1) mousedown is happening prior to the autozoom. Thus in my prior solution, zooming is getting re-enabled too soon. I haven't come up with an adequate fix, since all events I tried now happen before zoom. You could re-enable zoom upon a keydown or blur, but there are some scenarios that this might miss (such as if user wants to manually zoom before they start typing anything).

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

iphone html text input zoom
Rectangle 27 14

There's no clean way I could find, but here's a hack...

1) I noticed that the mouseover event happens prior to the zoom, but the zoom happens before mousedown or focus events.

So, try this (shown in jquery for compactness):

$("input[type=text], textarea").mouseover(zoomDisable).mousedown(zoomEnable);
function zoomDisable(){
  $('head meta[name=viewport]').remove();
  $('head').prepend('<meta name="viewport" content="user-scalable=0" />');
}
function zoomEnable(){
  $('head meta[name=viewport]').remove();
  $('head').prepend('<meta name="viewport" content="user-scalable=1" />');
}

This is definitely a hack... there may be situations where mouseover/down don't always catch entries/exits, but it worked well in my tests and is a solid start.

Not sure when Safari behavior might have changed, but now (iOS6.0.1) mousedown is happening prior to the autozoom. Thus in my prior solution, zooming is getting re-enabled too soon. I haven't come up with an adequate fix, since all events I tried now happen before zoom. You could re-enable zoom upon a keydown or blur, but there are some scenarios that this might miss (such as if user wants to manually zoom before they start typing anything).

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

iphone html text input zoom
Rectangle 27 13

Add user-scalable=0 to viewport meta as following

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">

"Ensure that the browser pinch zoom is not blocked by the page's viewport meta element so that it can be used to zoom the page to 200%. Restrictive values for user-scalable and maximum-scale attributes of this meta element should be avoided." w3.org/TR/mobile-accessibility-mapping/#zoom-magnification

This breaks the rules of accessibility defined by W3.

This did not work for me.

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

iphone html text input zoom
Rectangle 27 13

Add user-scalable=0 to viewport meta as following

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">

"Ensure that the browser pinch zoom is not blocked by the page's viewport meta element so that it can be used to zoom the page to 200%. Restrictive values for user-scalable and maximum-scale attributes of this meta element should be avoided." w3.org/TR/mobile-accessibility-mapping/#zoom-magnification

This breaks the rules of accessibility defined by W3.

This did not work for me.

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

iphone html text input zoom
Rectangle 27 12

I recently (today :D) had to integrate this behavior. 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;
}

FYI, This worked well on my iphone 5 with iOS 6, but on an iphone 4 with iOS 5 in portrait mode, the focus styling was applied after the zoom occurred. Maybe something subtle going on, I didn't investigate further.

I just want to say I have lots of different queries using zoom to make development go faster and depending on how much you zoom will determine how much font-size you need I believe

:focus did not work for me iOS 10.2 iPhone 6, but input[type="text"]:hover worked well.

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

iphone html text input zoom