I'm experiencing this—I can't even call it a "bug," technically—as I write this post on my iPhone. I touch one of the text boxes to type into, and the screen zooms into that field. What's really annoying is that it doesn't necessarily fit the width of the text field to the screen (so you can't see what you're typing if it's beyond the screen unless you manually scroll), nor does it move right/left as you type/backspace, nor does it zoom out once you leave, or "blur out of," the field.
Thankfully, I've already encountered this as a UI/UX designer, and I can provide a solution I've used.
Fair warning, however: you may have to adjust the styling of other elements of this affects your page layout.
It's all done with CSS media queries. The different models of iOS devices all fall, thankfully, into one of just a few different screen aspect ratios. And the only thing that triggers iOS's browser auto-zoom is if font-size is lower than 16px (or the em/rem equivalent). So here's the base styling to start with; you can add properties or remove input types as needed for your layout, but MAKE SURE to paste this at the END of your "master" stylesheet for forum pages.
/*** Styles added to fix the issue with zoom in on iphone ***/
/* iPhone < 5: */
@media screen and (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 (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 (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 (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; }
}
My source: http://blog.osmosys.asia/prevent-ios-from-zooming-in-on-inpu...
Because "device-aspect-ratio" is a deprecated property, I replaced it with the viewport's property, "aspect-ratio".
There's a lot more left to be desired when it comes to using these text editors in mobile (you wouldn't believe how difficult it's been to write just this message right now), but I'd imagine fixing that would require a full migration of the assets to a more updated front-end. Anyway, I hope this helps!
