LoginSignup
25
24

More than 5 years have passed since last update.

iOS8 safariではviewportが解釈されるよりも前にJavaScriptが実行されるらしい

Last updated at Posted at 2015-03-08

したがって、スマートフォンサイトでよくあるように、viewportで以下のように設定していた場合、

  <meta name="viewport" content="width=device-width">

window.innerHeightwindow.innerWidthの値が意図したように取得できない。

実検

html
<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>
javascript
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解釈のタイミングの問題だと推測してみたが、実際のところこの結果が何を意味するのか私は正確には理解していない。諸賢のご意見をうかがいたい。

25
24
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
25
24