この内容は古いバージョンです。最新バージョンを表示するには、戻るボタンを押してください。
バージョン:1
ページ更新者:guest
更新日時:2019-08-25 09:45:52

タイトル: 画面サイズの取得方法
SEOタイトル: 【Vue.js】画面サイズの取得方法

この記事の要点
  • Vue.js でブラウザの画面サイズを取得する方法
  • 基本: window.innerWidth / window.innerHeightdata に保持
  • mountedwindow.addEventListener('resize', ...) を登録、beforeDestroy で解除
  • タッチデバイス対応やレスポンシブ分岐に使う

 

<template>

  <div>

    {{ windowWidth }}

    {{ windowHeight }}

  </div>

</template>

<script>

export default {

  data() {

    return {

      windowWidth: window.innerWidth,

      windowHeight: window.innerHeight,

    }

  },

  methods: {

    getWindowSize: function() {

      this.windowWidth = window.innerWidth;

      this.windowHeight = window.innerHeight;

    }

  },

  mounted() {

    window.addEventListener('resize', this.getWindowSize);

  },

}

</script>