読者です 読者をやめる 読者になる 読者になる

つばさのーと

つばさの日常を綴るのーと

jQueryでウインドウの横幅を取得する際に気を付けること

f:id:tsubasa123:20170110201226j:plain

 

こんにちは、つばさ(@tsubasa123)です。

 

最近、はてなブログのカスタマイズを研究するにあたって、レスポンシブデザインのあれこれを学ぶ機会が結構ありまして。

 

ブレイクポイントを調べて対応コードを書く際にウインドウサイズを取得する必要があるのですが、いつも適当にググって最初に引っかかったやつをなんとなく使っていました。ですが最近はカスタマイズするたびにググっていて、非常に効率が悪い、というかなんかカスタマイズコードに一貫性がなくなってきたのでちょっと調べてみることにしました。

 

ものすごい初歩的なことしか書いていませんが、カスタマイザーの方、よければご覧ください。

 

jQueryには3つのメソッドが用意されている

 

.width() | jQuery API Documentation

.innerWidth() | jQuery API Documentation

.outerWidth() | jQuery API Documentation

 

上記の3つのメソッドを使うことができます。普段何気なく使っていたのはwidth()メソッドでした。

 

違いは?という疑問にも公式の画像がしっかり答えてくれていました。これはわかりやすいのでくっつけて引用しておきます。

 

f:id:tsubasa123:20170110200913j:plain

 

はい、こんな感じ。

 

  • width()メソッドは純粋なコンテンツ幅
  • innerWidth()メソッドはコンテンツ幅 + パディング
  • outerWidth()メソッドはコンテンツ幅 + パディング + ボーダー
  • outerWidth(true)とするとさらにマージンも含まれる

 

こーゆーことですね。勉強になりました。

 

#hoge {
    width: 200px;
    height: 200px;
    padding: 5px;
    border: 1px solid #333;
    margin: 3px;
}

 

このようなボックスをCSSで指定していた場合、

 

console.log($('#hoge').width()); // 200
console.log($('#hoge').innerWidth()); // 210
console.log($('#hoge').outerWidth()); // 212
console.log($('#hoge').outerWidth(true)); // 218

 

ただし、最近はbox-sizing: border-box;を指定しているケースが多いのでちょっと考えることが多くなるかもしれません。

 

#hoge {
    width: 200px;
    height: 200px;
    padding: 5px;
    border: 1px solid #333;
    margin: 3px;
    box-sizing: border-box;
}

 

このように指定されていると、

 

console.log($('#hoge').width()); // 188
console.log($('#hoge').innerWidth()); // 198
console.log($('#hoge').outerWidth()); // 200
console.log($('#hoge').outerWidth(true)); // 206

 

このような実行結果になるので注意が必要です。

 

ウインドウ幅はどうなるのか

 

結論から言うと、スクロールバーの有無で結果が違うようです。スクロールバーがある場合、outerWidth()だけ実行結果が異なり、スクロールバーが存在しない場合と同じ結果を返してきました。スクロールバーも含めたウインドウサイズを取得できる、ということでしょうか。

 

逆にwidth()innerWidth()はスクロールバーの幅を減じた値を返してくれているのかな、だとするとこれはこれで便利かもしれない。

 

jQueryではないですが、window.innerWidthというプロパティを参照してウインドウサイズを取得するケースもよく見かけます。先のメソッドたちと実行結果を比べてみましたが、スクロールバーがある場合はouterWidth()の実行結果と同じ値になりました。

 

私的結論

 

ブレイクポイントに応じて処理を切り替えるような処理を書く場合はouterWidth()を使ったほうが安全そうかな。ちょっと調査が甘いですが、レガシーなIEを無視ならwindow.innerWidthもありだと思います。

 

さいごに

 

ちょっとカスタマイズ疲れが見えてきたので簡単なネタにしました。ちょっと燃え尽き気味ですね。新しいカスタマイズネタを考えねば。

 

ではでは、最後までお付き合いいただきありがとうございました。