如何使用Ionic 4检测平台

Question

如何使用Ionic 4检测浏览器和移动web平台，因为当我在桌面浏览器中尝试以下代码时，它不符合'core'条件。

如何在Ionic 4中检测浏览器和移动Web平台？当我在桌面浏览器上尝试以下代码时，它未满足“core”条件。

if (this.platform.is('core')) {
    alert('core platform');
  } else {
    alert('something else');
  }

当我在Chrome开发者工具中进行调试时，根据下面的快照，它显示'android'平台。

请问有谁能帮我检测Ionic 4中的平台或提供替代方法？

- Darshana

---

你能发布完整的代码吗？ - Pradnya Sinalkar

@PradnyaSinalkar 我已经编辑了我的问题。 - Darshana

桌面浏览器平台？你能举个例子吗？ - Junior Gantin

我正在尝试询问如何使用Ionic 4检测核心或浏览器平台？ - Darshana

Answer 1

根据我的使用情况，我想要一种可以区分 native 和 browser 平台的工具。也就是说，我的应用程序是在浏览器还是本地移动设备上运行。这是我设计的服务：

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


type CurrentPlatform = 'browser' | 'native';

@Injectable({
  providedIn: 'root'
})
export class CurrentPlatformService {

  private _currentPlatform: CurrentPlatform;

  constructor(private platform: Platform) {
    this.setCurrentPlatform();
  }

  get currentPlatform() {
    return this._currentPlatform;
  }

  isNative() {
    return this._currentPlatform === 'native';
  }
  isBrowser() {
    return this._currentPlatform === 'browser';
  }

  private setCurrentPlatform() {
    // Are we on mobile platform? Yes if platform is ios or android, but not desktop or mobileweb, no otherwise
    if (
        this.platform.is('ios')
        || this.platform.is('android')
        && !( this.platform.is('desktop') || this.platform.is('mobileweb') ) ) {
      this._currentPlatform = 'mobile';
    } else {
      this._currentPlatform = 'browser';
    }
  }
}

- Leonel Elimpe

---

本地和浏览器之间有什么区别？谢谢。 - M. Mariscal

Answer 2

目前Ionic 4支持平台检测。以下代码适用于我。

