Skip to main content

平台

平台服务可用于获取有关你当前设备的信息。你可以使用 platforms 方法获取与设备相关的所有平台信息，包括应用是否在平板电脑上查看，它是否在移动设备或浏览器上，以及具体的平台（iOS、Android 等）。你还可以获取设备的屏幕方向、是否使用从右到左的语言方向，以及更多其他信息。通过这些信息，你可以完全自定义你的应用以适应任何设备。

🌐 The Platform service can be used to get information about your current device. You can get all of the platforms associated with the device using the platforms method, including whether the app is being viewed from a tablet, if it's on a mobile device or browser, and the exact platform (iOS, Android, etc). You can also get the orientation of the device, if it uses right-to-left language direction, and much much more. With this information you can completely customize your app to fit any device.

用法​

🌐 Usage

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

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

  }
}

方法​

🌐 Methods

is​

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

参数​

🌐 Parameters

名称类型描述
platformNamePlatforms平台的名称。可用选项有 android、capacitor、cordova、desktop、electron、hybrid、ios、ipad、iphone、mobile、phablet、pwa、tablet

平台​

🌐 Platforms

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

🌐 Below is a table listing all the possible platform values along with corresponding descriptions.

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

自定义平台检测功能​

🌐 Customizing Platform Detection Functions

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

🌐 The function used to detect a specific platform can be overridden by providing an alternative function in the global Ionic config. Each function takes window as a parameter and returns a boolean.

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。如果应用在网页浏览器中运行，则当 DOM 准备好时，promise 将被解析。当应用在像 Cordova 这样的应用引擎中运行时，则在 Cordova 触发 deviceready 事件时，promise 将被解析。解析后的值是 readySource，它表示所使用的平台。

例如，当 Cordova 准备就绪时，解析的 ready 来源是 cordova。默认的 ready 来源值为 dom。readySource 很有用，如果根据应用运行的平台需要运行不同的逻辑。例如，只有 Capacitor 和 Cordova 可以执行状态栏插件，因此网页不应运行状态栏插件逻辑。
签名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

参数​

🌐 Parameters

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

事件​

🌐 Events

pause​

pause 事件在原生平台将应用置于后台时触发，通常是在用户切换到其他应用时。当 Cordova/Capacitor 应用被置于后台时会触发此事件，但在标准网页浏览器中不会触发。

🌐 The pause event emits when the native platform puts the application into the background, typically when the user switches to a different application. This event emits when a Cordova/Capacitor app is put into the background but doesn't fire in a standard web browser.

示例​

🌐 Examples

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

resize​

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

🌐 The resize event emits when the browser window has changed dimensions. This could be from a browser window being physically resized, or from a device changing orientation.

示例​

🌐 Examples

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

resume​

resume 事件在原生平台将应用从后台调出时触发。此事件在 Cordova/Capacitor 应用从后台调出时触发，但在标准网页浏览器中不会触发。

🌐 The resume event fires when the native platform pulls the application out from the background. This event emits when a Cordova/Capacitor app comes out from the background but doesn't fire in a standard web browser.

示例​

🌐 Examples

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

目录