如何检测用户使用的是手机，平板电脑还是台式机并重定向它们？

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 whether the user is using a desktop, a tablet or a mobile and redirect them.

User uses a desktop - stay on site (A). User uses a tablet - redirect from A to site B. User uses a mobile - redirect from A to site C.

If I screen width and dpi is there not a possibility that some mobiles and tablets gets caught anyway and redirect to desktop version?

I have this at the moment.

<script>
if (navigator.userAgent.match(/Android/i)
|| navigator.userAgent.match(/webOS/i)
|| navigator.userAgent.match(/iPhone/i)
|| navigator.userAgent.match(/iPod/i)
|| navigator.userAgent.match(/BlackBerry/i)
|| navigator.userAgent.match(/Windows Phone/i)
) {
document.location = "B";
} else if (navigator.userAgent.match(/iPad/i)
) {
document.location = "C";
} else {
document.location = "A";
}
</script>

Thank you in advance for your help!

Answer 1

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.

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

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");
}