import { Platform } from '@ionic/angular';
...
constructor(private platform: Platform) {}
...
ngOnInit() {
   this.platform.ready().then(() => {
      if (this.platform.is('android')) {
           console.log('android');
      } else if (this.platform.is('ios')) {
           console.log('ios');
      } else {
           //fallback to browser APIs or
           console.log('The platform is not supported');
             }
      }}

- Duc Quang

---

你是如何导入它的？ - WJA

我已经添加了示例代码，您可以参考上面的内容。 - Duc Quang

Answer 3

以下链接可能会对您有所帮助：
https://forum.ionicframework.com/t/how-to-determine-if-browser-or-app/89149/16 或者您可以使用以下方法：

public isDesktop() {
    let platforms = this.plt.platforms();
    if(platforms[0] == "core" || platforms[0] == "mobileweb") {
        return true;
    } else {
        return false;
    }
}

- Pradnya Sinalkar

---

谢谢您的回答。请问您能告诉我如何在Ionic 4中检测'mobileweb'平台吗？ - Darshana

在调试时，我在浏览器中得到了“android”平台。我已经更新了我的问题并附上了快照。 - Darshana

你正在连接一个安卓设备并在检查模式下进行调试吗？ - Pradnya Sinalkar

你应该提到你的代码是为IONIC 3而设计的，而你提供的链接指向IONIC 3+4。 - zhuhang.jasper

你们这个在IONIC 4中怎么导入啊？ - WJA

Answer 4

Ionic-4平台特定值

前往- node_modules@ionic\angular\dist\providers\platform.d.ts

     Platform Name   | Description                        |
 * | android         | on a device running Android.       |
 * | cordova         | on a device running Cordova.       |
 * | ios             | on a device running iOS.           |
 * | ipad            | on an iPad device.                 |
 * | iphone          | on an iPhone device.               |
 * | phablet         | on a phablet device.               |
 * | tablet          | on a tablet device.                |
 * | electron        | in Electron on a desktop device.   |
 * | pwa             | as a PWA app.                      |
 * | mobile          | on a mobile device.                |
 * | desktop         | on a desktop device.               |
 * | hybrid          | is a cordova or capacitor app.     |

- Anand Acharya

Answer 5

您使用的逻辑是正确的逻辑。

问题出在ionic 4上，它返回错误的值。

问题已经在ionic存储库中发布：https://github.com/ionic-team/ionic/issues/15165 与平台相关的另一个问题['android']也是一个bug，并且已经在这里报告了：https://github.com/ionic-team/ionic/issues/15051

- ashfaq.p

Answer 6

如果您仍在ionic4 / cordova上遇到困难，我使用以下方法解决了它：

import {Device} from '@ionic-native/device/ngx'

只需将它添加到您的app.modules中，并在需要找到它的任何地方运行this.device.platform，以给出一个想法，从这个简单的代码在Web和APK上的输出

console.log(this.platform.platforms());
console.log(this.device.platform);

is this:

Running on web (desktop and mobile)
["android", "phablet", "cordova", "mobile", "hybrid"]
browser

Running android local (apk)
["android", "cordova", "desktop", "hybrid"]
Android

现在我可以正确地使用浏览器或移动设备的插件，我的情况是图像加载和裁剪。

完整说明可以在https://www.damirscorner.com/blog/posts/20171124-DetectingWhereIonicAppIsRunning.html找到。

- Camilo Casadiego

Answer 7

只需要这样做： 首先导入

import {Platform } from 'ionic-angular';

// >> Then init the platform like this:

 private platform: Platform,

     if(this.platform.is('ios')==true){
        //ios PlatForm
        }else{
        //Android PlatForm
     }

- Bienfait Rukundo

Answer 8

如果您在 Cordova 中使用 Ionic，获取平台的最准确方法是从 window 对象 获取 cordova.platformId。请参见以下内容：

• 在类组件之外声明窗口

  declare let window: any

• 然后使用下面的代码检查平台：

  // 桌面和移动（iOS、Android 和 Windows）浏览器平台

  const isBrowserPlatform = window.cordova.platformId === 'browser'

  // iOS 平台

  const isIOSPlatform = window.cordova.platformId === 'ios'

  // Android 平台

  const isAndroidPlatform = window.cordova.platformId === 'android'

- John Wilfred

Answer 9

如果要检测 Web 平台，您应该使用 Bowser。我在 Ionic 4 中使用它来检测浏览器平台，即它是 Safari 还是 Chrome。

步骤 1：您需要在项目中安装 Bowser。

npm install bowser@2.7.0 --save-exact

步骤2：然后您需要在想要使用它的.ts页面中导入它。假设是home.ts

import Bowser from "bowser";

步骤3：然后您需要编写登录以检查浏览器平台，放在home.ts的一个函数中。

checkBrowserPlatform() {
  const browser = Bowser.getParser(window.navigator.userAgent);
  const browserName = browser.getBrowserName();
    console.log(browserName);
  }

通过调用 checkBrowserPlatform() 函数，您可以了解当前浏览器的名称。

- Tahseen Quraishi

Answer 10

Ionic 4 / Capacitor

我已经编写了一个类似于以下的服务：

detect-platform.service.ts

import { Injectable } from '@angular/core';
import { Platform } from '@ionic/angular';
import { find } from 'lodash';

@Injectable({
    providedIn: 'root'
})
export class DetectPlatformService {

    isDevice: boolean = false;

    constructor(
        private platform: Platform, ) { }

    setPlatform(): void {

        const platforms: string[] = this.platform.platforms();
        const platform: string = find(platforms, (p: string) => {
            return p === 'capacitor';
        });

        this.isDevice = platform ? true : false;
    }   

}

注意：由于我使用Ionic 4/Capacitor，如果在设备上运行，则返回true，否则返回false。

- Sampath