You likely want to show/hide select elements based on the screen width.

This way, you can detect whether the devices display is large enough for your “desktop”, rather than retermining it based on device type. (Consider a 13″ iPad; that has a bigger screen than some laptops but could still be considered “mobile”.)

You can use CSS Breakpoints like so:

.hideOnMobile {
  visibility: hidden;
}

@media only screen (min-width: 900px) {
  // this CSS will only be applied if the screen is wider than 899px
  .hideOnMobile {
    visibility: visible;
  }
}

If you really want to detect if the browser is on a mobile device, you can check the navigator.userAgent object to get the User Agent string for the browser. Since there’s no standard way of writing a User Agent string, you’ll likely need to collect a list of User Agents you want to respond to, or use a library that has some common ones included already.

ok so I am trying to make a div have the attribute hidden when on a phone but not when on other platforms and would like to know how to do this?

    <div id="content-desktop">
        <button onclick="ChangeDefault()">switch theme to default</button>
        <button onclick="ChangeOrigin()">switch theme to origin</button>
        <button onclick="ChangeDark()">switch theme to dark</button>
        <button onclick="ChangeLight()">switch theme to light</button>
    </div>