Skip to content

Instantly share code, notes, and snippets.

@doulmi

doulmi/iphone_disable_autozoom_input.css

Forked from vedranjaic/iphone_disable_autozoom_input.css
Last active May 31, 2017 07:39
Show Gist options
  • Save doulmi/45f37695d11717fd64008150906de003 to your computer and use it in GitHub Desktop.
Save doulmi/45f37695d11717fd64008150906de003 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;
}
}
/*** Styles added to fix the issue with zoom in on iphone ***/
/* iPhone < 5: */
@media screen and (device-aspect-ratio: 2/3) {
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"]{ font-size: 16px; }
}
/* iPhone 5, 5C, 5S, iPod Touch 5g */
@media screen and (device-aspect-ratio: 40/71) {
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"]{ font-size: 16px; }
}
/* iPhone 6, iPhone 6s, iPhone 7 portrait/landscape */
@media screen and (device-aspect-ratio: 375/667) {
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"]{ font-size: 16px; }
}
/* iPhone 6 Plus, iPhone 6s Plus, iPhone 7 Plus portrait/landscape */
@media screen and (device-aspect-ratio: 9/16) {
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"]{ font-size: 16px; }
}
body {
font-size: 16px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment