ionic-framework: 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

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Reactions: 7
  • Comments: 16 (2 by maintainers)

Most upvoted comments

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!

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).

I’m chiming in here to report the same issue with touch screen 2-in-1 laptops - they get detected as “mobile” rather than “desktop”, which caused a decent amount of confusion during testing.

The root cause seems to be some faulty assumptions in https://github.com/ionic-team/ionic/blob/master/core/src/utils/platform.ts

“desktop” is defined as “not mobile” and “mobile” is defined as anything that matches the media query any-pointer: coarse ( https://developer.mozilla.org/en-US/docs/Web/CSS/@media/any-pointer )

It seems that a decent alternative might be any-pointer: fine for desktop, even pointer: fine.

For me, using Dell XPS 15 7590 with TouchScreen I get from platform.platforms() ["mobile", "mobileweb"]

Any workaround?

I just faced this one today to, platform.is('mobile') was returning true on my Sony with Windows OS with a touchscreen. A friend of mine noticed something similar on Windows too so I understood it as mobile being true generally speaking on Windows.

Note: it was with Ionic v5, I didn’t tried with v4

My workaround: adding a test for Windows

export function isWindows(): boolean {
  if (!window || !navigator) {
    return false;
  }

  const a: string = navigator.userAgent || navigator.vendor || (window as any).opera;

  return /windows/i.test(a);
}