Iphone Keyboard Is Changing Zoom Scale of My Web Site

Question

Anyone know how to prevent the zoom that happens when keyboard/spinner is displayed?

I do know that if you set meta tag viewport content to "user-scalable=no" then this zooming is not being done, but is there any way to prevent this anoying zoom without cutting all zooming functionality for users?

Thanks everybody!

Answer 1

Prevent zooming all together by adding this meta tag to your head tag :

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=0"/>

more solutions: https://blog.osmosys.asia/2017/01/05/prevent-ios-from-zooming-in-on-input-fields/

Answer 2

After some testing I found out that depending on viewport size zoom is not made. I mean when having viewport:

 <meta name="viewport"  content="user-scalable=yes, width=280px" />

With no maximum-scale, nor initial-scale, then safari browser wont zoom in when keyboard/spinner is displayed.

I do not understand very well this behaviour, as I would say that logical width to avoid this zooming should be 320px...

I wont mark it as answer, just in case someone wants to add more light to this issue...