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
Developer
PawelGorny
Posts: 150
Registered: ‎12-03-2012
My Device: PP

Ripple vs Simulator - scale/css problem

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.

 

css.png

--
Regards,
Pawel Gorny
my apps: http://pawelgorny.com/
PGpgp, Your Reply, Anagrammatist, Texas Hold'em Odds Calculator, Contacts to CSV
If your issue has been solved, please resolve it by marking "Accept as Solution"
BlackBerry Development Advisor
bryanhiggins
Posts: 203
Registered: ‎12-18-2012
My Device: Z10, Q10, Q5, Z30, Z3

Re: Ripple vs Simulator - scale/css problem

Hi,

 

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

Bryan Higgins
BlackBerry WebWorks
@bryanhiggins
Developer
biggerCC
Posts: 270
Registered: ‎12-13-2010
My Device: PlayBook 16GB, BB10 Dev Alpha

Re: Ripple vs Simulator - scale/css problem

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...)

- - -
My approved apps @ App World
Developer
PawelGorny
Posts: 150
Registered: ‎12-03-2012
My Device: PP

Re: Ripple vs Simulator - scale/css problem

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.

 

--
Regards,
Pawel Gorny
my apps: http://pawelgorny.com/
PGpgp, Your Reply, Anagrammatist, Texas Hold'em Odds Calculator, Contacts to CSV
If your issue has been solved, please resolve it by marking "Accept as Solution"
Developer
biggerCC
Posts: 270
Registered: ‎12-13-2010
My Device: PlayBook 16GB, BB10 Dev Alpha

Re: Ripple vs Simulator - scale/css problem

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/

- - -
My approved apps @ App World
Developer
PawelGorny
Posts: 150
Registered: ‎12-03-2012
My Device: PP

Re: Ripple vs Simulator - scale/css problem

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.

 

 

--
Regards,
Pawel Gorny
my apps: http://pawelgorny.com/
PGpgp, Your Reply, Anagrammatist, Texas Hold'em Odds Calculator, Contacts to CSV
If your issue has been solved, please resolve it by marking "Accept as Solution"
Developer
biggerCC
Posts: 270
Registered: ‎12-13-2010
My Device: PlayBook 16GB, BB10 Dev Alpha

Re: Ripple vs Simulator - scale/css problem

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).

- - -
My approved apps @ App World
J4y
Contributor
J4y
Posts: 27
Registered: ‎01-19-2013
My Device: Z10 Dev Edition, Playbook, every BB in-between

Re: Ripple vs Simulator - scale/css problem

[ Edited ]

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