平台检测(Platform Detection)
内置的帮助程序用于检测代码运行的平台(及其功能):
// For usage inside a Vue component JS: |
属性 | 类型 | 含义 |
---|---|---|
Platform.is.mobile | 布尔 | 代码是否在移动设备上运行? |
Platform.is.cordova | 布尔 | 代码是否在Cordova内运行? |
Platform.is.electron | 布尔 | 代码是否在Electron内运行? |
Platform.is.desktop | 布尔 | 代码是否在桌面浏览器上运行? |
Platform.is.chromeExt | 布尔 | 代码是否在Chrome扩展的环境运行? |
Platform.has.touch | 布尔 | 代码是否在支持触摸的屏幕上运行? |
Platform.within.iframe | 布尔 | 该应用是否在IFRAME内运行? |
注意
在移动设备上运行意味着您可以在移动设备(手机或平板电脑)上运行此代码,但使用浏览器,而不是用Cordova包装。
其他Platform.is特定属性:android
, blackberry
, cros
, ios
, ipad
, iphone
, ipod
, kindle
, linux
, mac
, playbook
, silk
, chrome
, opera
, safari
, win
(Windows), winphone
(Windows Phone) 等等…
在Linux桌面计算机上运行Chrome时的示例:// Describing Platform.is
{
chrome: true,
desktop: true,
linux: true,
name: "chrome",
platform: "linux",
version: "47.0.2526.80",
versionNumber: 47,
webkit: true
}
用法
假设我们想要基于代码运行的平台渲染不同的组件或DOM元素。 我们想在桌面上展示一些东西,并在移动设备上展示其他东西,我们会这样做:
<div v-if="$q.platform.is.desktop"> |
注意
根据您的需要,您可能还需要检查设计助手>可见性页面,了解如何使用CSS单独实现相同的效果。 这后一种方法将呈现您的DOM元素或组件,而不管平台如何,所以基于应用程序的性能做出明智的选择 。