vueでモバイル判定をする

backham
技術

ユーザーエージェントで判定

isMobile.js

ライブラリを追加

yarn add ismobilejs

テンプレートで出し分けしたい場合

  <template>
    <div v-if="isMobile.phone">
      <div>モバイルで表示</div>
    </div>
  </template>
  import isMobile from "ismobilejs";
  export default {
    data:()=>{
      isMobile
    }
  }

レスポンシブで判定

vue-mq

ライブラリを追加

yarn add vue-mq

テンプレートで出し分けしたい場合

  <template>
    <div v-if="$mq==='sp'">
      <div>モバイルで表示</div>
    </div>
  </template>
  <script>
  import Vue from "vue";
  import VueMq from "vue-mq";

  const breakpoints = {
    sp: 400,
    pc: 1024
  };
  Vue.use(VueMq, { breakpoints });
  </script>