device.js检测设备平台信息的js库

3,287 阅读1分钟

问题:

问题:同一个网页在PC上时展示二维码,在手机上时不展示二维码(相当于根据是手机还是电脑展示不同的样式问题)

项目使用的技术栈

vue+ts

device.js库

device.js是一个可以用来检测设备的平台、操作系统和方向的JavaScript库。device.js 通过操作系统(比如 iOS,安卓,黑莓,Windows,Firefox OX),方向(横屏或者竖屏),类型(平板或者移动设备),来为设备添加 CSS Class,并且它还提供了一些Javascript 函数用来判断设备。github地址(有使用教程)

安装

npm install current-device

main.ts全局引入

import './assets/device/current-device.min'; // device.js 获取用户设备信息

变量

  private device = require('current-device').default; // 获取用户设备信息
  private isDesktop: any; // 判断是否是电脑

方法

this.isDesktop = this.device.desktop();

DOM结构

        <div class="qrcode" v-if="this.isDesktop">
          <img v-if="this.ENV === 'development' || this.ENV === 'pre'" src="../../assets/images/dev_qrcode.png" class="qrcode-pic">
          <img v-if="this.ENV === 'production'" src="../../assets/images/pro_qrcode.png" class="qrcode-pic">
          <p class="qrcode-tip">手机扫描</p>
          <p class="qrcode-tip">在线生成</p>
        </div>

参考文章

大神写的更为详细的文章