ブラウザサイズの取得 | 電網覚書

本記事のソースコードの利用によって生じた損害について、当方は一切の責任を負いません。ご自身の判断と責任のもとで参照・ご利用ください。

この記事は最終更新から3年以上経過しています。

ブラウザサイズを取得して、値を表示させブラウザが縦長なのか横長なのかを大まかに判定させる為に下記のコードをかいてみました。スマートフォン向けに使おうと思ったのですが、結局使いませんでした。ただ他に使う機会があるかもしれないので、備忘録として残しておこうと思います。

【css】

.get-windowSize {
    position: fixed;
    top: 100px;
    left: 30px;
    color: #000;
  }
  
  .get-windowSize-width,
  .get-windowSize-height {
    width: 200px;
  }

jQuery】

var timer = false;
  
    $(function() {
      //読み込み時実行
      setBg();
      //リサイズしたら実行
      $(window).resize(function(){
        if (timer !== false) {
          clearTimeout(timer);
        }
          timer = setTimeout(function() {
          setBg();
        }, 200);
      });
    });
  
  function setBg() {
  
    var winW = $(window).width();
    var winH = $(window).height();
  
    if(winW>=winH){
      //横長
      $('.tilt').text('横長');
      $("body").addClass("landscape");
    }else {
      //縦長
      $('.tilt').text('縦長');
      $("body").addClass("portrait");
    }//endif
  
  
    $('.get-windowSize-width').text('横'+winW);
    $('.get-windowSize-height').text('縦'+winH);
  
  }

【html】

<div class="get-windowSize">
    <p class="get-windowSize-width"></p>
    <p class="get-windowSize-height"></p>
    <p class="tilt"></p>
  </div>

サンプルはこちら