4

I am making a responsive page for all mobile browsers. One issue I am running into (particularly for iOS) is that input items zoom in when touched if the font-size is less than 16px - which is a big problem since the mock-up I have for the site uses a smaller font-size.

Disable Auto Zoom in Input "Text" tag - Safari on iPhone - the answer here is to set all the input items to 16px.

and

Prevent iPhone from zooming form? - the answer here is to force "no zoom" on the user - in general this would be a bad UX decision.

Is there some fix out there I can use without forcing the user to not be able to zoom and not have to change the input to some proprietary size (just to conform to iOS)?

jsfiddle

Appreciate any help. Thanks.

escapesequence
  • 202
  • 4
  • 12
  • 1
    Don't do this. Why forgo usability for design? – evolutionxbox Nov 20 '17 at 16:59
  • 1
    Maybe use JavaScript/jQuery to try attaching a class to prevent zooming only when a form element is focused? But I have to say, I agree with @evolutionxbox – delinear Nov 20 '17 at 17:04
  • @evolutionxbox So it's not possible? I am just trying to adhere to the mock-up I am given as well as give a consistent experience across devices. – escapesequence Nov 20 '17 at 17:21
  • 1
    @escapesequence I’ve been there too. The most reliable way to disable zooming is through the viewport meta tag, but I must stress that the loss of usability is not worth it. – evolutionxbox Nov 20 '17 at 20:41

0 Answers0