Quasar 内置了帮助程序来检测代码运行所在的平台（及其功能）。
提示
根据您的需要，您可能还想查看 样式与标识 > 可见性 页面，了解如何仅使用 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.nativeMobile | 布尔值 | 代码是否在原生移动包装器（Cordova/Capacitor）中运行？ |
Platform.is.nativeMobileWrapper | 字符串 | 原生移动包装器的名称（'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.firefox | 布尔值 | 代码是否在 Firefox 浏览器中运行？ |
Platform.is.opera | 布尔值 | 代码是否在 Opera 浏览器中运行？ |
Platform.is.safari | 布尔值 | 代码是否在 Apple Safari 浏览器中运行？ |
Platform.is.vivaldi | 布尔值 | 代码是否在 Vivaldi 浏览器中运行？ |
Platform.is.edge | 布尔值 | 代码是否在 Microsoft Edge 浏览器中运行？ |
Platform.is.ie | 布尔值 | 代码是否在 Microsoft Internet Explorer 浏览器中运行？ |
Platform.is.webkit | 布尔值 | 代码是否在 Webkit 或基于 webkit 的浏览器上运行？ |
Platform.has.touch | 布尔值 | 代码是否在支持触摸的屏幕上运行？ |
Platform.within.iframe | 布尔值 | 应用程序是否在 IFRAME 中运行？ |
提示
在移动设备上运行表示您的代码可以在移动设备（手机或平板电脑）上运行，但使用的是浏览器，而不是 Cordova 包装器。
关于 SSR 的说明
在构建 SSR 时，仅使用 $q.platform 形式。 或者，在服务器端，以下是如何使用它的另一个示例
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 预取 功能中，其中它作为参数提供。
这样做的原因是在仅限客户端的应用程序中，每个用户都将在其浏览器中使用应用程序的新实例。 对于服务器端渲染，我们希望相同：每个请求都应该具有一个新的、隔离的应用程序实例，以便没有跨请求状态污染。 因此，Platform 需要单独绑定到每个请求。