Web and WebWorks Development

[codewarrior_777]

Compared to other native apps in the simulator, my BB 10 jQuery Mobile app renders a very large UI.

My App:

Native BB 10 App:

Also, renders large in browser i.e. Safari, Chrome. I'm using the BB10 CSS and JS files from the Github repo and have not altered them. 

I've tried looking for a solution online but have not found one. 

Any one else have this issue? 

[erikjohnzon]

It looks like your scaling is off. Have you set any scaling in your base HTML document?

[codewarrior_777]

Do you mean in the meta tag for the viewport? I removed it according to the advice from another advisor on Github.

Didn't solve the issue. 

This jQuery Mobile app is an HTML5 Web App which I'm porting to BB 10. I didn't have any rendering issues before. Only when I switched out the BB10 JS and CSS. 

Also, the BB10 JQM Theme Kitchen Sink has the same problem when I launch in the browser. I haven't tried to compile it to the simulator, but the UI is very large there as well and that is where I getting the BlackBerry-JQM-all.css and BlackBerry-JQM-all.js.

[erikjohnzon]

The easiest way for me to debug is for you to send me a bar -d file OR a zip file. I can try it out and see if I can replicate the behaviour in Safari and Chrome. My email is below.

[PawelGorny]

I had similar problem. Probably you must change viewport metadata.

Please check:

http://supportforums.blackberry.com/t5/Web-and-WebWorks-Development/Ripple-vs-Simulator-scale-css-pr...

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

It solved the problem for me, good luck

[codewarrior_777]

I followed this solution recommended by biggerCC here:

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

 

Thanks @PawelGorny for leading me in the right direction!