Quasar 內建了 Helpers，用於偵測程式碼正在執行的平台 (及其功能)。
提示
根據您的需求，您可能也想查看樣式 & 識別 > 可見性頁面，了解如何僅使用 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 preFetch 或 @quasar/app-webpack preFetch 功能中使用，它會以參數形式提供。
所有這些的原因是，在僅限用戶端的應用程式中，每個使用者都將在其瀏覽器中使用應用程式的全新實例。 對於伺服器端渲染，我們也希望如此：每個請求都應該有一個全新的、隔離的應用程式實例，以便不會發生跨請求狀態污染。 因此，Platform 需要分別繫結到每個請求。