Quasar 内置了辅助方法，用于检测代码运行的平台（及其功能）。

¥Helpers are built into Quasar to detect the Platform (and its capabilities) within the context of which the code is running.

用法(Usage)

¥Usage

在 Vue 组件 JS 中的用法：

¥Usage inside a Vue component JS:

import { useQuasar } from 'quasar'

setup () {
  const $q = useQuasar()

  $q.platform.is.mobile
}

在 Vue 组件模板中的用法：

¥Usage inside a Vue component template:

$q.platform.is.cordova

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

¥You must import it when you use it outside of a Vue component :

import { Platform } from 'quasar'

Platform.is 本身返回一个包含当前平台详细信息的对象。例如，在 MacOS 台式机上运行 Chrome 时，Platform.is 将返回类似以下内容：

¥Platform.is by itself returns an object containing details about the current platform. For example when running Chrome on a MacOS desktop machine, Platform.is would return something similar to:

{
  chrome: true,
  desktop: true,
  mac: true,
  name: "chrome",
  platform: "mac",
  version: "70.0.3538.110",
  versionNumber: 70,
  webkit: true
}

现在，假设我们想要根据代码运行的平台渲染不同的组件或 DOM 元素。我们希望在桌面上显示一些内容，在移动设备上显示其他内容。我们将按如下方式进行：

¥Now, let’s say we want to render different components or DOM elements, based on the platform that the code is running under. We want to show something on desktop and something else on mobile. We would proceed like this:

<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>

属性(Properties)

¥Properties

以下属性可用于 Platform 对象。但这并非详尽的列表。有关更多详细信息，请参阅下面的 API 部分。

¥The following properties are available to the Platform object. It’s not an exhaustive list though. See the API section below for more details.

关于服务器渲染的说明(Note about SSR)

¥Note about SSR

构建 SSR 应用时，请仅使用 $q.platform 表单。或者，在服务器端时，这是另一个如何使用它的示例：

¥When building for SSR, use only the $q.platform form. Alternatively, when on server-side, this is one more example of how you can use it:

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 Boot File 或 @quasar/app-webpack Boot File 中使用。在 @quasar/app-vite preFetch 或 @quasar/app-webpack preFetch 功能中，它作为参数提供。

¥The ssrContext is available in @quasar/app-vite Boot File or @quasar/app-webpack Boot File. And also in the @quasar/app-vite preFetch or @quasar/app-webpack preFetch feature, where it is supplied as a parameter.

这样做的原因是，在纯客户端应用中，每个用户都会在其浏览器中使用应用的新实例。对于服务器端渲染，我们想要的是相同的：每个请求都应该有一个全新的、独立的应用实例，这样就不会出现跨请求状态污染。因此 Platform 需要单独绑定到每个请求。

¥The reason for all this is that in a client-only app, every user will be using a fresh instance of the app in their browser. For server-side rendering we want the same: each request should have a fresh, isolated app instance so that there is no cross-request state pollution. So Platform needs to be bound to each request separately.