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
How to merge multiple .csv files via command line
Today I downloaded 29 csv files with tax information. I could import those files 1 at a time into WooCommerce, but wouldn’t it be nice if I could merge them first and then only import a single file? The unix command is simple – just navigate to the folder with all the csv files and…
15 Best WordPress Support and Maintenance Services for 2023: Ensuring Your Website Stays in Top Shape
Small business owners and non-profit leaders know that keeping your website secure, fast, and fully-functional is critical to success. Here’s the unspoken truth: You can either learn how to do all that tech maintenance and development stuff yourself, or hire someone else to do it. But let’s face it, doing it yourself isn’t always the…
How to Whitelist SEM Rush IPs in Cloudflare
Alright, I’m going to show you how to whitelist a set of IPs on CloudFlare. In our case we use SEMrush and we want to make sure the SEMrush has full access to our sites.