Prevent zoom when focusing input element within iframe on iPhone

Viewed 1741

When tapping into an input field using Safari on an iPhone the browser will zoom in. I've been unable to prevent it.

Every other post on this issue states that if the font-size of the input element is above 16px that the zoom will not occur. This has not been the case. I've set the font-size at 29px and verified that the input and input:focus are getting the same css applied, still the browser zooms on focus. This is possibly due to the interactive needing to exist within an iframe.

2 Answers

Try to just add touch-action: none; to input styles

in my case, I added

<meta name="viewport" content="user-scalable=0" />

in the parent window code, and ios safari will adhere to the iframe window's no-zoom styling

Related