移动设备视口大小和设备显示规格不对应

Question

我有点困惑......我正在测量我网站的视口尺寸，以便我可以针对响应式网页设计进行优化。现在iPhone 4的显示器规格为： 640x960 ，HTC欲望（Bravo）的显示器规格为 480x800 。现在，当在这些设备上查看视口大小时，以下是由以下函数给出的渲染视口尺寸（我对宽度感兴趣...）：

$(window).resize(function(){
            $('#viewport').empty().append($(window).width(), 'x', $(window).height())
        }).resize();

人像（手机的正常位置）：     iPhone视口宽度： 320px;     HTC视频宽度： 320px;

横向（当设备侧旋时）：   iPhone视口宽度： 480px;    HTC视口宽度： 533px;

现在这有点令人困惑。为什么它不符合设备的技术显示规格？此外，在this article中，（顺便说一句，这是一个很好的）说，设计智能手机的横向和纵向尺寸， 320px min和480px max 应该足以满足所有（大多数）智能手机的需求在这里，iPhone 4属于那个类别而不是HTC ...它的533px景观宽度......？所以在HTC上，从纵向旋转到风景时我的网站看起来很糟糕......

任何解释/帮助？

谢谢