bug: getPlatforms() returning incorrect platforms

Bug Report

Ionic version: [x] 4.11.5 (React)

Current behavior: Using getPlatforms() on 2 Windows full-size laptops yielded: Laptop 1 (Chrome): [“phablet”, “mobile”, “mobileweb”] Laptop 1 (Firefox): [“mobile”, “mobileweb”] Laptop 2 (Chrome): [“mobile”, “mobileweb”]

Laptop 1 is a Dell Precision M3800 Laptop 2 is a standard issue corporate Windows machine at a Fortune 100 company (not sure the make/model)

Expected behavior: I would expect a full size computer (laptop) to have “desktop” as one of its platforms and would expect NOT to see “mobile”, “mobileweb”, or “phablet”.

Steps to reproduce: I made a StackBlitz that simply shows the output of getPlatforms(), so using it on various machines should expose the issue (below).

Related code: https://stackblitz.com/edit/ionic-v4-11-5-getplatforms

Other information: I do NOT see this issue on MacOS, only Windows (only tested Windows 10 as well).

Ionic info:

Ionic:

   Ionic CLI       : 5.4.6 (/Users/evan/.config/yarn/global/node_modules/ionic)
   Ionic Framework : @ionic/react 4.11.5

Capacitor:

   Capacitor CLI   : 1.3.0
   @capacitor/core : 1.3.0

Utility:

   cordova-res : 0.6.0 (update available: 0.8.1)
   native-run  : not installed

System:

   NodeJS : v12.10.0 (/usr/local/Cellar/node/12.10.0/bin/node)
   npm    : 6.11.3
   OS     : macOS High Sierra

[liamdebeasi]

Thanks for the additional information everyone. The criteria for a “mobile” device in Ionic is whether or not a device has any “coarse pointing device”. To be more specific, we use the any-pointer CSS media feature to detect this: https://github.com/ionic-team/ionic-framework/blob/7315e0157b917d2e3586c64f8082026827812943/core/src/utils/platform.ts#L92

If any-pointer returns coarse then there is a pointing device of limited accuracy (such as a touch) and so we assume that the device is a mobile device.

This is not ideal for laptops with a touchscreen. As a result, we have added the ability to customize platform detection in the upcoming Ionic 6 release. In other words, you can override the mobile check to use another library such as react-device-detect or ua-parser-js while still using the same Ionic Platform API. This will allow you to get the platform correct on these laptops with touchscreens.

Additionally, we have an example for how to customize this mobile detection that may be helpful for many developers here. See the links below for examples:

Angular: https://beta.ionicframework.com/docs/angular/platform#customizing-platform-detection-functions React: https://beta.ionicframework.com/docs/react/platform#customizing-platform-detection-functions Vue: https://beta.ionicframework.com/docs/vue/platform#customizing-platform-detection-functions

We are keeping an eye on what kinds of devices are being used with the platform API and will make other changes as needed to ensure developers can get the correct platform reported. I am going to close this issue as the main issue will be resolved by using this new platform detection feature in Ionic 6.

If you are interested in getting started with the Ionic 6 Release Candidate, please see https://github.com/ionic-team/ionic-framework/blob/next/BETA.md. Thanks!

[SmallhillCZ]

I believe the problem is here: https://github.com/ionic-team/ionic-framework/blob/b0d53ca73619585671d8cf4dc24e47f826495a0a/core/src/utils/platform.ts#L91-L95

All in one comuputers report both (any-pointer:coarse) and (any-pointer:fine), because they can be operated by finger (coarse) or mouse (fine).

Unfortunately, Ionic then chooses only by presence of (any-pointer:coarse).