平台检测

辅助程序内置于Quasar中,用于在运行代码的上下文中检测平台(及其功能)。

TIP

根据您的需要,您可能还需要查看风格&特性 > 可见性 页面以了解如何仅使用CSS来实现相同的效果。后一种方法将渲染您的DOM元素或组件,而不管平台如何,所以基于应用程序的性能做出明智的选择 。

用法

Vue组件JS中的用法:

import { useQuasar } from 'quasar'

setup () {
  const $q = useQuasar()

  $q.platform.is.mobile
}

Vue组件模板中的用法:

$q.platform.is.cordova

在Vue组件之外使用它时必须导入它:

import { Platform } from 'quasar'

Platform.is本身返回一个包含当前平台详细信息的对象。 例如,在MacOS桌面计算机上运行Chrome时,Platform.is会返回类似以下信息:

{
  chrome: true,
  desktop: true,
  mac: true,
  name: "chrome",
  platform: "mac",
  version: "70.0.3538.110",
  versionNumber: 70,
  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>



属性

Platform对象可以使用以下属性。 尽管如此,这并不是一个详尽的清单。 有关详细信息,请参阅下面的API部分。

属性类型含义
Platform.is.mobile布尔代码是否在移动设备上运行?
Platform.is.cordova布尔代码是否在Cordova内运行?
Platform.is.capacitor布尔代码是否在Capacitor内运行?
Platform.is.nativeMobileBoolean代码是否在原生移动封装器(Cordova/Capacitor)中运行?
Platform.is.nativeMobileWrapperString原生移动包装器的名称('cordova', 'capacitor', 或 undefined)。
Platform.is.electron布尔代码是否在Electron内运行?
Platform.is.desktop布尔代码是否在桌面浏览器上运行?
Platform.is.bex布尔代码是否在浏览器扩展中运行?
Platform.is.android布尔应用是否在Android设备上运行?
Platform.is.blackberry布尔应用是否在Blackberry设备上运行?
Platform.is.cros布尔应用是否在具有Chrome OS操作系统的设备上运行?
Platform.is.ios布尔应用是否在iOS设备上运行?
Platform.is.ipad布尔应用是否在iPad上运行?
Platform.is.iphone布尔应用是否在iPhone上运行?
Platform.is.ipod布尔应用是否在iPod上运行?
Platform.is.kindle布尔应用是否在Kindle设备上运行?
Platform.is.linux布尔代码是否在具有Linux操作系统的设备上运行?
Platform.is.mac布尔代码是否在具有MacOS操作系统的设备上运行?
Platform.is.win布尔代码是否在具有Windows操作系统的设备上运行?
Platform.is.winphone布尔代码是否在Windows Phone设备上运行?
Platform.is.playbook布尔代码是否在Blackberry Playbook设备上运行?
Platform.is.silk布尔代码是否在Kindle Silk浏览器中运行?
Platform.is.chrome布尔代码是否在Google Chrome浏览器中运行?
Platform.is.opera布尔代码是否在Opera Phone浏览器中运行?
Platform.is.safari布尔代码是否在Apple Safari浏览器中运行?
Platform.is.edge布尔代码是否在Microsoft Edge浏览器中运行?
Platform.is.ie布尔代码是否在Microsoft Internet Explorer浏览器中运行?
Platform.has.touch布尔代码是否在支持触摸的屏幕上运行?
Platform.within.iframe布尔该应用是否在IFRAME内运行?

TIP

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

关于SSR的注意事项

构建SSR时,只使用$q.platform形式。 如果你需要使用import { Platform } from 'quasar'(在服务器端),那么你需要这样做:

import { Platform } from 'quasar'

// you need access to `ssrContext`
function (ssrContext) {
  const platform = process.env.SERVER
    ? Platform.parseSSR(ssrContext)
    : Platform // otherwise we're on client

  // platform is equivalent to the global import as in non-SSR builds
}

ssrContext@quasar/app-vite启动文件@quasar/app-webpack启动文件中可用。还有在@quasar/app-vite 预取@quasar/app-webpack 预取功能中,它被作为一个参数提供。

所有这一切的原因是,在仅限客户端的应用程序中,每个用户都将在其浏览器中使用该应用程序的新实例。 对于服务器端渲染,我们要求也是一样的:每个请求都应该有一个新的,隔离的应用程序实例,以便没有交叉请求状态污染。 因此平台需要单独绑定到每个请求。

API