12-29-2012 04:02 AM
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 (orientationortrait)" />
This works perfectly on Playbook device on both landscape and portrait mode.
But on BB10 Simulator, it looks bad, scales too much not fit screen width
(BB10 Simulator screenshot)
var meta = document.createElement("meta");
meta.setAttribute('content','initial-scale='+ (1/window.devicePixelRatio) + ',width=device-width, user-scalable=no');
On Playbook device, screen is not fixed
On BB10 simulator, the screen looks too small too
(BB10 Simulator screenshot)
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
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?
Solved! Go to Solution.
12-29-2012 10:58 AM - edited 12-29-2012 10:58 AM
Had the same problem in the past: http://supportforums.blackberry.com/t5/Web-and-Web
12-29-2012 12:43 PM
Thanks for the suggestions.
<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...
12-29-2012 02:02 PM - edited 12-29-2012 02:03 PM
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.
12-30-2012 01:19 AM
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.
12-30-2012 08:34 AM - edited 12-30-2012 08:34 AM
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.
12-30-2012 08:46 AM
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 <rimrientation 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?
12-30-2012 09:08 AM
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
12-30-2012 09:09 AM - edited 12-30-2012 09:10 AM
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.
12-30-2012 09:13 AM
You might want to use the BB10 SDK for three reasons: