Detecting macOS Browser Using JavaScript

In this article, we'll explore how to detect if a user is using macOS and identify the browser they are using using JavaScript.

Detecting macOS

To detect if a user is using macOS, we can examine the navigator.platform property.

The navigator object provides information about the browser environment, including the platform.

macOS typically has the platform string "MacIntel" or "MacPPC." Here's a simple example:

// Detect macOS
function isMacOS() {
  return navigator.platform.toUpperCase().includes('MAC');
}

// Example usage
if (isMacOS()) {
  console.log('User is using macOS');
} else {
  console.log('User is not using macOS');
}

In this code:

Detecting Browser on macOS

Detecting the browser on macOS involves inspecting the navigator.userAgent property.

Each browser has a distinct user agent string, allowing us to identify the specific browser. Here's an example:

// Detect browser on macOS
function getMacOSBrowser() {
  const userAgent = navigator.userAgent.toLowerCase();

  if (userAgent.includes('safari') && !userAgent.includes('chrome')) {
    return 'Safari';
  } else if (userAgent.includes('firefox')) {
    return 'Firefox';
  } else if (userAgent.includes('chrome')) {
    return 'Google Chrome';
  } else {
    return 'Unknown Browser';
  }
}

// Example usage
const browserOnMacOS = getMacOSBrowser();
console.log(`User is using ${browserOnMacOS} on macOS`);

In this code:

Full Example

Let's put it all together in a complete HTML example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>macOS Browser Detection Example</title>
  <script>
    // Detect macOS
    function isMacOS() {
      return navigator.platform.toUpperCase().includes('MAC');
    }

    // Detect browser on macOS
    function getMacOSBrowser() {
      const userAgent = navigator.userAgent.toLowerCase();

      if (userAgent.includes('safari') && !userAgent.includes('chrome')) {
        return 'Safari';
      } else if (userAgent.includes('firefox')) {
        return 'Firefox';
      } else if (userAgent.includes('chrome')) {
        return 'Google Chrome';
      } else {
        return 'Unknown Browser';
      }
    }

    // Example usage
    window.onload = function () {
      if (isMacOS()) {
        const browserOnMacOS = getMacOSBrowser();
        console.log(`User is using ${browserOnMacOS} on macOS`);
      } else {
        console.log('User is not using macOS');
      }
    };
  </script>
</head>
<body>
  <h1>macOS Browser Detection</h1>
  <p>Check the browser console for the detection result.</p>
</body>
</html>

In this example:

Browser Compatibility

The provided methods for detecting macOS and the browser are widely supported across modern browsers.

However, keep in mind that user agent strings can be manipulated or spoofed, so consider alternative methods if absolute accuracy is crucial.

Conclusion

Detecting the user's operating system and browser in JavaScript can be valuable for customizing the user experience based on the platform.

By examining the navigator.platform and navigator.userAgent properties, you can identify whether the user is using macOS and determine the specific browser they are using.

Use this information wisely to enhance your web applications and provide a more tailored experience for users on different platforms.