跳到主要内容
版本：v7

平台

Platform 服务可用于获取当前设备的信息。您可以使用 platforms 方法获取设备关联的所有平台，包括应用是否在平板电脑上查看、是否在移动设备或浏览器上，以及确切的平台（iOS、Android 等）。您还可以获取设备的方向、是否使用从右到左的语言方向等等。利用这些信息，您可以完全自定义您的应用以适配任何设备。

用法​

import { Platform } from '@ionic/angular';

@Component({...})
export class MyPage {
  constructor(public platform: Platform) {

  }
}

方法​

is​

描述根据用户所在的平台，is(platformName) 将返回 true 或 false。请注意，同一个应用可以对多个平台名称返回 true。例如，在 iPad 上运行的应用将对以下平台名称返回 true：mobile、ios、ipad 和 tablet。此外，如果应用从 Cordova 运行，则 cordova 将为 true。
签名is(platformName: Platforms) => boolean

参数​

名称类型说明
platformNamePlatforms平台名称。可用选项包括 android、capacitor、cordova、desktop、electron、hybrid、ios、ipad、iphone、mobile、phablet、pwa、tablet

平台​

下表列出了所有可能的平台值及其对应的描述。

平台名称描述
android运行 Android 的设备
capacitor运行 Capacitor 的设备
cordova运行 Cordova 的设备
desktop桌面设备
electron运行 Electron 的桌面设备
hybrid运行 Capacitor 或 Cordova 的设备
ios运行 iOS 的设备
ipadiPad 设备
iphoneiPhone 设备
mobile移动设备
mobileweb在移动设备中运行的 Web 浏览器
phablet平板手机设备
pwaPWA 应用
tablet平板设备

自定义平台检测函数​

可以通过在全局 Ionic 配置中提供替代函数来覆盖检测特定平台的函数。每个函数以 window 为参数并返回一个布尔值。

import { IonicModule } from '@ionic/angular';

@NgModule({
  ...
  imports: [
    BrowserModule,
    IonicModule.forRoot({
      platform: {
        /** The default `desktop` function returns false for devices with a touchscreen.
        * This is not always wanted, so this function tests the User Agent instead.
        **/
        'desktop': (win) => {
          const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(win.navigator.userAgent);
          return !isMobile;
        }
      },
    }),
    AppRoutingModule
  ],
  ...
})
type PlatformConfig = {
  android?: ((win: Window) => boolean) | undefined;
  capacitor?: ((win: Window) => boolean) | undefined;
  cordova?: ((win: Window) => boolean) | undefined;
  desktop?: ((win: Window) => boolean) | undefined;
  electron?: ((win: Window) => boolean) | undefined;
  hybrid?: ((win: Window) => boolean) | undefined;
  ios?: ((win: Window) => boolean) | undefined;
  ipad?: ((win: Window) => boolean) | undefined;
  iphone?: ((win: Window) => boolean) | undefined;
  mobile?: ((win: Window) => boolean) | undefined;
  mobileweb?: ((win: Window) => boolean) | undefined;
  phablet?: ((win: Window) => boolean) | undefined;
  pwa?: ((win: Window) => boolean) | undefined;
  tablet?: ((win: Window) => boolean) | undefined;
};

platforms​

描述根据您所在的设备，platforms 可以返回多个值。每个可能的值是平台的层级结构。例如，在 iPhone 上，它将返回 mobile、ios 和 iphone。
签名platforms() => string[]

ready​

描述当平台准备就绪且可以调用原生功能时返回一个 promise。如果应用在 Web 浏览器中运行，则 promise 将在 DOM 准备就绪时 resolve。当应用从 Cordova 等应用引擎运行时，promise 将在 Cordova 触发 deviceready 事件时 resolve。resolve 的值是 readySource，它表示所使用的平台。

例如，当 Cordova 准备就绪时，resolve 的 ready source 是 cordova。默认的 ready source 值将是 dom。readySource 在需要根据应用运行的平台执行不同逻辑时很有用。例如，只有 Capacitor 和 Cordova 可以执行状态栏插件，因此 Web 不应运行状态栏插件逻辑。
签名ready() => Promise<string>

isRTL​

描述返回此应用是否使用从右到左的语言方向。我们建议应用的 index.html 文件已经设置了正确的 dir 属性值，例如 <html dir="ltr"> 或 <html dir="rtl">。W3C：HTML 中的结构标记和从右到左文本
签名isRTL() => boolean

isLandscape​

描述如果应用处于横屏模式，返回 true。
签名isLandscape() => boolean

isPortrait​

描述如果应用处于竖屏模式，返回 true。
签名isPortrait() => boolean

width​

描述使用 window.innerWidth 获取平台视口的宽度。
签名width() => number

height​

描述使用 window.innerHeight 获取平台视口的高度。
签名height() => number

url​

描述获取当前 URL。
签名url() => string

testUserAgent​

描述如果表达式中包含在用户代理字符串中，返回 true。
签名testUserAgent(expression: string) => boolean

参数​

名称类型描述
expressionstring要在用户代理中检查的字符串

事件​

pause​

当原生平台将应用置于后台时（通常当用户切换到另一个应用时），pause 事件会触发。此事件在 Cordova/Capacitor 应用被置于后台时触发，但在标准 Web 浏览器中不会触发。

示例​

this.platform.pause.subscribe(async () => {
  alert('Pause event detected');
});

resize​

当浏览器窗口尺寸发生变化时，resize 事件会触发。这可能是由于浏览器窗口被物理调整大小，或设备方向发生变化。

示例​

this.platform.resize.subscribe(async () => {
  alert('Resize event detected');
});

resume​

当原生平台将应用从后台拉回前台时，resume 事件会触发。此事件在 Cordova/Capacitor 应用从后台恢复时触发，但在标准 Web 浏览器中不会触发。

示例​

this.platform.resume.subscribe(async () => {
  alert('Resume event detected');
});

目录

编辑此页