Fix portrait orientation on phones but landscape on tablets

[Andymel]

Hi,

is it possible to configure my app to be always in portrait mode on smaller screens and always in landscape mode for bigger screens?

I will use media queries to do separate layouts, but I guess I have to prevent the rotation in the config.xml?!

Andy

[Jesse Monroy]

@Andymel,
welcome to mobile hybrid development. What sort of system are you using for testing?

You may want to read this FAQ. Read the bold sentences first.
Top Mistakes by Developers new to Cordova/Phonegap

Jesse

[Andymel]

Hi Jesse,

thanks a lot for your fast answer and the link. It made some other things clearer!

@Testing:
At the moment I develop in Webstorm using Typescript. I had troubles with the Phonegap project I started with and am therefore building a cordova project now. I am using the CLI command "Phonegap serve" (not cordova because of the cool phonegap auto updates). I have a Fairphone and a Samsung Galaxy S2 in front of me as well as chrome in mobile emulation mode on my PC. All 3 show the updates immediately which is amazingly helpful. When I finish my work of the day I build an apk and test it on my current main phone (the Fairphone).

Some more infos about what I try to achieve:
Most of the app is finished. I now want to do a different layout on bigger screens. In addition to the two phones I have a Samsung Galaxy Tab3 tablet. The app is in portrait mode on the phones. On the tablet I want another layout. Landscape mode. On the right side (with nearly the same size and aspect ratio as on the phones) I want the same layout as I have on the phones. The area on the left of that should display additional infos and things that are done using overlays on the smaller devices.

[Jesse Monroy]

Okay. Got it.
It appears you got you act together and are moving the right direction.
At this point, you will want to explore "responsive" design especially with
CSS3. Also look into "media queries" for CSS.

Part of media design is to set up parameters in CSS that has the
screen resize and reorient objects as needed based on criteria.
Typically, you can use the "width" to determine this. Here is a quick example:

@media screen and (max-width:320px) {
#header {font-size:medium;overflow:hidden;}
#headerClear {font-size:medium;}
#headerLeft {font-size:large;}
#headerRight {font-size:large;}
}

Questions?
Jesse

[Andymel]

Hi and thanks again Jesse!

The problem is, that in addition to using media queries to do the layout for the different screen sizes I also have to use something to prevent the rotation of the layout between portrait and landscape when the user rotates the device.

In the cordova documentation I found ...

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

But I don't know how to set different preferences for different screen sizes. And that's basically the question. Can I write different <preference> tags in the config.xml or can I write different config.xml for different screen sizes?

Andy 

[Jeff Berwick]

There is a plugin called screen orientation that I use.  You could put in some code to change the screen orientation depending on the screen size.

Jeff

--
-- You received this message because you are subscribed to the Google
Groups "phonegap" group.
To post to this group, send email to phon...@googlegroups.com
To unsubscribe from this group, send email to
phonegap+u...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/phonegap?hl=en?hl=en
 
For more info on PhoneGap or to download the code go to www.phonegap.com
---
You received this message because you are subscribed to the Google Groups "phonegap" group.
To unsubscribe from this group and stop receiving emails from it, send an email to phonegap+u...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Andymel]

Hi Jeff,

thanks a looot for this very valuable link!!
But that raises another question: Is there any faster way to test that besides building an apk?

• if I build an apk it works
• Shouldn't that also work with the phonegap developer app?
  
• In the browser this can't work I guess.

I have not used plugins until now but I thought they can be used with the phonegap developer app. Seems like I am wrong, am I?
Thanks again!

[Kerri Shotts]

@Andymel,

See inline:

On Monday, May 2, 2016 at 4:09:15 PM UTC-5, Andymel wrote:

But that raises another question: Is there any faster way to test that besides building an apk?

• if I build an apk it works

Glad you got it working! 

• Shouldn't that also work with the phonegap developer app?
  

The PhoneGap Developer App only supports core plugins, and there are edge cases even there where the PGDevApp does not act in the same manner as a built APK. You can build your own version of the PGDevApp with extra plugins for testing, which can be quite useful.

• In the browser this can't work I guess.
  

I don't see how it would be possible to make this work in a browser. In this particular instance, make sure your app follows responsive design so that it can fit form factors of any size.

 

...

Hope that helps!