【Vue】【JavaScript】画面の高さを検知する方法

あきぞらです。

Vue.jsの開発をしていて、画面の高さを図りたい時がありました。

さらに、画面の高さが変わるタイミングも検知したい。

そんな時に使える方法を、今回は紹介していきます。

resizeイベントで高さの変更を検知

以下では、resizeイベントで高さの変更を検知しています。

画面の高さが変更になるたび、checkResizeが呼ばれます。

export default {
  mounted: function () {
    window.addEventListener('resize', this.checkResize)
  },
  methods: {
    checkResize: function () {
      // 画面の高さを取得
      console.log( window.innerHeight )
    }
}