1

我有点困惑......我正在测量我网站的视口尺寸，以便我可以针对响应式网页设计对其进行优化。现在 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；

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

任何解释/帮助？

谢谢

4

0 回答 0