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 !