Treehouse: Grow your CSS skills. Land your dream job.

Last updated on:

Test if Mac or PC with JavaScript

User Agent testing sucks, but sometimes you need it for subtle things. In my case I was using it to adjust what I was showing for keyboard shortcut keys (Command or Control). Nothing super major.

if (navigator.userAgent.indexOf('Mac OS X') != -1) {
  $("body").addClass("mac");
} else {
  $("body").addClass("pc");
}

The statements in there use jQuery to add a body class, but that's not required, you could do whatever.

Comments

  1. Scott
    Permalink to comment#

    This may be overkill for your intended use, however it really comes in handy if you need to nudge items or if things aren’t quite right on mobile devices.

    http://rafael.adm.br/css_browser_selector/

  2. Keyamoon
    Permalink to comment#

    Trying to solve the same problem of showing Cmd vs Ctrl, I found this snippet. But what if someone uses Linux on a Mac (with a Mac keyboard)? I have posted this question on stackoverflow as well.

  3. Aalekh

    would like to add that we can also add navigator object with platform property…….object.platform…it can specifically tell for ex: wether it is macintosh 68k or windows 64bit…..

  4. Marvel Slots
    Permalink to comment#

    just what a needed to check if it’s a MAC for an .exe file download link (to put a different link for macs)

    • Will
      Permalink to comment#

      You can set a class in combination with a file type selector

      .mac a[href$=”.dmg”] { STLYE }
      .pc a[href$=”.exe”] { STLYE }

      Is this what you are shooting for?

  5. Hiren
    Permalink to comment#

    Thanks Mate, It really saved my couple of hours.

  6. richard
    Permalink to comment#

    can anyone one advise on how to do this with plain javascript not jquery?

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```