2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

$(window).innerHeight()とwindow.screen.heightで挙動が違う件について|n'ω'`|

Last updated at Posted at 2016-04-26

こんにちは!今日も元気にお仕事しています!|n'ω'`|

test.js
        $(window).on('load resize',function() {
          var $h = $(window).innerHeight(), // <---
              h = window.screen.height; // <---
          // spの時のみ読み込み
          if ($w < 960) {
            iphoneCheck($h);
          }
        });
        function iphoneCheck(h) {
          var ua = navigator.userAgent.toLowerCase(),
              $t = $('.js_test_img').find('img'),
              $tw = $t.attr('width'),
              mini = function() { $t.attr('width', '90%'); },
              normal = function() { $t.attr('width', '100%'); };
          if(ua.indexOf('iphone') != -1) {
            // iphone 4 or iphone 5
            if ( h == 480 || h == 568 ) {
              mini();
            // クリア
            } else {
              normal();
            }
          } else {
            // 基本的にここ走ることはないですが、デバックツールで閲覧された時用にクリア
            if ($tw !== '100%') {
              normal();
            }
            return;
          }
        }

今回はこのコードを書いていく上で「ファ。。!!!?」となったことをメモします。
やりたかったことは、
・特定の画像の表示倍率をiphone4とiphone5で変える
・それ以外では戻す。
です。|n'ω'`|(定数で数字をいれているのは、ごめんなさい。

本題ですが、window.screen.height;でとった時にデバックツールで意図したサイズが返ってこなかった時がありました。
resizeイベントを走らせるたびに再取得しているので、デバイスをロテートさせたときにも走りますよね、と思っていたら、
走るは走るけど、

$(window).on('resize',function(){
var $h = $(window).innerHeight();
var h = window.screen.height;
console.log($h,h)
})

の返り値は、
773 773
1024 1024
773 773
839 1024
773 773
667 667
773 773
375 667
773 773
320 320
773 773
375 375
773 773
320 320
773 773
568 320
773 773
320 320
773 773
568 568
773 773
375 568
773 773
568 375
773 773
320 320
773 773
568 568
773 773
375 375
773 773
568 568
773 773
375 568
と太字のところに誤差が。。
innerHeightの方がロテートしたときも、しっかりとれているようにみえる。
そんなころころとデバイスを変えて、ロテートしてってのは、実際のユーザさんのデバイスではあんまり考えにくい挙動なのではあるけれど、デバックツールで閲覧されたときに「こ、こいつはロテートしてもかわんねえじゃないですかーー(^Д^)9m」っていうのが万が一にもあった場合に、「そこも考えましたし!」と伝えるための自己満足のための対策なのですが、、、、

原因(自分なりに出した

$(window).innerHeight();
表示領域の高さを取得します。
つまり、どれくらい表示できるサイズなのか、の取得
私たちが表示領域として使うことのできる範囲の特定ができる、ぽい。

window.screen.height;
参考:https://developer.mozilla.org/ja/docs/Web/API/Screen/height
参考:http://q.hatena.ne.jp/1165816475
「画面の高さを取得」
この、画面っていうのが、実にふわっとしているのですが、、、
スクリーンってついているから、あくまでそのデバイスの大きさ?をかえしてくれてるのかな、とおもったりしました。
ロテートしたときにうまく反映されないのは、そのせいかもしれないです。

いやー、、もやっとしてますね、、、|n'ω'`|

もし、原因をすぱっとわかる方がいらっしゃいましたらご教授いただけますと幸いです、、

[追記]
resize後に、値を取得するタイミングが違う疑惑が浮上。。。。!
window.screenオブジェクトの取得タイミングが、原因みたいな説が他のエンジニアの方と検証していて発覚しました。

2
0
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
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?