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
New Developer
HINOTORI
Posts: 9
Registered: ‎02-06-2013
My Device: PlayBook

Resizing the jQueryMobile BB10 Theme for desktop browsers and PlayBook

The goal sounds simple: Let the browser resize the jQueryMobile BB10 Theme for the optimal display resolution of every device.

 

Unfortunately that doesn't work in an acceptable way. I can not make the theme flexible with a modified WebWorks viewport script, because the theme contains fixed CSS sizes:

(function(){
	var cssPixelRatio = 2.24;
	var head = document.getElementsByTagName('head')[0];
	var meta = document.createElement('meta');
	var scale = (Math.round((window.devicePixelRatio / cssPixelRatio) * 100) / 100);
	meta.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no, width=device-width');
	meta.setAttribute('name', 'viewport');
	head.appendChild(meta);
})();

 

The other way of resizing the viewport works for the PlayBook but not for desktop browsers:

<meta name="viewport" content="user-scalable=no, width=1280" />

 

Does someone know an easy approach to solve the problem except with custom CSS?

.LowerCase { } .Names { } #for { } .CSS { } .Classes { } #are { } .BadStyle { }
New Developer
HINOTORI
Posts: 9
Registered: ‎02-06-2013
My Device: PlayBook

Re: Resizing the jQueryMobile BB10 Theme for desktop browsers and PlayBook

Well, there are even more issues. When I use the second approach, rotation in portrait mode mixes up the overflow tab menu on the PlayBook. Looks like I have to fix all the things with custom CSS. :smileysad:
.LowerCase { } .Names { } #for { } .CSS { } .Classes { } #are { } .BadStyle { }