NintendoAge http://nintendoage.com/forum/ -Sqooner iOS Auto-zoom When Form Inputs Are Touched/Clicked http://nintendoage.com/forum/messageview.cfm?catid=4&threadid=182715 2018-07-04T19:43:41 -05.00 HeadcolorsTV 4 Originally posted by: HeadcolorsTV
 
Originally posted by: skinnygrinny

I also use my iPhone when on the forum. I have no understanding (nor do I have time to try to) of the information you shared.
Sorry about that; I was more addressing the webmaster(s) in my OP.
No, I apologize. I only meant that as a sort of disclaimer. Not that I thought it was invaluable. 
  ]]> iOS Auto-zoom When Form Inputs Are Touched/Clicked http://nintendoage.com/forum/messageview.cfm?catid=4&threadid=182715 2018-07-04T10:13:20 -05.00 HeadcolorsTV 4 Originally posted by: skinnygrinny

I also use my iPhone when on the forum. I have no understanding (nor do I have time to try to) of the information you shared. Sorry about that; I was more addressing the webmaster(s) in my OP.

  ]]> iOS Auto-zoom When Form Inputs Are Touched/Clicked http://nintendoage.com/forum/messageview.cfm?catid=4&threadid=182715 2018-07-04T06:23:36 -05.00 HeadcolorsTV 4
Most times, anymore, when I want to quote a post I don't even start to because it's such a pain.

The issue has been brought up before. My conspiracy theory is the OG members of NA are set in there ways from the early days when it was only visited via PC. When the mobile version flopped they figured they had already done enough for the ignorant heathens on phones. ]]> iOS Auto-zoom When Form Inputs Are Touched/Clicked http://nintendoage.com/forum/messageview.cfm?catid=4&threadid=182715 2018-07-02T17:48:35 -05.00 HeadcolorsTV 4
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-input-fields/ 

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!

]]>