JavascriptのScreenオブジェクト

画面の幅に応じてコンテンツの幅も変わるスクリプトを書いていたのですが、今日突然、Chromeのみコンテンツ幅がおかしい事になったので調査してみた。

screen = {
  width: $(window).width(),
  height: $(window).height()
}

結論から言うと、このscreenオブジェクトの名前が問題だった。

Chromeで

console.log(screen)

をして内容を確認してみると、以下のものが出力

Screen = {
  availHeight: 1058,
  availLeft: 49,
  availTop: 22,
  availWidth: 1871,
  colorDepth: 24,
  height: 1080,
  pixelDepth: 24,
  width: 1871
}

尚、firefoxでは、これ

screen = {
  width: 1460,
  height: 460
}

screenという変数名は使わないほうがいいのかもしれない