Prevent iPhone from zooming when entering text


The iPhone likes to zoom into form elements when entering text. This is great, but once you’re finished entering text, the zoom remains and leaves an undesirable horizontal scrollbar and generally poor user experience until (if) they figure out they need to zoom back out. The below code will prevent the zooming in the first place.

/* prevent iphones from zooming in when entering text */
@media screen and (-webkit-min-device-pixel-ratio:0) { 
	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; }
}

Leave a comment

Your email address will not be published. Required fields are marked *