Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
Trusted Contributor
sh2sg
Posts: 177
Registered: ‎03-10-2011
My Device: Not Specified
Accepted Solution

BB10 Viewport confusions

Hi,

 

I am porting my PB apps to BB10, with big confusions on Viewport setting.

 

1. If I use:

 

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link type="text/css" rel="stylesheet" href="styles/landscape.css" media="screen and (orientation:landscape)" />
<link type="text/css" rel="stylesheet" href="styles/portrait.css" media="screen and (orientation:smileytongue:ortrait)" />

 

This works perfectly on Playbook device on both landscape and portrait mode.

(Playbook screenshot)

11.png

 

But on BB10 Simulator, it looks bad, scales too much not fit screen width

(BB10 Simulator screenshot)

 12.png

 

 

2. If I dynamically add Viewport by Javascript&colon;

 

<script>
var meta = document.createElement("meta");
meta.setAttribute('name','viewport');
meta.setAttribute('content','initial-scale='+ (1/window.devicePixelRatio) + ',width=device-width, user-scalable=no');
document.getElementsByTagName('head')[0].appendChild(meta);
</script>

 

On Playbook device, screen is not fixed

(Playbook screenshot)

 21.png

 

On BB10 simulator, the screen looks too small too

(BB10 Simulator screenshot)

22.png 

 

 

3. If I remove viewport meta tag, 

 

On Playbook device, screen looks OK when it starts up, but it scales too small on orientation change

(Playbook screenshot)

31.png

 

 

On BB10 simulator, screen looks OK when it starts up (fit screen width), I don't know how to rotate simulator...

 

 

 

 

I am not sure if BB10 simulator exactly represents how BB10 device works, from my understanding, method 1 above shout be good enough (proved by real Playbook device), device should auto scale to fit width.

 

Which method should be the correct way?

 

Any advice?

 

Thanks

 

Please use plain text.
Developer
nathanpc
Posts: 134
Registered: ‎05-19-2012
My Device: Torch 9800, PlayBook 64GB, Dev Alpha
My Carrier: VIVO Brazil

Re: BB10 Viewport confusions

[ Edited ]

Had the same problem in the past: http://supportforums.blackberry.com/t5/Web-and-WebWorks-Development/bbUI-js-Out-of-Proportions-in-De.... Hope this can help you with your problem. :smileyhappy:

If I helped you please click the "Like" button to support my work.
My apps: CherryNotes - Bookmarked - Requests
Social Me: about.me - Twitter
Please use plain text.
Trusted Contributor
sh2sg
Posts: 177
Registered: ‎03-10-2011
My Device: Not Specified

Re: BB10 Viewport confusions

Thanks for the suggestions.

 

I tried 

<meta id="viewport" name="viewport" content="initial-scale=1.0, width=device-width, user-scalable=no, target-densitydpi=device-dpi" />

 

but it didn't work for me.

 

Since that post mentioned bbUI, I looked into bbUI and copied viewport setup code to my apps, basically it sets initial-scale to ~0.4 on BB10 simulator. And result is same as method 2 above, does not fit BB10 simulator full screen. Is that expected (on simulator)?

 

My app was made for Playbook, has fixed CSS layout size (landscape: 1024x600), it didn't have any viewport meta. when the original Playbook app runs on BB10 Dev Alpha device, it is automatically reszied to 1280x750 based on BB10's width/height ratio, which is very closed to full screen 1280x768.

 

So now I add above viewport meta, will BB10 device also auto-resize it to 1280x750? It didn't when running in simulator, I don't know how it works in a real device...

 

 

Please use plain text.
Developer
nathanpc
Posts: 134
Registered: ‎05-19-2012
My Device: Torch 9800, PlayBook 64GB, Dev Alpha
My Carrier: VIVO Brazil

Re: BB10 Viewport confusions

[ Edited ]

sh2sg wrote:

My app was made for Playbook, has fixed CSS layout size (landscape: 1024x600), it didn't have any viewport meta.


That's the problem. Your layout is fixed, if you used a flexible one you'll be able to easy port the app, now you'll have to port the entire layout to the new resolution.

If I helped you please click the "Like" button to support my work.
My apps: CherryNotes - Bookmarked - Requests
Social Me: about.me - Twitter
Please use plain text.
Trusted Contributor
sh2sg
Posts: 177
Registered: ‎03-10-2011
My Device: Not Specified

