平台检测(Platform Detection)

内置的帮助程序用于检测代码运行的平台(及其功能):

// For usage inside a Vue component JS:
this.$q.platform.is.mobile

// or usage inside a Vue component template:
$q.platform.is.cordova

// Only for usage outside a Vue component you need to import it:
import { Platform } from 'quasar'
属性 类型 含义
Platform.is.mobile 布尔 代码是否在移动设备上运行?
Platform.is.cordova 布尔 代码是否在Cordova内运行?
Platform.is.electron 布尔 代码是否在Electron内运行?
Platform.is.desktop 布尔 代码是否在桌面浏览器上运行?
Platform.is.chromeExt 布尔 代码是否在Chrome扩展的环境运行?
Platform.has.touch 布尔 代码是否在支持触摸的屏幕上运行?
Platform.within.iframe 布尔 该应用是否在IFRAME内运行?

注意
在移动设备上运行意味着您可以在移动设备(手机或平板电脑)上运行此代码,但使用浏览器,而不是用Cordova包装。

其他Platform.is特定属性:
android, blackberry, cros, ios, ipad, iphone, ipod, kindle, linux, mac, playbook, silk, chrome, opera, safari, win (Windows), winphone (Windows Phone) 等等…

在Linux桌面计算机上运行Chrome时的示例:

// Describing Platform.is
{
chrome: true,
desktop: true,
linux: true,
name: "chrome",
platform: "linux",
version: "47.0.2526.80",
versionNumber: 47,
webkit: true
}

用法

假设我们想要基于代码运行的平台渲染不同的组件或DOM元素。 我们想在桌面上展示一些东西,并在移动设备上展示其他东西,我们会这样做:

<div v-if="$q.platform.is.desktop">
I'm only rendered on desktop!
</div>

<div v-if="$q.platform.is.mobile">
I'm only rendered on mobile!
</div>

<div v-if="$q.platform.is.electron">
I'm only rendered on Electron!
</div>

注意
根据您的需要,您可能还需要检查设计助手>可见性页面,了解如何使用CSS单独实现相同的效果。 这后一种方法将呈现您的DOM元素或组件,而不管平台如何,所以基于应用程序的性能做出明智的选择 。