blackberry phonegap build screen usage in landscape orientation

Edit Subject

oeps :-)

the meta tag was ommitted again. here it is:

meta name="viewport" content="height=device-height, width=device-width, user-scalable=no"

Hi Ed

Have you include a device orientation setting on config.xml
https://build.phonegap.com/docs/confi...

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

Cheers
-Amir

Hi Amir,

I have added the orientation preference set to default but the problem still remains.

The problem is that when the user changes their orientation on the blackberry the screen is not redrawn only rotated.

This results in when the user starts the applicaiton in landscape mode ( full width and height are used as the applicaiton is being drawn for the first time ) and then reorients to portrait mode alot of content is falling off the right side.

When the user starts the application in portrait mode ( full width and height are used as the applicaiton is being drawn for the first time ) and then reorients to landscape mode alot of unused black space appears on the right side.

Is this a known issue? I really hope this can be avoid by having the screen redrawn on the blackberry on orientation change.

Kind regards,

Ed

Hey Ed

Turn out this user having similar issue as yours.
http://stackoverflow.com/questions/89...

Can you try with the same and see if that helps?

Thanks
-Amir

HI Amir,

I am sorry to report that the link you profided is not related to my issue. the link is depicting a different problem related to not having a viewport defined.

I do have a viewport defined and I would like to prevent the user from being able to zoom in and out as zooming in and out does not feel like a native applicaiton.

I do however would like the blackberry user from being able to change their orientation at run time without either loosing content on the right side or not making use of all available width. The problem would be fixed if the screen is redrawn on orientation change instead of only rotated.

Kind regards,

Ed

Hi Ed

Can you share your Build's appid. I'll try to look at it
http://build.phonegap.com/apps/xxxx

Thanks
-Amir

Hi Amir,

The app id is: 157046
I hoe you can find out what's wrong.

Kind regards,

Ed

Hi Ed

I haven't look at the code yet but this might be of your interest. Check it out:

onOrientationchange DOM event
http://supportforums.blackberry.com/t...

CSS3 @media query
http://supportforums.blackberry.com/t...

-Amir

Hi Amir,

I am sorry to report that your last suggestion is also a dead end.

The browser always reports 360 clientWidth and 480 clientHeight regardless of wether I start the application in landscape or portrait mode. When I change the orientation the browser still reports 360 clientWidth and 480 clientHeight.

This is why I believe media queries will also be ineffective with solving this problem because I know of no way to force the webview te be redrawn inside the container it is in via css media queries.

If there is a phonegap javascrip API method I can call onOrientationchange that forces the container that contains the webview ( or what ever the object is called that renders the html ) to redraw the webview then the problem is most likely solved.

If that is not possible then the only alternative I see at this stage is to update the native blackberry code to redraw the webview on orientationchange to use the full width and height.

Can you please check out my code and see if this problem also happens on your blackberry?

Kind regards,

Ed

I'll show some images to explain the problem. Please forgive the bad quality photo's as i made them myself with bad lighting and a rotten camera.

The image below shows what the application looks like when it is started in portrait mode. All content fits nicely in a horizonal manner because the html is adjusting itself to what ever width it has available.



The image below show what happens if the application is then turned to landscape.
You can see that all the content is simply rotated and not horizontally rescaled and a large black unused area appears on the right side between the content and the mousepad of the blackberry.



Now let's reverse the order. We start out in landscape mode ( applicaiton gets drawn for the first time ). You can see that everything fits nicely in a horizonal manner.


and then when we change the orientation to portrait content is falling off because the screen is not being redrawn only rotated. The selected menu item with an orange background you have seen in previous images in the top right corner falls of the screen while the html table has a width of 100% and should always fit whatever the width of the screen.


This behaviour only happens when running the app as native when compiled with phonegap build. If I use the blackberry browser directly to show the html then everything is rescaling very well on orentation change.

WOuld you have more suggestions to explore?

Kind regards,

Ed

Did you found a solution to this? I'm having the same issue.