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
Contributor
Posts: 18
Registered: ‎03-22-2013
My Device: Playbook
My Carrier: N/A
Accepted Solution

Problem with screen size of my app in BlackBerry 10 emulator

[ Edited ]

Greetings, I have a problem with the BlackBerry emulator 10 and is as follows:

When I run my app in the emulator ripple, this looks good and all content is complete, however, when I run the app in the BlackBerry 10 emulator the app  looks as if it had a very large zoom level of predefined way and only see a part of the app.

 

With the emulator controller I have changed the zoom level to 70%, but still does not work.

 

Here I post the two pictures:

 

1.png

2.png

Retired
Posts: 245
Registered: ‎09-21-2012
My Device: Q10
My Carrier: Virgin

Re: Problem with screen size of my app in BlackBerry 10 emulator

Have you checked this link on how to set theviewport properly on your HTML page?

 

- http://supportforums.blackberry.com/t5/Web-and-WebWorks-Development/How-to-set-up-the-viewport-for-a...

 

@erikjohnzon
erjohnson@blackberry.com
Contributor
Posts: 18
Registered: ‎03-22-2013
My Device: Playbook
My Carrier: N/A

Re: Problem with screen size of my app in BlackBerry 10 emulator

[ Edited ]

Yeah, I've already checked that, but still doesn't works.
Thanks for your answer!

Developer
Posts: 1,229
Registered: ‎03-20-2011
My Device: Playbook, Z10 LE, Dev Alpha B, 2x Dev Alpha C
My Carrier: 3, Orange, Vodafone

Re: Problem with screen size of my app in BlackBerry 10 emulator

[ Edited ]

One half-assed answer coming up

 

var dpr = 1; // To set the meta on a real device to get 1:1 pixels

if(typeof window.devicePixelRatio != 'undefined') // Does device support devicePixelRatio?
    {
    dpr = window.devicePixelRatio;
    }

if(dpr) // Set up the right meta
    {
    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); // Inject meta }

 This flawlessly works but must be placed in the <head> of the document BEFORE anything else

 

Direct JS is used to avoid any library load issues

   
It wont work in ripple but works perfectly on every device I have tried

 

As mentioned the code above just needs wrapping in script tags and placing as high up the HTML of index.html as you can get it - just after <title> is my fave location before any CSS or JS

 

There are extensions to this - script injection I like to keep my code clean




Click the like button if you find my posts useful!
Retired
Posts: 1,382
Registered: ‎07-02-2009
My Device: BlackBerry Bold 9900
My Carrier: Bell

Re: Problem with screen size of my app in BlackBerry 10 emulator

+1

 

Also make sure that you don't have multiple viewport elements defined in your app.  If so, keep only the one that is set dynamically based on devicePixelRatio.

Follow me on Twitter: @n_adam_stanley
-------------------------------------------------------------------------------------------------------------------------
Your app doesn't work? Use BlackBerry remote web inspector to find out why.
Retired
Posts: 1,561
Registered: ‎04-12-2010
My Device: BlackBerry Z10
My Carrier: Bell

Re: Problem with screen size of my app in BlackBerry 10 emulator

@diegoadrada: Did the above resolve your issue? If so, can you please mark the solution for future visitors to this thread? If not, can you please provide a Web Inspector view of the application within the simulator that shows the <head> element and all defined <meta> tags?


Erik Oros | @WaterlooErik | eoros@blackberry.com | Developer Issue Tracker

If a reply has answered your question, please click Accept as Solution to help other visitors in the future.
Highlighted
Contributor
Posts: 18
Registered: ‎03-22-2013
My Device: Playbook
My Carrier: N/A

Re: Problem with screen size of my app in BlackBerry 10 emulator

Thank you very much to all of you for your help, the @peardox answer works very well.