How do I hide a div on some platforms but not all

Question

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>

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? — Taplar, Jan 21 '21 at 22:37
Related: https://stackoverflow.com/questions/11381673/detecting-a-mobile-browser — Taplar, Jan 21 '21 at 22:38
if you want to get the width you can use css `breakpoints` if you want to display different `div`s in different devices (ex: laptop, mobile, tablet), or you need to use `javascript` instead of `css`? — Francisco, Jan 21 '21 at 22:49

score 0 · Answer 1 · answered Jan 21 '21 at 23:29

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.

How do I hide a div on some platforms but not all

1 Answers1