Web and WebWorks Development

[zahirw]

I'm building an app that runs on 3 resolutions

1. 640x480
2. 480x320
3. 320x240

I'll be using media queries to swap out the style sheet based on the screen size. I'm starting with 640x480 and scaling lower towards 320x240.

When I build the html, build it using fuild layouts with a minimum of 640 as the width in the artwork psd but using 100% as the width in the html. 

When I run the 640x480 build on ripple, it appears fine, on the phone(9900) when I test on the browser, there is a horizontal scroll. On investigating further, it seems the innerwidth of the browser on the 9900 is only 356.

I'm confused as to whether the layout artwork should be with a basic resolution width for this particular resolution, 640 or 356?

[zahirw]

Quick update :

After removing the follwiong line from the html

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

 the layout now fits perfect on both the 9900 and the 9700.

So the question is, should we be designing layouts with 640 as the width or 356?

[zahirw]

Any clue on this?

[Pumano-]

i seen that bug too!

[zahirw]

So what's the best resolution to design for? 640 or 356?

[zahirw]

Seems the solution lies here http://supportforums.blackberry.com/t5/Web-and-WebWorks-Development/9900-9930-display-issues/m-p/128...

[astanley]

>>So the question is, should we be designing layouts with 640 as the width or 356?

It has to do with the increased screen resolution of the 9900.  Add "target density" to your viewport and the web engine will identify the actual screen width correctly:

<meta name="viewport" content="width=device-width,target-densitydpi=device-dpi,user-scalable=no,initial-scale=1.0">

[zahirw]

Yep, that's what I did. Thanks

[Pumano-]

Yes, thanks, it's solved that problem.