平台检测 | Quasar Framework 中文网

平台检测

辅助程序内置于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.nativeMobile`	Boolean	代码是否在原生移动封装器（Cordova/Capacitor）中运行？
`Platform.is.nativeMobileWrapper`	String	原生移动包装器的名称（`'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 预取功能中，它被作为一个参数提供。

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