I am currently building a responsive website which I decided to test on my Galaxy Ace 2. I am using media queries to change various elements at different window / browser sizes. One such change triggers between the portrait and landscape sizes on my Ace 2. If I view my website in landscape orientation and then rotate to portrait, the Ace 2 sometimes keeps the CSS used in landscape mode, and vice versa.
The only solution I have found is to reload the window:
window.onresize = function(event)
{
document.location.reload(true);
}
But this creates a delay every time the device is rotated.
Is there anything I can do about this?
Thanks,
TM.
The above also doesn’t work well because it forces a page refresh on scrolling too.
From reading elsewhere online (http://moduscreate.com/orientation-change-zoom-scale-android-bug/) it appears it may have someting to do with the viewport meta tag not being reset on device orientation. However, the fix they suggest doesn’t work (even after corrected the missing bracket from their code).
The other weird thing about it is that the bug only occurs when you follow this sequence:
- Load website in portrait (displays fine with zoom disabled).
- Rotate to landscape (displays fine with zoom disabled).
- Rotate back to portrait (displays as it would in landscape with zoom enabled).
If you load the website in landscape then rotate, it displays fine, no matter how many rotations you perform.