窗口尺寸因方向而异

Question

所以我正在制作一个Web应用程序，它将使用元标记在iphone的主屏幕上运行：

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="HandheldFriendly" content="true" />

我有这个javascript代码来处理方向更改：

var orientationChange = function(e){
    if(typeof mainContainer === 'undefined'){
        mainContainer = document.querySelector('.main-container');
    }
    alert(window.innerWidth + ' * ' + window.innerHeight);
};

window.addEventListener('orientationchange', orientationChange, false);
window.addEventListener('load', orientationChange, false);

当设备处于纵向模式时，我

320(w) * 460(h)

当设备处于横向模式时，我得到了

480(w) * 300(h)

为什么会这样？ 有没有办法保证我会得到一致的结果？

Answer 1

如果您只想根据特定分辨率更改个人资料，则应使用CSS：

 @media (min-width: 320px) { look one way... }
 @media (min-width: 240px) { look another way... }