Solution 1 :

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.

Problem :

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>


Comment posted by lurker

Can you clarify what you mean by “platform”?

Comment posted by T-Rex

so on android or macos or ios

Comment posted by Taplar

How is your page intended to know what device it is on? Do you actually need to know the device, or do you simply need to know the viewport width?

Comment posted by T-Rex

the viewport width works

Comment posted by