04-23-2012 05:01 AM
I'm building an app that runs on 3 resolutions
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?
04-23-2012 05:26 AM
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?
04-25-2012 09:00 AM
>>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">