したがって、スマートフォンサイトでよくあるように、viewportで以下のように設定していた場合、
<meta name="viewport" content="width=device-width">
window.innerHeightやwindow.innerWidthの値が意図したように取得できない。
実検
<body>
<script type="text/javascript">
(function(){
//即時関数で取得
document.write('<p>window.innerHeight(instant): <span>'+ window.innerHeight + 'px</span></p>');
document.write('<p>window.innerWidth(instant): <span>'+ window.innerWidth + 'px</span></p>');
})();
</script>
<!-- DOMContentLoaded -->
<p>window.innerHeight(DOMcontentLoaded): <span id="a_1"></span>px</p>
<p>window.innerWidth(DOMcontentLoaded): <span id="a_2"></span>px</p>
<!-- window.onload -->
<p>window.innerHeight(onload): <span id="b_1"></span>px</p>
<p>window.innerWidth(onload): <span id="b_2"></span>px</p>
</body>
document.addEventListener( "DOMContentLoaded", function(){
var a1 = document.getElementById('a_1');
a1.innerText = window.innerHeight;
var a2 = document.getElementById('a_2');
a2.innerText = window.innerWidth;
}, false );
window.onload = function () {
var b1 = document.getElementById('b_1');
b1.innerText = window.innerHeight;
var b2 = document.getElementById('b_2');
b2.innerText = window.innerWidth;
};
結果は以下の通り。
閲覧環境は、iOS8.1.3 iPhone5S Mobile Safari
window.innerHeight(instant): 1409px
window.innerWidth(instant): 980px
window.innerHeight(onload): 460px
window.innerWidth(onload): 320px
window.innerHeight(DOMcontentLoaded): 460px
window.innerWidth(DOMcontentLoaded): 320px
このように、読み込みを待たずに即時にJavaScriptを実行した場合だけ、width=device-widthが効いてない状態の値を取得しているようだ。
これはなかなかに衝撃的である。
同じ端末のChromeで確認した場合には、即時実行(instant)した場合でもロードを待ってから実行したのと同じ値が取得できた。
また、Android端末（android4.0.4 標準ブラウザ Galaxy S2）でも、全て同じ値だった。
iOS7以前ではどうだったかまでは確認できてないが、おそらくは即時実行させても同じ値を取得したのではないかと思われる。（iOS8だけで発生していた不具合に、本件を原因と見立てた対策をしたところ問題が解消したため。）
この結果から、iOS8のmobile safariのviewport解釈のタイミングの問題だと推測してみたが、実際のところこの結果が何を意味するのか私は正確には理解していない。諸賢のご意見をうかがいたい。