CODEWITHSUNDEEP
ioscsswebviewionic-frameworkviewport
Djagu
Djagu

Reputation: 161

iOs orientation widht and height are smaller than it sould be

I have an issue running my ionic application on iOs real devices (tested on iPhone 4 and iPad 4th generation). All is woking perfectly on android phones, tablets ans iOs emulators.

(This is the orientation plugin I am using: cordova-plugin-screen-orientation)

My app is locked in the portrait mode and by clicking on a button I pass to another page which locks the landscape orientation. (All is going well till now) When I click the back button to return to the portrait oriented page, it rotates and is in the portrait mode, but the window width and height are completely messed up.

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 :

[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

This topic here is related but unaswered : stackoverflow.com/questions/18835784/iphones-orientation-change-back-to-portrait-breaks-sites-zoom

Pages screen shots :

Page 1 in portrait mode

Page 1 in portrait mode but with width problems

Thank you very much, in advance !

Upvotes: 1

Views: 415

Answers (1)

Djagu
Djagu

Reputation: 161

I finally managed to solve the issue. Here is my fix :

Open the iOs project in XCode.

Than edit the following function in the MainViewController.m

    - (void)webViewDidFinishLoad:(UIWebView*)theWebView
    {
    // Black base color for background matches the native apps
    theWebView.backgroundColor = [UIColor blackColor];
    theWebView.scalesPageToFit = true;
    theWebView.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleBottomMargin;

    return [super webViewDidFinishLoad:theWebView];
    }

Build and enjoy !

Upvotes: 2

Related Questions