Edit : I think https://stackoverflow.com/a/2129608/ is related to this problem.
Change The problem only occurs when saving to the main screen, not in the viewing context.
Note Everything about scaling and orientation works as expected until any input element is focused.
I have a web application with the following meta tag for viewport settings:
<meta name="viewport" content="user-scalable=no, width=1024">
Everything works fine on changechange. But whenever the input field is focused, the zoom level is confused. I tried a couple of different approaches to solving there, but I'm stuck.
This is what happens when the input is focused and we run changechange:
From portrait to landscape The page is scaled down and does not fill the entire viewport. If we focus on the input element when in this mode it scales and looks normal in landscape mode, however, if we rotate it again, it will have the same problem as 2.
From landscape to portrait The page is enlarged and covers more than the viewing area.
What we tried:
- Meta tag settings for the viewport (start, maximum, minimum)
- Remote viewport tag
- Change orientation orientation in JavaScript and dynamically set new viewport options to changechange.
- Tried to calculate the scale level (document.documentElement.clientWidth / window.innerWidth) onorientationchange
- Set the font size of the input field to at least 16 pixels
I am a bit stuck here and pretty sure that I am missing something obviuos, so the question is: How can I make sure that the zoom level in iOS Safari is the same input focus after input as the input focus?
source share