javascript - 窗户尺寸因方向而异

Question

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

<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... }