Web and WebWorks Development

[nathanpc]

Yesterday I got my Dev Alpha at the São Paulo BlackBerry Jam and as everyone I'm playing with it today, mainly porting my apps to it. I've tried compiling my bbUI.js/WebWorks app using both the BB 10 and the PlayBook SDKs but I couldn't get my app to display correctly on my Dev Alpha, it's completely out of proportions.

Here's a picture of the problem:

Any ideas on how to correct this?

PS: It works perfectly on the PlayBook and Ripple.

[nathanpc]

Bump...

[rorybarnes]

What OS version is the Dev Alpha on? What version of bbUI are you using?

[nathanpc]

I'm using bbUI 0.9.3 and my Dev Alpha is running 10.0.4.188 (I saw the update on the Dev Alpha site, but I still haven't arrived at home so where my internet connection is decent enough to download it).

[rorybarnes]

That is probably your problem then

There is a font update in OS 10.0.6, bbUI 0.9.3 was updated to account for that. Try it again once you update your DevAlpha, if you are still having problems something else is amiss.

[nathanpc]

I updated to 10.0.6.545 and I'm still getting the same thing using both SDKs...

I commented all the "features" from my build.xml to avoid this issue: https://github.com/blackberry/BB10-Webworks-Packager/issues/175. Maybe this is causing the problem?

Any other suggestions?

[rorybarnes]

Do you do any CSS mods to the base font size?

You should be able to leave the features that are supported by BB10 in, just comment out the ones that aren't supported.

If your code is using those features it could cause problems with JS rendering, so best to put a check that the feature exists before you try to use it.

I don't have many other ideas. Hard to debug stuff like this remotely. Are you seeing any errors in remote inspector? can you check that the blackberry and bb objects exist?

[nathanpc · Accepted solution]

I was looking at the bbUI.js Example app source code (that was displaying correctly on the Dev Alpha) and I noticed that the viewport meta tag was a bit different than my one. My one was like this:

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

I noticed that the bbUI.js one had a device-density parameter. I added it and now the app is diplaying correctly. Here's the correct one for your apps:

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

[rorybarnes]

Glad you figured it out.

Just a note: the viewport will be set automatically for you based on the device it is on in v0.9.4

https://github.com/blackberry/bbUI.js/issues/295

[26filip]

---

nathanpc wrote:

I noticed that the bbUI.js one had a device-density parameter. I added it and now the app is diplaying correctly. Here's the correct one for your apps:

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

---

For my apps it wasn't correct. (build with WebWorks SDK 1.0.2.9). But setting initial-scale into 0.4 give correct view.

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