Re: BB10 Viewport confusions

You are right. Have to create different CSS set for every screen resolution... Tried to make 1280x768 CSS, and now it fits BB10 full screen.

 

BTW, how to rotate BB10 simulator? The simulator starts as Portrait mode, but whenever an apps starts, even the built-in browser, it always switches to landscape mode, I tried the trick from PB simulator (click from left-bottom corner) but doesn't work for BB10 simulator.

 

Please use plain text.
Developer
nathanpc
Posts: 134
Registered: ‎05-19-2012
My Device: Torch 9800, PlayBook 64GB, Dev Alpha
My Carrier: VIVO Brazil

Re: BB10 Viewport confusions

[ Edited ]

From BB10 simulator doesn't rotate on landscape:


zezke wrote:

All you need to do is click on the bottom right corner (in either orientation) and it should be able to change.  However, make sure you have orientation lock off otherwise it will not rotate the screen.


 

You said that your application is starting in landscape. Don't forget to put the default orientation as portrait since it's more common in a smartphone. Users usually dislike to hold their smartphones in landscape to use some apps.

 

Also don't forget to "Like" the posts that helped you. :smileyhappy:

If I helped you please click the "Like" button to support my work.
My apps: CherryNotes - Bookmarked - Requests
Social Me: about.me - Twitter
Please use plain text.
Trusted Contributor
sh2sg
Posts: 177
Registered: ‎03-10-2011
My Device: Not Specified

Re: BB10 Viewport confusions

That didn't work for me, my simulator version BlackBerry10Simulator-BB10_0_09-386. I will check if any newer version is available...

 

The same app works for both Playbook and BB10, how to make it default to portrait? In config.xml, I use <rim:smileysurprised:rientation mode="auto" />

 

On playbook, it starts on landscape or portrait mode based on device's current orientation.

On BB10 simulator, it always starts on landscape mode unless I force it to portrait in config.xml

App is compiled with Playbook WebWorks SDK, could that be the reason? A PB SDK compiled app starts on landscape mode?

Please use plain text.
Developer
nathanpc
Posts: 134
Registered: ‎05-19-2012
My Device: Torch 9800, PlayBook 64GB, Dev Alpha
My Carrier: VIVO Brazil

Re: BB10 Viewport confusions

That's the reason. You should be compiling the BB10 version with the BB10 SDK. Make sure you use the ID that was generated with the PlayBook SDK in the BB10 config.xml so you don't run into the same problems I had: Package ID must match Package ID in original file bundle

If I helped you please click the "Like" button to support my work.
My apps: CherryNotes - Bookmarked - Requests
Social Me: about.me - Twitter
Please use plain text.
Trusted Contributor
sh2sg
Posts: 177
Registered: ‎03-10-2011
My Device: Not Specified

Re: BB10 Viewport confusions

[ Edited ]

after downloaded latest simulator BlackBerry10Simulator-BB10_0_09-1673, all of these strange behaviours disppeared, everything works as expected: app starts on landscape or portrait mode accroding to device/simulator  orientation; click on lower right corner to rotate simulator; app icon now looks like what BB10 guideline described...

 

the old simulator (is that old? i remember I download it few weeks ago) indeed made me a lot of troubles, I was even thinking PB SDK compiled apps are not fully compatible with BB10's WebWorks environment so have to compile with BB10 SDK... but it is not necessary now, save my time.

 

 

Please use plain text.
Developer
nathanpc
Posts: 134
Registered: ‎05-19-2012
My Device: Torch 9800, PlayBook 64GB, Dev Alpha
My Carrier: VIVO Brazil

Re: BB10 Viewport confusions

You might want to use the BB10 SDK for three reasons:

  1. You can apply to the Built for BlackBerry program
  2. Performance will be better with the BB10 SDK since it's using the Native SDK to compile instead of the AIR one
  3. Some PlayBook APIs aren't compatible with BB10, and some like Toast, which I use a lot, are only available in the BB10 SDK
If I helped you please click the "Like" button to support my work.
My apps: CherryNotes - Bookmarked - Requests
Social Me: about.me - Twitter
Please use plain text.