CODEWITHSUNDEEP
cordova
Cratein
Cratein

Reputation: 453

Phonegap orientation preference depending on screen size

I am building a multi-platform app with phonegap. On normal and large screen the app is easier to use on landscape but on small devices (i.e. phone or bootstrap extra-small-device) it's easier to use in portrait.

I'd like to know if there is a way to force the orientation depending on the size of the screen using config.xml . I've looked around the site for answers but i only found specific platform answer. But my app is a web app in HTML5 so i don't have any manifest or plist.

That's why i want to use the config.xml file.

EDIT :

Thanks! I tried the yoik plugin but i can't figure out how to import the plugin. I tried to add:

<gap:plugin name="net.yoik.cordova.plugins.screenorientation" />

in my config.xml but it didn't seemed to work.

My code is now like this :

function onLoad() {
        document.addEventListener("deviceready", onDeviceReady, false);
    }

    // device APIs are available
    //
    function onDeviceReady() {
        if (window.outerWidth < 768) {
            screen.lockOrientation('portrait');
            document.location.href = 'www.site.com';
        }
        else {
            screen.lockOrientation('landscape');
            document.location.href = 'www.site.com' ;
        }
    }

Upvotes: 1

Views: 912

Answers (1)

Roope Hakulinen
Roope Hakulinen

Reputation: 7405

I do not think there is a way to do this (at least for all platforms) with just config.xml. If you do not necessarily have to use the config.xml, you can use this handy plugin by yoik. Example of usage of that plugin

// set to either landscape
screen.lockOrientation('landscape'); // Or portrait

// allow user rotate
screen.unlockOrientation();

Just put the locking into your deviceReady event handler with appropriate conditionals to match the screen size requirements.

Upvotes: 2

Related Questions