Focus on input field and orientation change messes

问题:

Edit: I guess this question on Stackoverflow is related to this issue.

Edit: The problem only occurs when saved to home screen not in browsing context.

Note: Everything regarding scaling and orientationchange works as expected until any input element is focused.

I have a web app with the following meta-tag for viewport-settings:

<meta name="viewport" content="user-scalable=no, width=1024">

Everything works great on orientationchange. But, whenever an input field is focused, zoom-level is messed up. I have tried a couple of different approach for solution out there, but am stuck.

This is what happens when input is focused and we trigger an orientationchange:

1. From Portrait to Landscape Page is zoomed out and doesnt fill the whole viewport. If we focus on an input element when in this mode, it zooms back and looks ok in landscape mode, however if we rotate it again, it will have the same problem as in 2.

2. From Landscape to Portrait Page is zoomed in and covers more than the viewport.

Things we have tried:

1. Meta-tag settings for viewport (initial-scale, maximum-scale, minimum-scale)
2. Removed viewport-tag
3. Handle orientation-change in JavaScript and set new viewport-settings dynamically on orientationchange
4. Tried to calculate scale-level (document.documentElement.clientWidth / window.innerWidth) onorientationchange
5. Set input-field font-size to at least 16px

I am a bit stuck here and am pretty sure I am missing something obviuos so the question is: How do I make sure the zoom level in iOS Safari is the same post-input focus as pre-input focus?

回答1:

Try this instead:

<meta name="viewport" id="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0" >

This should stop Safari doing that annoying zoom-to-focused-input thing.