跳到主要內容
版本：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

參數​

名稱類型描述
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在行動裝置中執行的網頁瀏覽器
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。如果應用程式是從網頁瀏覽器中執行，則當 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

參數​

名稱類型描述
運算式字串要在使用者代理中檢查的字串

事件​

pause​

當原生平台將應用程式放入背景時（通常是在使用者切換到不同的應用程式時），會發出 pause 事件。當 Cordova/Capacitor 應用程式放入背景時，會發出此事件，但在標準網頁瀏覽器中不會觸發。

範例​

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

resize​

當瀏覽器視窗的尺寸變更時，會觸發 resize 事件。這可能是因為瀏覽器視窗被實際調整大小，或裝置改變方向所致。

範例​

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

resume​

當原生平台將應用程式從背景拉回時，會觸發 resume 事件。當 Cordova/Capacitor 應用程式從背景回到前景時，會觸發此事件，但在標準網頁瀏覽器中不會觸發。

範例​

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

目錄

編輯此頁面