Search code examples
javascriptandroidcordovawebviewphonegap

After refreshing, my webview doesn't set the right screen orientation

The title may be a bit unclear so I'm going to explain what's my problem. In my hybrid app I've used <plugin spec="2.3.0" name="cordova-plugin-crosswalk-webview" source="npm" /> (config.xml) to be able to publish my app on the older systems. I also set the orientation to be landscape using this <plugin name="cordova-plugin-screen-orientation" source="npm" spec="2.0.0" />and then in index.html 

function onLoad() {
        document.addEventListener("deviceready", onDeviceReady, false);
        screen.orientation.lock('landscape');
    }

I also added a function which closes my app after taping on the arrow on the android bar 

function onBackKeyDown() {
    navigator.app.exitApp();
    }

So far everything works fine. The problem is that after closing my app it is still in RAM and you can get back to it clicking the right button on the android bar. Normally it's not a problem because app should just start again. But in my case it forgets to load the orientation setting. I spent 5 hours to find why. And after removing crosswalk from my app I found the reason. I don't need crosswalk on my phone because it has android 7.1.1 but I need it to publish my app. But crosswalk seems to be this problem. It kind of bugs after "backing" to the app from RAM. So I have two questions: Is there any way to "remind" my Webview to load this orientation in this situation? And can I publish my app in two files, for the new phones and the older ones (under the one position in the store)?

Solution

  • Try adding

    <preference name="orientation" value="landscape" />

    to your config.xml file. This should lock the orientation to landscape.

    The resume event is fired when the native platform pulls the application out from the background. You could add an event listener and then re-run your code to lock the orientation.

    You can detect the OS and OS version using the cordova-plugin-device plugin. This will get both those values.

    var os  = device.platform;  // Get the OS
var os_version = device.version;  // Get the OS version

    You could then run different code depending on the OS version. Depending on how different the app will act for each version it might be worth reading https://developer.android.com/google/play/publishing/multiple-apks.html

    Edit:

    You can add the below code to your config.xml and this should allow the orientation to be both landscape and reverse landscape:

    <preference name="orientation" value="landscape" />
<config-file platform="android" parent="/manifest/application" mode="merge">
    <activity android:screenOrientation="sensorLandscape" />
</config-file>

    You can find other options here: https://developer.android.com/guide/topics/manifest/activity-element.html#screen