I was experiencing an issue where Safari on iOS iphone would zoom in on text fields as shown in the image below.
The fix was found on Stackoverflow’s “Disable Auto Zoom in Input “Text” tag – Safari on iPhone” article as well as on Warren Chandler’s “Preventing iPhone From Zooming” article.
Put simply, you either need to update your css so that the text size is greater than 16px AND the “select:focus” is set to 16px:
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;
}
OR update the header meta tag so it disallows the zoom entirely:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Afterward, the textfields no longer zoom in:
Is this helpful?
More posts from themightymo.com
WordPress body_class() Adds Browser-Specific Classes! WOW!
A common problem amongst website developers is the “IE Sucks” problem. That is, different browsers (I’m looking at you, Internet Explorer) process CSS differently. One way to get around these issues is to use a combination of javaScript and CSS to address the issue. In the past, I have used this “CSS Browser” script to…
Whoa! Extra Options for wp_list_pages() Added to WordPress Recently!
I just realized that they added some sweet features to the wp_list_pages() funtion in WordPress 2.7. These include the ability to add html before and after menu items. I was struggling earlier today, trying to squeeze graphic dividers between dynamically-created between menu items. After trying all sorts of CSS tricks, I discovered this simple workaround…
BuddyPress Installed!
I completed my first BuddyPress installation today on a test server after experiencing a BIG fail trying to get it installed on a friend’s site (Sorry, Jeff!). It seems his HostGator account doesn’t like WordPress MU for some reason. But MY HostGator account likes it plenty! Below is my reaction to the installation process. Not…