Quasar 内置了一些工具来检测代码所运行平台的信息及能力。
TIP
根据您的需要，您可能还需要查看 Style & Identity > Visibility 页面，了解如何仅通过 CSS 实现相同的效果。但请注意，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 部分。
| Property | Type | Meaning |
|---|---|---|
Platform.is.mobile | Boolean | 代码是否运行在移动设备上？ |
Platform.is.cordova | Boolean | 代码是否运行在 Cordova 中？ |
Platform.is.capacitor | Boolean | 代码是否运行在 Capacitor 中？ |
Platform.is.nativeMobile | Boolean | 代码是否运行在原生移动端包装器（Cordova/Capacitor）中？ |
Platform.is.nativeMobileWrapper | String | 原生移动端包装器的名称（'cordova'、'capacitor' 或 undefined） |
Platform.is.electron | Boolean | 代码是否运行在 Electron 中？ |
Platform.is.desktop | Boolean | 代码是否运行在桌面浏览器上？ |
Platform.is.bex | Boolean | 代码是否运行在浏览器扩展中？ |
Platform.is.android | Boolean | 应用是否运行在 Android 设备上？ |
Platform.is.blackberry | Boolean | 应用是否运行在 Blackberry 设备上？ |
Platform.is.cros | Boolean | 应用是否运行在 Chrome OS 操作系统上？ |
Platform.is.ios | Boolean | 应用是否运行在 iOS 设备上？ |
Platform.is.ipad | Boolean | 应用是否运行在 iPad 上？ |
Platform.is.iphone | Boolean | 应用是否运行在 iPhone 上？ |
Platform.is.ipod | Boolean | 应用是否运行在 iPod 上？ |
Platform.is.kindle | Boolean | 应用是否运行在 Kindle 设备上？ |
Platform.is.linux | Boolean | 代码是否运行在 Linux 操作系统上？ |
Platform.is.mac | Boolean | 代码是否运行在 MacOS 操作系统上？ |
Platform.is.win | Boolean | 代码是否运行在 Windows 操作系统上？ |
Platform.is.winphone | Boolean | 代码是否运行在 Windows Phone 设备上？ |
Platform.is.playbook | Boolean | 代码是否运行在 Blackberry Playbook 设备上？ |
Platform.is.silk | Boolean | 代码是否运行在 Kindle Silk 浏览器中？ |
Platform.is.chrome | Boolean | 代码是否运行在 Google Chrome 浏览器中？ |
Platform.is.firefox | Boolean | 代码是否运行在 Firefox 浏览器中？ |
Platform.is.opera | Boolean | 代码是否运行在 Opera 浏览器中？ |
Platform.is.safari | Boolean | 代码是否运行在 Apple Safari 浏览器中？ |
Platform.is.vivaldi | Boolean | 代码是否运行在 Vivaldi 浏览器中？ |
Platform.is.edge | Boolean | 代码是否运行在 Microsoft Edge 浏览器中？ |
Platform.is.ie | Boolean | 代码是否运行在 Microsoft Internet Explorer 浏览器中？ |
Platform.is.webkit | Boolean | 代码是否运行在 Webkit 或基于 Webkit 的环境中？ |
Platform.has.touch | Boolean | 代码是否运行在支持触摸屏的设备上？ |
Platform.within.iframe | Boolean | 应用是否运行在 IFRAME 标签中？ |
TIP
运行在移动设备上代表着，可能运行在手机或者手表的浏览器内，并不代表着运行在 Cordova 内
关于 SSR 的注意事项
在 SSR 应用中只能使用$q.platform的形式，如果需要在 server 端使用 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 Boot File 或者 @quasar/app-webpack Boot File文件中访问到。 也可以在 @quasar/app-vite preFetch 或者 @quasar/app-webpack preFetch中访问到，ssrContext 会作为函数的参数，在上述文件的函数中访问。
这一切的原因是，在纯客户端应用中，每个用户都会在自己的浏览器中使用一个全新的应用实例。对于服务端渲染，我们也希望如此：每个请求都应有一个全新的、独立的应用实例，从而避免跨请求的状态污染。因此，Platform 需要分别绑定到每个请求。