HTML - Mobile Layout - Scrolling Position after Orientation Change
I ran into a problem while trying to check the layout for a mobile app. I have two elements sitting in a container that merge with each other. If I go to one of the pages (using only standard scrolling, no scripts) and change the orientation, everything is fine and the element is resized correctly. But when I go back to the previous orientation, the scroll position is lost and the scroll position is between the two items.
It is very difficult for me to describe as I am not sure what is going on, so I provided the code that I am using
You need to download this to your device to see what's going on. Load it into landscape, scroll until the whole green page appears and then change it to portrait. Then return to the landscape. You will see half a red page and half a green page.
Is it related to how I am setting my view or a known issue with webkit browsers, as this happens on both IOS and android (also chrome)?
Any help is appreciated!
source to share
Well, this is quite logical:
Let's say you're on an iPhone. You display 320x480 in portrait, 480x320 in landscape.
In portrait, your global div is 200%, so 640px. The green part is 320 pixels. In landscape, your global div is 960px wide. The green part is 480 pixels.
If you go to the green part in the portrait, you scroll down to 320px. When you change the orientation, you're still 320px, but the green part is now 480px: stuck in the middle.
Possible solution: javascript, listen for the onorientationchange event and set the correct offset.
Another (but bad) solution: fixed width window, e.g .:
<meta name="viewport" content="width=400px,initial-scale=1.0,maximum-scale=1.0" />
source to share