0

I need to show different app link depends on user operation system. Such as IOS, Android or both if user is opening page on Desktop. I'm using React and Next.js I tried to use navigator.userAgent with no luck.

It will be perfect to achieve code like below:

import React from "react";
import { AppDownload as AppDownloadProps } from "xxx";

export default function DownloadApp({
  appDownload,
}: AppDownloadProps): JSX.Element {
  return (
        <div>
          {isIos && <a href={appDownload?.ios.url}></a>}
          {isAndroid && <a href={appDownload?.android.url}></a>}
          {isDesktop && <a href={appDownload?.desktop.url}></a>}
        </div>
  );
}
FrontEnd Mania
  • 1
  • 1
  • 1
  • 1
    Does this answer your question? [Detect MacOS, iOS, Windows, Android and Linux OS with JS](https://stackoverflow.com/questions/38241480/detect-macos-ios-windows-android-and-linux-os-with-js) – Andy Oct 10 '22 at 10:17

2 Answers2

2

You can use navigator.userAgent to detect the useragent in browser and there are lots of other options are available to get agent information.

console.log("agent is:", window?.navigator?.userAgent)

console.log("platform is: ", window?.navigator?.platform)

console.log("user agent data: ", window?.navigator?.userAgentData)
Pradip Dhakal
  • 1,872
  • 1
  • 12
  • 29
  • This worked for me, i just created an: if (window?.navigator?.platform == "iPhone"){ code if iphone }. You can do the same for each platform. – Igor Tot Mar 09 '23 at 13:40
0

Possible duplicate of Detect MacOS, iOS, Windows, Android and Linux OS with JS.

You can use window.navigator but will need to parse the result.

Andy
  • 5,142
  • 11
  • 58
  • 131