home screen web app cuts off part of the page when fullscreen

Question

First I have to say that I am new to this web app home screen button theme. These lines:

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" /> 

worked cool for me so far, yet there is a problem when orientation is changed from landscape to portrait. Then the app cuts of just the part where the browser chrome was and leaves a white field instead on the right side. Strangely when I start in portrait mode and then change to landscape all works well as supposed to back and forth. How is this to be avoided?

Thanks so much for help

Garavani

Answer 1

The following code solved my problem:

$(window).on('orientationchange', function() {
                    // only necessary for home screen use
                    // otherwise blank space is left where the adress bar was (on orientation change from landscape to portrait)
                    document.body.scrollLeft = 0;               
                } );