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
awjenning
Posts: 38
Registered: ‎08-06-2011
My Device: PlayBook
Accepted Solution

PlayBook Orientation issues

I am creating an HTML5 WebWorks application for PlayBook and I have been fighting issues with orientation changes. I now see why so many PlayBook apps, including Facebook, simply lock one orientation or the other. I know that in order to get a good solution to this problem I must describe it clearly. I talked to a couple of the RIM WebWorks guys at DevCon about this. I'm not sure that my description of the problem was clear enough for them to understand what I was describing, so they suggested I try it on the latest release of the WebWorks SDK. It is still a problem in WebWorks 2.2.0.5.  (On the OS 1.0.7.3312 and on OS 2.0.0.3778)

 

----------------------------------------------------

Portrait(OK) --> Landscape(OK) --> Portrait(NOT OK) --> Landscape(OK)

----------------------------------------------------

 

If a page is initially rendered in portrait and the orientation changes to landscape, it is treated the same as if you simply resized a browser window from 600x1024 to 1024x600. The font sizes and fixed pixel dimensions of objects are not effected at all. The page is simply re-rendered and flowed to the new screen dimensions. It works just like a browser window resize. This is predictable and good. 

 

Now... if you flip the device back to portrait mode everything on the page is made about 50% smaller. A <div> that was fixed at 300px wide appears as if it is only 150px  wide and the text within it is tiny. This is absolutely NOT what a browser does when you resize a 1024x600 window to 600x1024. A browser would continue to respect all font sizes and fixed sized elements. It would simply re-flow the page to the new dimensions.

 

This is unpredictable and bad because the element and font sizes in portrait mode are VARIABLE depending upon how the page was initially rendered. Portrait is rendered in the specified size the first time, BUT in a smaller size the second and subsequent times.

 

 

----------------------------------------------------

Landscape(OK) --> Portrait(NOT OK) --> Landscape(OK) --> Portrait(NOT OK)

----------------------------------------------------

 

If a page is initially rendered in landscape mode and the orientation changes to portrait everything on the page is made about 50% smaller. A div that was fixed at 300px wide appears as if it is only 150px wide and the text within it is tiny. As described above, this is NOT what a browser does when you resize a 1024x600 window to 600x1024.

 

Now... if you flip the device back to landscape everything is restored to the size that it was when it was originally rendered in landscape.

 

This sequence of normal -->small--> normal is at least predictable. But, it is still bad because it is not how a browser would operate under the same conditions.

 

In my opinion, the most desirable behavior would be to treat orientation changes like a browser treats window resizes. But, if you MUST shrink form elements in portrait mode than it should be done in a way that is 100% consistent. Please try the sample code below and let me know how I can get either behavior. I have attached the source you need to recreate this. Please try this on the PlayBook device. I don't know how the simulator behaves.

 

Index.html (launcher page)

 

<!DOCTYPE html>

<html style="background-color: #E0E0E0;">

    <head>    

        <title>Orientation Test</title>    

    </head>        

    <body>

        <br>

        <br>

        <br>

        <ol>

            <li>Test #1: <u>Hold this page in <strong>PORTRAIT</strong></u> and then... click the link below.</li>           

            <li>Test #2: <u>Hold this page in <strong>LANDSCAPE</strong></u> and then... click the link below.</li>           

        </ol>

           

        <a href="testflip.html">Click here and then flip orientation a few times</a>

    </body>

</html>

 

 

Testflip.html (page to change orientation with)

 

<!DOCTYPE html>

<html style="background-color: #E0E0E0;">

    <head>    

        <title>Orientation Test</title>    

    </head>        

    <body>

        <br>

        <br>

        <p>

            If I was <u>launched</u> in either mode your can probably still read this. But,

            if you change orientation now, you cannot go back to portrait and still read this.

        </p>

        <br>   

        <div style="width:300px; background-color: red; font-size: 20pt;">

            Lorem ipsum dolor sit amet, consectetur adipisicing elit,

            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

            Ut enim ad minim veniam, quis nostrud exercitation ullamco

            laboris nisi ut aliquip ex ea commodo consequat. Duis aute

            irure dolor in reprehenderit in voluptate velit esse cillum

            dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat

            non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

        </div>

       

         <a href="javascript&colon;javascript&colon;history.go(-1);">Back</a>

    </body>

</html>

Please use plain text.
Contributor
awjenning
Posts: 38
Registered: ‎08-06-2011
My Device: PlayBook

Re: PlayBook Orientation issues

After  hours of frustration I finally figured this one out. It is a viewport issue that needs to be worked around. I will post the solution here sometime on Monday. 

Please use plain text.
Developer
Pumano-
Posts: 215
Registered: ‎11-05-2011
My Device: Z10

Re: PlayBook Orientation issues

Hi. May you share your solution?
Please use plain text.
Contributor
awjenning
Posts: 38
Registered: ‎08-06-2011
My Device: PlayBook

Re: PlayBook Orientation issues

Sorry for slow repsonse. I have been extremely busy and I forgot that I had even posted the question here. In trying to solve this I tried many things. Most had to do with detecting orientation changes/window resizes and adjusting viewport width and height in repsonse to that. That method works okay but it is not necessary. The PlayBook gets the height and width confused at times and ends up rendering the viewport at 1024x1024. 

 

The simplest solution is to place the following tag in your page header:

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

 

Simply put... Tell the device to leave the scaling alone at all times.

 

I found that it is best not to try to use this meta tag's width or height attributes. The device gets confused if you do that. I tried it that way, both hard coded to pixel size, and using device-width and device-width keywords. I could not get consistent behavior using that technique. I also tried altering the meta viewport tag dynamically on orientation changes using javascript. That too is unpredictable but if you want to try it here is a sample:

 

$(WinElem).resize( function(){
	var viewport = WinElem.document.querySelector("meta[name=viewport]");
	var height = $(WinElem).height();
	var width = $(WinElem).width(); 	
    if( width > height ) {
        // changed to landscape                        
        viewport.setAttribute('content', 'width=1024, height=600, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0');                                                                               
    } else {
        // changed to portrait          
        viewport.setAttribute('content', 'width=600, height=1024, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0');                                                                                                                                                                           
    }
});                

 

 

 

Please use plain text.
Developer
Pumano-
Posts: 215
Registered: ‎11-05-2011
My Device: Z10

Re: PlayBook Orientation issues

Thanks!
Please use plain text.