画面幅を取得する方法によって生じる不具合 - JavaScript

JavaScriptで画面幅を取得する方法はいくつかありますね。

詳しくはこちらのサイトでまとめられています。

 

今回は、その取得方法によっては予期せぬ不具合を招く恐れがあるので、それについて解説します。

window.innerWidthやwindow.outerWidthは危険

例えば、画面幅のサイズによって条件を出し分ける場合は、以下のように書くかと思います。

 

if(画面幅を取得するプロパティなど > 375){
  // 処理など
}

 

この際に、window.innerWidthやwindow.outerWidthを使っていると、iPhoneで予期せぬ不具合が起きる場合があります。

（恐らくAndroidでも発生すると思います）

 

iPhoneは、「設定」からWebサイトの大きさを変えることができます。

デフォルトは100%になっているので、iPhone7（画面幅375px）でwindow.innerWidthを実行すると当然375が返ってきます。

しかし、この倍率を上げていると、例えば125%の場合、window.innerWidthで返ってくる値は300になってしまいます。

これは、ページの表示倍率を上げている分、画面幅が小さくなってしまうからです。

 

ユーザーの設定により返ってくる値が変動するのはよろしくないので、この場合はwindow.innerWidthではなくscreen.widthを使いましょう。

screen.widthを使えば、ページの拡大倍率を変更しても同じ値が返ってきます。

まとめ

今回は「window.innerWidthとscreen.widthのページの拡大倍率」を例に挙げましたが、このようなことが他のプロパティでも起こる可能性は十分にあります。

なので、ユーザーの起因により不具合が起きそうな処理は気をつけて書くようにしましょう。