Skip to content

Instantly share code, notes, and snippets.

@vedranjaic

vedranjaic/iphone_disable_autozoom_input.css

Created May 26, 2013 17:40
Show Gist options
  • Star 17 You must be signed in to star a gist
  • Fork 5 You must be signed in to fork a gist
  • Save vedranjaic/5653472 to your computer and use it in GitHub Desktop.
Save vedranjaic/5653472 to your computer and use it in GitHub Desktop.
Download ZIP
css: iPhone - Disable auto-zoom on input fields
Raw
iphone_disable_autozoom_input.css
/*
* disable auto-zoom on iphone input field focus
* http://www.456bereastreet.com/archive/201212/ios_webkit_browsers_and_auto-zooming_form_controls/
*/
input[type='text']:focus,
input[type='number']:focus,
textarea:focus {
font-size: 16px;
}
/* disable auto-zoom on iphone input field focus */
@media screen and (-webkit-min-device-pixel-ratio:0) {
select:focus,
textarea:focus,
input:focus {
font-size: 16px;
}
}
@waybuu
Copy link

waybuu commented Sep 28, 2018

Thank you! This just solved my big headache!!! Thumbs up to you!

@maxflex
Copy link

maxflex commented Aug 26, 2019

Doesn't help :(

@paingthor
Copy link

Hey Max
You need to set font-size of your input elements to 16px or above directly.
REF: https://stackoverflow.com/questions/5111964/disable-auto-zoom-field-zoom-on-input-tags-on-my-mobile-site-without-disabling#answer-18949718

@deepakkumartiwari
Copy link

@maxflex

Doesn't help :(

Please add "!important" then it will be works for you to. If doesn't work then please let me your browser version as well.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment