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
Posts: 25
Registered: ‎12-09-2012
My Device: Z10

Issue adapting to screen size - always "zoomed out"

[ Edited ]

Hey,

I am having this issue:

My app looks fine like this on all platforms:

nowebworks.png

 

But on Blackberry (with webworks) it looks like:

 

webworks.jpg

 

Get this issue on Z10 and Q10. If I remove all references to webworks it works just fine!

But I need webworks (1)!

 

Any ideas? Thanks in advance!

 

Edit: Tried all kinds of <meta name="viewport" > but I dont see any changes ....

Retired
Posts: 1,382
Registered: ‎07-02-2009
My Device: BlackBerry Bold 9900
My Carrier: Bell

Re: Issue adapting to screen size - always "zoomed out"

The solution to this does lie within the viewport META element, however as this article describes, you will need to generate its value at runtime using the following code:

 

 

<head>
    <script>
	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);
   </script>
</head>

 

Follow me on Twitter: @n_adam_stanley
-------------------------------------------------------------------------------------------------------------------------
Your app doesn't work? Use BlackBerry remote web inspector to find out why.
Developer
Posts: 25
Registered: ‎12-09-2012
My Device: Z10

Re: Issue adapting to screen size - always "zoomed out"

Tranks for that. I have seen that before, But it is not working for me. No change at all. Any other ideas? Thanks.
Retired
Posts: 1,382
Registered: ‎07-02-2009
My Device: BlackBerry Bold 9900
My Carrier: Bell

Re: Issue adapting to screen size - always "zoomed out"

Are you using a 3rd party library / framework that is setting its own viewport?  If so there may be a conflict.

I find it odd that the scaling issue happens with the introduction of the webworks.js file.  There should be no UI interference from that library.  Are you using bbUI.js as well?

 

Otherwise, suggest opening up remote web inspector, load the 'Elements' panel and checking the right column to see if there are any rogue CSS styles that are modifying layout in your page.

Follow me on Twitter: @n_adam_stanley
-------------------------------------------------------------------------------------------------------------------------
Your app doesn't work? Use BlackBerry remote web inspector to find out why.
Retired
Posts: 1,382
Registered: ‎07-02-2009
My Device: BlackBerry Bold 9900
My Carrier: Bell

Re: Issue adapting to screen size - always "zoomed out"

Are you using a 3rd party library / framework that is setting its own viewport?  If so there may be a conflict.

I find it odd that the scaling issue happens with the introduction of the webworks.js file.  There should be no UI interference from that library.  Are you using bbUI.js as well?

 

Otherwise, suggest opening up remote web inspector, load the 'Elements' panel and checking the right column to see if there are any rogue CSS styles that are modifying layout in your page.

Follow me on Twitter: @n_adam_stanley
-------------------------------------------------------------------------------------------------------------------------
Your app doesn't work? Use BlackBerry remote web inspector to find out why.
Developer
Posts: 25
Registered: ‎12-09-2012
My Device: Z10

Re: Issue adapting to screen size - always "zoomed out"

Hey,

I am using jQuery Mobile.

But it's really odd that this issue does not come up on other plattforms (Android/iOs).

Its just happening in BB10 ...