BB10 JQM Theme renders very large UI in Simulator

[lumierephoto]

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:

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

Also, renders large UI in browser as well.

[jasondscott]

You need to remove the meta tag in your html file.

"Important note: The meta tag recommended by jQuery Mobile will need to be removed. This is a temporary issue which should be resolved shortly." from https://github.com/blackberry/jQueryMobile-BB10-Theme/blob/master/docs/README.md

Thanks for the post

[lumierephoto]

I assume you mean the meta tag for the viewport.

I removed all meta tags. Including:

     <meta charset="UTF-8">

I had the viewport rendered via Javascript mentioned on the BB Webworks website. I removed that too.:

var meta = document.createElement("meta");
meta.setAttribute('name','viewport');
meta.setAttribute('content','initial-scale='+ (1/window.devicePixelRatio) + ',user-scalable=no');
document.getElementsByTagName('head')[0].appendChild(meta);

Still, the UI is extra large.

[mdabydeen]

@lumierephoto are you using this with WebWorks? If so what version of the SDK? I can't reproduce this in the latest SDK release.

[lumierephoto]

@mdabydeen Yes, I'm using the latest version of the Webworks SDK. These are screenshots from the simulator,however, the UI renders very large in the browser as well.

I'm convinced that it has to do with the BB10 jQuery Mobile JS and CSS files because if I switch them out with my original JQM files, it renders normally even when compiled to the simulator. In fact, when I first tested out the SDK and the simulator (last week) I compiled this same app as a test with Phonegap and it rendered almost normally. There were a few rendering issues, but not this scaling issue.

I am very new to BB development, so I may be wrong.

[lumierephoto]

I followed this solution recommended by biggerCC here: http://supportforums.blackberry.com/t5/Web-and-WebWorks-Development/Ripple-vs-Simulator-scale-css-problem/m-p/2053603

BB10 Theme needs a specific viewport. At least this works for me in BB10 simulator.

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

Thanks @PawelGorny on the BB forums for leading me in the right direction!