How can I detect the screen resolution of a device and figure out if it is a desktop or mobile device?

Question

I have an issue with my website - basically everything works fine on 1080p (or better), but I recently accessed the website on a computer with non-1080p quality and things didn't look the greatest. I have been trying to figure out how I can determine the resolution of the device accessing the website and display an alert message if they do not have good enough resolution.

The code I have below does work, but the problem is that it still shows the alert message on my iPhone when it really shouldn't because the user experience is working just fine on my iPhone (6). I simply want to display the alert only when the resolution is poor on the device (like the laptop I was using).

Here are all of the things I have tried, all giving me the same results (showing the alert , but also showing it on my iPhone):

    var width = document.documentElement.clientWidth;
    var height = document.documentElement.clientHeight;
    if (height <= 781 || width <= 781) {
        alert("Sorry, you may not have the best experience with the screen resolution you are using.")
    }

And:

    var width = $(window).width();
    var height = $(window).height();
    if (height <= 781 || width <= 781) {
        alert("Sorry, you may not have the best experience with the screen resolution you are using.")
    }

And:

    var width = screen.width;
    var height = screen.height;
    if (height <= 781 || width <= 781) {
        alert("Sorry, you may not have the best experience with the screen resolution you are using.")
    }

I realize my issue is that the screen width or height for my iPhone is less than 781 , but how can I decipher when it is a "good" resolution, and when it is "bad" if that makes sense.

After searching the web, I'm still not sure exactly what else I need to do to get it to not display on mobile devices. Any guidance is much appreciated.

Answer 1

It is better to detect device type for this issue.

You can use this snippet to detect device

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
 // some code..
}