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
hakanson
Posts: 36
Registered: ‎04-06-2010
My Device: Bold 9700
My Carrier: AT&T

Did the 0.9.4 simulator change the device pixel ratio? Things got bigger.

[ Edited ]

My jQuery Mobile based app (which looked great), now doesn't look very good. Things got about 1/3 larger.

 

To make sure it wasn't me, I used the Browser app and looked at http://jquerymobile.com/demos/1.0a3/#docs/forms/forms-all.html and I see the same problems.  The navbar buttons and text are bigger, as well as less stuff fits on the screen.  I am guessing there was a change to something like the device pixel ratio.

 

Has anybody else seen this or can confirm what I am seeing?  I was feeling so good about doing a last verification of my app on the lastest simulator and SDK, and now I am not feeling that way.

 

0.9.3093.png

 

0.9.4

094.png

Please use plain text.
Contributor
bdev222
Posts: 27
Registered: ‎02-11-2011
My Device: Not Specified

Re: Did the 0.9.4 simulator change the device pixel ratio? Things got bigger.

 

 

I have also found a size change, but as I used fixed size fonts they are the same
size but my layout is all wrong now as if the screen it larger.

Checking at runtime I get a screen.availWidth 1280 and screen.availHeight 768 vs.
what I thought should be 1200x600. This explains the bad layout in the new simulator as
the display is still only 1200x600 so my scalars are all wrong.

 

In my web app html I set content="width=device-width" but I didn't set any VM display
size before and am not sure why we would to do it now.  Changing the width=1280 in my

index.html I get a good layout but this can't be the fix unless they are changing the
hardware resolution which I can't believe.

 

I will remove the VM and reinstall it again to see if there is any effect.

 

 

 

 

 

Please use plain text.
Developer
levidehaan
Posts: 49
Registered: ‎02-09-2011
My Device: Not Specified

Re: Did the 0.9.4 simulator change the device pixel ratio? Things got bigger.

Yeah it would be nice to get an answer to this question, especially if they are going to change the size again in the next version.

i dont want my app to be too small for users to read if they make it smaller again.

Please use plain text.
BlackBerry Development Advisor
tneil
Posts: 3,708
Registered: ‎10-16-2008
My Device: Z10
My Carrier: Rogers

Re: Did the 0.9.4 simulator change the device pixel ratio? Things got bigger.

We currently have people investigating this

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter
Please use plain text.
Contributor
hakanson
Posts: 36
Registered: ‎04-06-2010
My Device: Bold 9700
My Carrier: AT&T

Re: Did the 0.9.4 simulator change the device pixel ratio? Things got bigger.

[ Edited ]

So, I did some good old fashioned alert debugging in the Browser app (well, not good, but old), and put this on an .html page behind an onclick.

 

 

alert(window.outerWidth+"x"+window.outerHeight+" "+window.innerWidth+"x"+window.innerHeight)

 

and got: 1024x600 1024x512
but, when I add this html to the page:

 

 

<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">

and the inner values are now a factor of 1.33 less:  1024x600 768x384

 

However, to my surprise, window.devicePixelRatio is 1 on both cases.

 

Please use plain text.
Contributor
hakanson
Posts: 36
Registered: ‎04-06-2010
My Device: Bold 9700
My Carrier: AT&T

Re: Did the 0.9.4 simulator change the device pixel ratio? Things got bigger.

After I read through A take of two viewports I looked at some different properties:

window.outerWidth: 1024

window.outerHeight: 600

window.innerWidth: 1024

window.innerHeight: 512

document.body.clientWidth: 1024

document.body.clientHeight: 512

screen.width: 1280

screen.height: 768

 

With <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">

window.outerWidth: 1024

window.outerHeight: 600

window.innerWidth: 768

window.innerHeight: 384

document.body.clientWidth: 768

document.body.clientHeight: 384

screen.width: 1280

screen.height: 768

 

I guess the screen.width and .height are an artifact of the simulator needed to render the bezel, but it would be interesting to see what a real device reports.

 

If I had to guess at the "problem", I would say the QNXStageWebView is choosing to value device-width at 768 instead of 1024.  This probably looks better on some real websites on the internet and may make sense in the browser, but maybe not in WebWorks applications.

 

Try it for yourself with this HTML, but the checkbox to enable the viewport doesn't always take effect right away, and I had to double click around a bunch, and maybe focus in and out of the textarea to get it to reflow.

 

 

