Why is Ionic Platform showing Laptops as Mobile/Tablet?

jdiapice · November 18, 2021, 2:42pm

We have a an angular Ionic app that renders differently for Mobile and Desktop. We are experiencing issues with users on Microsoft Surface and Surface Pro rendering the Mobile version of the site from any browser they are using on their laptop. The Platform is outputting either Mobile MobileWeb or Tablet Mobile MobileWeb.

Hills90210 · November 18, 2021, 3:08pm

You may want to change the title, sounds like a troll post.

Tommertom · November 18, 2021, 5:16pm

Good question- I took liberty to rephrase the title assuming it attracks more eyes this way. Please apologize if I am wrong.

josemarsc-dev · November 19, 2021, 11:31am

You can use Capacitor Device Plugin or use css media queries to stylish the app based on screen size.

jdiapice · November 19, 2021, 1:51pm

thats not the issue… the issue is that Ionics Platform Service is reporting a Surface and Surface Pro when operating in any web browser as a Mobile Tablet. I am asking why that is being reported as a Mobile device when its a laptop?

Tommertom · November 19, 2021, 5:57pm

If you want to know why, I suggest you to look into the source code of the platfrom service on github.

github.com

ionic-team/ionic-framework/blob/615dcc04617507e92908bd5d3927ea42eff1622e/core/src/utils/platform.ts


export type Platforms = keyof typeof PLATFORMS_MAP;

interface IsPlatformSignature {
  (plt: Platforms): boolean;
  (win: Window, plt: Platforms): boolean;
}

export const getPlatforms = (win?: any) => setupPlatforms(win);

export const isPlatform: IsPlatformSignature = (winOrPlatform: Window | Platforms | undefined, platform?: Platforms) => {
  if (typeof winOrPlatform === 'string') {
    platform = winOrPlatform;
    winOrPlatform = undefined;
  }
  return getPlatforms(winOrPlatform).includes(platform!);
};

export const setupPlatforms = (win: any = window) => {
  if (typeof win === 'undefined') { return []; }

This file has been truncated. show original

If you want to change the behaviour of the service, log an issue on the github repo, or even do a PR

If you want to detect properly and override its behaviour in your app, rephrase your question or use google figure out how to detect Surface and implement in your code

Which option will help you best?

josemarsc-dev · November 19, 2021, 10:46pm

I misunderstood your question. I see you changed it now so it’s more clear. Anyway, you can still use Device.getInfo() to check the model, OS, platform, etc. and do some workaround for now and report the bug.