User Agent detection is not a recommended technique for modern web apps. You can use JavaScript window.matchMedia() method to detect a mobile device based on the CSS media query.
if (window.matchMedia("(max-width: 767px)").matches)
{
// The viewport is less than 768 pixels wide
document.write("This is a mobile device.");
}Another approach would be a responsive media query. You could presume that a mobile phone has a screen size greater than x and less than y.
For example:
@media only screen and (min-width: 320px) and (max-width: 600px) {}
You may also use navigator.userAgentData.mobile .
const isMobile = navigator.userAgentData.mobile;