bug: platform#is('desktop') returning true on new Pixel 7 phones

[lincolnthree]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x
• Nightly

Current Behavior

On new pixel 7 phones, when the devices screen resolution is set to factory defaults (e.g. "highest" / "smallest" or "make everything as small as possible to show as much as possible" ... max resolution), Ionic apps are reporting that the platform is 'desktop'.

If screen resolution is dropped down by one notch, the platform is properly reported as 'mobile'.

Not sure how best to report this, but this is what we're seeing.

Expected Behavior

The platform should be reported as 'mobile', not 'desktop'.

Steps to Reproduce

Run any ionic app on a Google Pixel 7 with default factory display settings. Platforms will contain 'desktop'.

Code Reproduction URL

No response

Ionic Info

mshark:topdecked-unified lincoln$ ionic info

Ionic:

   Ionic CLI                     : 6.20.1 (/Users/lincoln/.nvm/versions/node/v16.14.0/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 6.3.4
   @angular-devkit/build-angular : 14.2.8
   @angular-devkit/schematics    : 14.2.8
   @angular/cli                  : 14.2.8
   @ionic/angular-toolkit        : 7.0.0

Capacitor:

   Capacitor CLI      : 4.4.0
   @capacitor/android : 4.4.0
   @capacitor/core    : 4.4.0
   @capacitor/ios     : 4.4.0

Utility:

   cordova-res : not installed globally
   native-run  : 1.7.1

System:

   NodeJS : v16.14.0 (/Users/lincoln/.nvm/versions/node/v16.14.0/bin/node)
   npm    : 8.3.1
   OS     : macOS Monterey

Additional Information

None. Not sure if this issue is related: #24179

[liamdebeasi]

Thanks for the report. What is the result when you log window.matchMedia('(any-pointer:coarse)').matches in Chrome on your Pixel 7?

Similarly, if you log window.matchMedia('(pointer:coarse)').matches what is the result?

[lincolnthree]

Thanks @liamdebeasi, I'll need to get that phone back into my hands so I can try this. (I do not have one, but I can get access to one as needed.)

Anything else you can think of for me to record/test so I can do it all at once? (So I don't need to ask this person back over and over :) )

[liamdebeasi]

If you could also check none and fine for both any-pointer and pointer, that would be great. Thanks!

The isDesktop function negates the result of isMobile:

ionic-framework/core/src/utils/platform.ts

Line 92 in 57105d5

const isDesktop = (win: Window) => !isMobile(win);

isMobile checks if any-pointer:coarse matches on the device:

ionic-framework/core/src/utils/platform.ts

Line 90 in 57105d5

const isMobile = (win: Window) => matchMedia(win, '(any-pointer:coarse)');

This check should return true when a touch screen is present causing isDesktop to return false.

If any-pointer:coarse is returning false, then it could be that the device is incorrectly reporting the available pointers or something else is happening.

[lincolnthree]

Okay... I finally got my hands on a Pixel 7 (not pro) again:

These are reported both in Chrome and also in Capacitor w/Default factory settings,

• '(any-pointer:coarse)': false
• '(pointer:coarse)': false
• '(any-pointer:fine)': true
• '(pointer:fine)': true
• '(any-pointer:none)': false
• '(pointer:none)': false

And some extra debug info:

{"pixelRatio":2.625,"resolution":{"innerHeight":915,"outerHeight":915,"innerWidth":412,"outerWidth":412},"safeArea":{"top":"45px","bottom":"48px","left":"0px","right":"0px"}}

Versions:

Android 13
Chrome/WebView: 107.0.5304.105
Pixel 7 Build: TD1A.220804.031

[lincolnthree]

And for reference, as I'm sure you would expect, on my Pixel 6, it appears that the pointers are reported properly:

• '(any-pointer:coarse)': false
• '(pointer:coarse)': false
• '(any-pointer:fine)': true
• '(pointer:fine)': true
• '(any-pointer:none)': false
• '(pointer:none)': false

[liamdebeasi]

And for reference, as I'm sure you would expect, on my Pixel 6, it appears that the pointers are reported properly:

• '(any-pointer:coarse)': false
• '(pointer:coarse)': false
• '(any-pointer:fine)': true
• '(pointer:fine)': true
• '(any-pointer:none)': false
• '(pointer:none)': false

The Pixel 6 results look the same as the Pixel 7 results. Did you mean to copy something else?

Here are the results from my Pixel 4a:

• '(any-pointer:coarse)': true
• '(pointer:coarse)': true
• '(any-pointer:fine)': false
• '(pointer:fine)': false
• '(any-pointer:none)': false
• '(pointer:none)': false

---

I recommend filing some feedback on https://bugs.chromium.org/p/chromium/issues/list regarding this. I don't have access to a Pixel 7 but I will see if someone else on the team has one.

[liamdebeasi]

I am also able to reproduce this using Pixel 7 through browserstack on https://hover-pointer-media-query.glitch.me:

Pixel 6	Pixel 7

[lincolnthree]

Weird. Yeah looks like I pasted the wrong results for the P6. My pixel 6 shows the same as your 4a.

[lincolnthree]

I recommend filing some feedback on https://bugs.chromium.org/p/chromium/issues/list regarding this. I don't have access to a Pixel 7 but I will see if someone else on the team has one.

Yep, sigh.. will do on Monday.

[lincolnthree]

Filed: https://bugs.chromium.org/p/chromium/issues/detail?id=1384181

[ajgomezrivera]

We're getting the same behavior for pixel 7 and 7 Pro. is Desktop is returned true.

[lincolnthree]

@ajgomezrivera Thanks. Please go to the chromium issue and add your vote to that too if you don't mind. We need Google to know it's an issue :)

[jsBiztech]

Is there any update on above issue.
When I create build using Ionic 6 and capacitor in pixel 7 our app is running in desktop mode instead of pure native app.

Is there any way I can fix this on temporary basis?

[vaibhav65577]

For anyone who faces this issue, currently you can make temporary changes in app.module.ts and override methods which returns browser and mobile properties .

you can make changes in App.module file

    IonicModule.forRoot(
      {
      platform : {
        'desktop':(win)=>{
          return false
        },
        'mobile':(win)=>{
          return true
        }
      }
    })

[skidrow88]

I confirm on the Pixel 7 pro my app is acting like Desktop => isDesktop is returned true.

Thanks for @vaibhav65577 for your temporary fix, I will try.

Any capacitor permanent update expected ?

[ionitron-bot]

Thanks for the issue! This issue is being closed due to inactivity. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Thank you for using Ionic!