Web and WebWorks Development

[PawelGorny]

Hello

I do not know how to configure my html files style. Application elements which look good in Ripple seems to be too large in emulator.

I use the latest Ripple and Gold emulator. What I do wrong? Which result is more accurate? Personally I think it is Ripple. I do not have a DevAlpha so I'm up a gum tree. Should I reconfigure somtehing?

Please check the attached screenshot.

[bryanhiggins]

Hi,

I suggest you use the simulator to adjust your styles. It uses the same rendering engine as the actual device.

[biggerCC]

Hi Pawel,

as mentioned before: the simulator is your "WYSIWYG" mode...

While Ripple is great for development (and packaging), it still lacks support for the viewport metatag and therefore isn't very accurate. But there are hacky workarounds in order to either adapt Ripple to your desired screen size or by simply using the zoom out function of your browser.

(And: No, I don't blame Ripple for their missing viewport support. I guess it's out of their reach and something missing in Chrome...)

[PawelGorny]

But... flags you see on the screenshot are 74x40, I do not change their size, so what is the resolution of simulator? At least it seems that width in Ripple is 720.

[biggerCC]

How do you create your UI? bbUI or your own HTML code?

I recommend checking out this article about BB10 screen resolutions: http://devblog.blackberry.com/2012/08/blackberry-10-screen-resolutions/

[PawelGorny]

I have found this issue:

https://github.com/blackberry/BB10-WebWorks-Framework/issues/138

Playing with viewport solved the problem with large fonts, but now I am not sure what is a good example of viewport meta element.

[biggerCC]

In my opinion

<meta name="viewport" content="width=720, user-scalable=no, target-densityDpi=160" />

is a good start.

It will tell your BB10 browser to set it's viewport width to 720 pixels (even for the first models with a couple of extra pixels, which will get upscaled and might look a little blurry therefore).

[J4y]

thanks, this worked for my app that is using jQuery mobile BB10 theme.. cheers