プラットフォーム

isPlatform

isPlatform メソッドは、アプリが特定のプラットフォームで実行されているかどうかをテストするために使用できます。

import { isPlatform } from '@ionic/vue';

isPlatform('ios'); // returns true when running on a iOS device

ユーザーが使用しているプラットフォームに応じて、isPlatform(platformName) は true または false を返します。同じアプリが複数のプラットフォーム名に対して true を返す場合があることに注意してください。たとえば、iPad から実行されているアプリは、プラットフォーム名 mobile、ios、ipad、および tablet に対して true を返します。さらに、アプリが Cordova から実行されている場合は、cordova は true になります。

getPlatforms

getPlatforms メソッドは、アプリが現在どのプラットフォームで実行されているかを判断するために使用できます。

import { getPlatforms } from '@ionic/vue';

getPlatforms(); // returns ["iphone", "ios", "mobile", "mobileweb"] from an iPhone

使用しているデバイスに応じて、getPlatforms は複数の値を返すことができます。それぞれの可能な値は、プラットフォームの階層です。たとえば、iPhone では、mobile、ios、iphone を返します。

プラットフォーム

以下は、すべての可能なプラットフォーム値と対応する説明を一覧表示した表です。

プラットフォーム名	説明
android	Android を実行しているデバイス
capacitor	Capacitor を実行しているデバイス
cordova	Cordova を実行しているデバイス
desktop	デスクトップデバイス
electron	Electron を実行しているデスクトップデバイス
hybrid	Capacitor または Cordova を実行しているデバイス
ios	iOS を実行しているデバイス
ipad	iPad デバイス
iphone	iPhone デバイス
mobile	モバイルデバイス
mobileweb	モバイルデバイスで実行されている Web ブラウザ
phablet	ファブレットデバイス
pwa	PWA アプリ
tablet	タブレットデバイス

プラットフォーム検出関数のカスタマイズ

特定のプラットフォームを検出するために使用される関数は、グローバルな Ionic 設定 で代替関数を指定することでオーバーライドできます。各関数はパラメータとして window を受け取り、ブール値を返します。

createApp(App).use(IonicVue, {
  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;
    },
  },
});

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;
};