How to detect whether the user is using mobile, tablet or desktop and redirect them?

Question

First off I know that a responsive site is no. 1 but at the time being that unfortunately is not an option! I also have very javascript coding skills.

I need to detect w

Answer 1

If anyone is interested I came up with this solution. So far it works great. Don't know if it is safe to use in the future - probaply not. But if you have no other solution or not able to great a repsonsive website or something like that you can propably use this...

I use the most common devices.

if (/iP(hone|od)|android.+mobile|BlackBerry|IEMobile/i.test(navigator.userAgent)) {
    window.location.replace("http://mobile");
} else if (/(tablet|ipad|playbook|silk)|(android(?!.*mobile))/i.test(navigator.userAgent)) {
    window.location.replace("http://tablet.website.com");
}

Answer 2

Your solution looks good just add a check for screen width as well which is 970px for ipad or tabs, 768px for mobile devices(smartphones) and greater than 970px for desktop version.

As it seems you cannot use media queries as you want to redirect based on devices else media queries are the best way to do responsive design.

You can have a look at below link as well.

https://css-tricks.com/snippets/javascript/redirect-mobile-devices/

Answer 3

You can easily do this by showing different content with loading diff. css, if not wanting to go fully responsive. I would use @media tag of CSS, like in W3School dummy example

@media screen and (min-width: 480px) {
    body {
        background-color: lightgreen;
    }
}

Now, as for your question, with setting the max screen size one value for phones and tablets, you usually won't have problems width catching desktops/laptops. With exclusion of new iPad Pro, 99% of tablets are 10'' and less, while phones are 6'' and less

Personally, I would not do it your way with js, as it adds complexity where it is not needed. But this Blog post might be of help as well.