跳到主要内容
版本: v8

平台

平台服务可用于获取有关当前设备的信息。您可以使用 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

参数​

名称类型描述
platformName平台平台的名称。可用选项包括 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 准备好时解析。当应用在 Cordova 等应用程序引擎中运行时，则该 Promise 将在 Cordova 触发 deviceready 事件时解析。解析的值是 readySource，它表示所使用的平台。

例如，当 Cordova 准备好时，解析的 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');
});

内容

编辑此页面