06-21-2022, 05:56 AM
In most cases developers use agent detection. But User Agent detection is not a recommended technique for modern web apps. There is a JavaScript API built-in for detecting media. You can use JavaScript window.matchMedia() method to detect a mobile device based on the CSS media query.
You may also use navigator.userAgentData.mobile .
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:
Quote:if (window.matchMedia("(max-width: 767px)").matches)
{
// The viewport is less than 768 pixels wide
document.write("This is a mobile device.");
}
You may also use navigator.userAgentData.mobile .
Quote:const isMobile = navigator.userAgentData.mobile;
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:
Quote:@media only screen and (min-width: 320px) and (max-width: 600px) {}