Route to different page based on device info

Hi,

i’m looking for the right pattern to make routing decisions based on device info. E.g. sometimes it would be better to use different pages for desktop and mobile devices (where grid-based responsivity is simply not enough, or would make the page template too complicated).
My best idea so far would be to use async routing and make use of F7’s device api to decide which page to actually load. And the question is: is there a better pattern / f7 magic for this?

Thanks in advance,
Bálint

If you want to go ahead with device info. framework7 provide it by default:-
https://framework7.io/docs/device.html

No magic and no async route needed here, just as simple as:

const isMobile = Framework7.device.ios || Framework7.device.android;

{
  path: '/some-route/',
  component: isMobile ? ComponentA : ComponentB,
}
1 Like

Thanks, Vladimir! And yes, async routing is not necessary (worthy, though).

I see that in the example you use device.ios || device.android, and not device.desktop. I though these were fairly exchangable, weren’t they?

Actually yes. But, if this is a case, maybe it is better to check combination of window/screen width and height. For example iPad (Pro) has large screen and won’t be detected as desktop.

Thanks, gonna think of that!