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)
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-pointerreturnscoarsethen 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
mobilecheck to use another library such asreact-device-detectorua-parser-jswhile 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: finefor desktop, evenpointer: 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 returningtrueon my Sony with Windows OS with a touchscreen. A friend of mine noticed something similar on Windows too so I understood it asmobilebeing true generally speaking on Windows.Note: it was with Ionic v5, I didn’t tried with v4
My workaround: adding a test for Windows