0

I have an <input type="number"> and I need the up and down spinner buttons for choosing the next value. Unfortunately, those spinner buttons are not visible on a mobile device. So, I want to create up and down buttons and display them only on mobile devices. The only thing I found, is a media query that displays a DOM element, when the screen size is small. But what, if the user simply decreases the browser window on a PC for some reason? This would display the spinner buttons as well as my up and down buttons. Next thing I tested was

@media-desktop (min-width: 1px) {
  .desk {
    visibility: visible;
  }

  .div-only-mobile {
    visibility: hidden;
  }
}

but both divs are visible on PC and mobile device.

How can I display a DOM element on a mobile device and hide it on PC?

Many thanks.

MarioG8
  • 5,122
  • 4
  • 13
  • 29
Flippowitsch
  • 315
  • 3
  • 15
  • https://modernizr.com/ – roberrrt-s Dec 08 '21 at 12:42
  • No, media queries can _not_ actually detect that a device is a "mobile device." You can try and detect a combination of factors that might enable an "educated guess" at best, like f.e. https://stackoverflow.com/a/62793120/1427878 – CBroe Dec 08 '21 at 12:54

1 Answers1

-1

Something like this should work

.desk {
 visibility: visible;
}


.div-only-mobile {
    visibility: hidden;
}

@media screen and (max-width: 768px) {
        .desk {
            visibility: hidden;
        }

        .div-only-mobile {
            visibility: visible;
        }
    }
Duenna
  • 2,186
  • 2
  • 14
  • 17
  • This is almost the same, like the link I posted. It does not work, because it checks the screen size and not if it is PC or mobile device. What if the screen size on a PC is reduced to the screen size of a mobile device? – Flippowitsch Dec 08 '21 at 10:03
  • If you want to definitively work out of a user is on a mobile device or not you'll need to use JavaScript – Duenna Dec 08 '21 at 10:22
  • It's a Blazor wasm so I prefer C# but I will find a solution. Thanks. – Flippowitsch Dec 08 '21 at 10:56
  • [Here](https://www.syncfusion.com/faq/blazor/javascript-interop/how-do-you-detect-whether-a-page-is-loaded-in-mobile-or-on-desktop) is a simple solution for Blazor, that uses js. – Flippowitsch Dec 08 '21 at 14:39