device-width and 320px and HTC Evo

[jscolton]

Hi,

I am trying to design a mobile app to have a width of 320px (height no so important - happy for it to vary).

I have read various articles including:
http://sunpig.com/martin/archives/20...el-ratios.html


...and noticed that setting the 'viewport' attribute with 'width=device-width' causes iphones and samsung phones to have a width of 320px.

I initially thought that this setting causes the browser to take the devices real width and divides it by the phone's pixel ratio, eg:
iphone3: pixel ratio:1, device-width: 320px so 320/1 = 320px.
iphone4: pixel ratio:2, device-width:640px so 640/2 = 320px
samsung 1: pixel ratio:1.5, device-width:480px so 480/1.5 = 320px.

But, HTV evo kills this theory as follows: pixel ratio:1.5, device-width:480px so 480/1.5 = 320px BUT in reality is has a reported width of 360px!

I was wondering if the author of your related article:

http://www.javascriptkit.com/dhtmltu...queries2.shtml

...or anyone else could explain to me why the HTC Evo gives this unexpected width when using 'width=device-width'?

Many thanks
Jeremy