问题:
问题:同一个网页在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>