CODEWITHSUNDEEP
androidioscordovaorientationmedia-queries
Cenobyte321
Cenobyte321

Reputation: 479

iOS/Android Phonegap - portrait for smartphones, landscape on tablets

I'm creating a multidevice multiplatform app with Phonegap.

Basically, I have two scenarios:

I should be able to customize the layout and placement with media queries, depending if the device is a tablet or smartphone (landscape or portrait, respectively). I've experimented with locking to portrait regardless of device, and then using CSS media queries and rotate transformations, but I run with two problems:

I also looked into: https://github.com/champierre/pg-plugin-screen-orientation but it seems to be working only for Android and I need to support both iOS and Android.

Does anyone have any experience with this particular scenario? Any suggestions on handling this orientation problem?

Upvotes: 3

Views: 2378

Answers (1)

Majid Abarghooei
Majid Abarghooei

Reputation: 663

you can use navigator.userAgent to get the device type. For Example something like this:

var deviceType = (navigator.userAgent.match(/iPad/i))  == "iPad" ? "iPad" : (navigator.userAgent.match(/iPhone/i))  == "iPhone" ? "iPhone" : (navigator.userAgent.match(/Android/i)) == "Android" ? "Android" : (navigator.userAgent.match(/BlackBerry/i)) == "BlackBerry" ? "BlackBerry" : "null";

alert(navigator.userAgent);

Or you can use the guide in this page...

After that you can use the following code to set the orientation:

$(window).bind('orientationchange', function(event){

    if (/*is tablet*/) {
     navigator.screenOrientation.set('landscape');
    } 
    else if (/* is smart phone */) {
     navigator.screenOrientation.set('portrait');
    }

   });

I hope that above codes be helpful for you ;)

Upvotes: 1

Related Questions