WebView width problem after orientation change

@DJAGU wrote:

Hi,

I am building an app using Ionic framework. My app works perfectly on Android Phones, Tablets and iOs emulators (iPhone and ipad).
I wanted to test my app on an real iPhone and than on an iPad, and I had a big issue.
My app is locked in portrait mode when started, from the home page I have a button to access the page 2. When I click on the button it lockes the orientation on landscape mode. On the page 2, I have an other button to go back to the homepage. When I click on the button it rotates to the portrait mode, and redirects to the homepage ($state.go()…). The view actually rotates, and is in portrait mode, but the view width is much smaller than before. (Not full screen anymore).

I have described my problem on stack overflow, but no one could give me an answer so far : http://stackoverflow.com/questions/36555993/ionic-ios-viewport-width-height-difference-when-the-device-rotates-and-goes-back

I have tried many configurations found in other topics, but none of them worked for me :

<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi" /> <!-- Works on android -->
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi, user-scalable=no" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

I also noticed that the inital width and height of the portrait page are (iPhone 4):
[Log] Window height = 480 width = 320

Than on the landscape page :
[Log 2] Window height = 320 width = 480

Finally, when I go back to the portrait page I have this :
[Log 3] Window height = 640 width = 160

Those logs are the same for those 2 methods :

window.innerHeight / document.documentElement.clientHeight
window.innerWidth /  document.documentElement.clientWidth

Here are 3 screenshots to help you understand :

Homepage

Page 2 (Landscape)

Homepage (Portrait with the width problem)

I tried to set the viewport to the initial window width, the content becomes larger (so I dont see all the width of the page) but the white space is still on the same place.

Can someone help me with this please ?

Many thanks !

Posts: 1

Participants: 1

Read full topic