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)

なぜこれが起こるのですか？
一貫した結果が得られることを保証する方法はありますか?