CODEWITHSUNDEEP
androidcordovaphonegap-buildcordova-2.0.0
Mimouni
Mimouni

Reputation: 3630

Fix orientation of screen on tablet and phone

in my cordova application , I fix orientation in config.xml like :

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

this works fine for tablet.

now, I need to fix it to portrait if device width < 767px

so : for tablet the view will be landscape and for phone in portait.

do you have any idea to fix it ?

thank you for your help.

Upvotes: 1

Views: 1105

Answers (1)

DaveAlden
DaveAlden

Reputation: 30356

If you want to vary orientation on Android based on detected device width, you'll need to do this when the app is running, so you'll need to remove the orientation preference from the config.xml. You can use the cordova-plugin-screen-orientation plugin to set the device orientation from within your app, something like:

var MAX_WIDTH = 767;
$(document).on("deviceready", function(){
    if($(window).width() < MAX_WIDTH || $(window).height() < MAX_WIDTH){
        screen.lockOrientation('portrait');
    }else{
        screen.lockOrientation('landscape');
    }
});

Using pixel dimensions to determine whether a device is a tablet is not very robust - newer Android phones with high-resolution screens will report screen widths > 767px. So maybe consider using using phonegap-istablet plugin to determine if the device is a tablet:

$(document).on("deviceready", function(){
    if(window.isTablet){
        screen.lockOrientation('landscape');
    }else{
        screen.lockOrientation('portrait');
    }
});

Upvotes: 3

Related Questions