<!DOCTYPE html> 
<html> 
<head>
    <title>Viewport Test</title>
    <script type="text/javascript">
        function findDimensions() {
            var CRLF = String.fromCharCode(13) + String.fromCharCode(10),
                data = "window.outerWidth: " + window.outerWidth + CRLF +
                       "window.outerHeight: " + window.outerHeight + CRLF +
                       "window.innerWidth: " + window.innerWidth + CRLF +
                       "window.innerHeight: " + window.innerHeight + CRLF +
                       "document.documentElement.clientWidth: " + document.documentElement.clientWidth + CRLF +
                       "document.documentElement.clientHeight: " + document.documentElement.clientHeight + CRLF +
                       "screen.width: " + screen.width + CRLF +
                       "screen.height: " + screen.height;	
                document.getElementById("dimensions").value = data;
        }
        function toggleViewport() {
            var metas = document.getElementsByTagName('meta');
            if (metas && metas.length == 1) {
                (metas[0].parentNode).removeChild(metas[0]);
            } else {
                var metaViewport = document.createElement("meta");
                metaViewport.setAttribute("name", "viewport");
                metaViewport.setAttribute("content", "width=device-width, minimum-scale=1, maximum-scale=1");
                document.getElementsByTagName("head")[0].appendChild(metaViewport);
            }
            findDimensions();
            document.getElementById("dimensions").focus();
        }
    </script>
</head>
<body>
<p>
<input type="checkbox" value="X" onclick="toggleViewport()" /> Enable <code>&lt;meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"&gt;</code><br />
<input type="button" value="Find Dimensions" onclick="findDimensions()" /><br />
<textarea id="dimensions" rows="8" cols="80"></textarea>
</p>
</body>
</html>

 

 

Please use plain text.
Contributor
bdev222
Posts: 27
Registered: ‎02-11-2011
My Device: Not Specified

Re: Did the 0.9.4 simulator change the device pixel ratio? Things got bigger.

 

Based on all that info and my app behaviour I would guess the opposite that they increased the "device-width" and "device-height" to 1280x768 so that more web pages don't think it is a low res device (which it is at 1024x600).  One could test by building with the old SDK and running in the old sim but I haven't bothered.

 

With a 0 margin 0 padding format page, I can now use

<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">

and fetch the size via document.documentElement.clientWidth instead of screen.availWidth etc.

and everything is fine again.

 

Would still be good to hear this in some release notes, as even the demo program they provide sketchpad relies on screen.availWidth and so suffers the same issue.

 

For those of us doing some programming in device pixel space (not portable I know) it would
be good to know that later upgrades or features that may change the screen or pixel size can be
disabled so it won't break our apps.

 

 

 

 

 

 

 

Please use plain text.
Contributor
hakanson
Posts: 36
Registered: ‎04-06-2010
My Device: Bold 9700
My Carrier: AT&T

Re: Did the 0.9.4 simulator change the device pixel ratio? Things got bigger.

@tneil, any update?  Does the device-width now return a new value?

Please use plain text.
BlackBerry Development Advisor
tneil
Posts: 3,708
Registered: ‎10-16-2008
My Device: Z10
My Carrier: Rogers

Re: Did the 0.9.4 simulator change the device pixel ratio? Things got bigger.

From some conversations internally, it looks like default font sizes may have been changed.  this may be causing the affects that you are seeing.

 

There are others still looking into it.

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter
Please use plain text.
Developer
ProfHawking
Posts: 46
Registered: ‎02-16-2011
My Device: 8300>9000>9700>9900>Z10
My Carrier: Vodafone

Re: Did the 0.9.4 simulator change the device pixel ratio? Things got bigger.

Just to add that I am also having problems with the new SDK and Simulator.

 

I think there are more differences than just font size????

 

My app, working nicely on 0.9.3:

 

 

And on 0.9.4:

 

 

 

In mine, images, layouts, fonts etc all look too big, and I cant scroll properly. Also, the layout changes to vertical mode. (This is only supposed to happen in my app when the device is held portrait, ie height > width).

 

I don't really want to have to re-work the whole app again only to find that there is a bug in the simulator (or sdk) and its going to go back to how it was. In my opinion, the 0.9.3 layout was far better than this psuedo zoom'ed version....

 

Please use plain text.