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

Question

首先，我知道响应式网站不是。 1，但不幸的是目前还没有选择！ 我也有很好的javascript编码技能。

我需要检测用户是否正在使用台式机，平板电脑或移动设备，然后将其重定向。

用户使用桌面-留在站点（A）。 用户使用平板电脑-从A重定向到站点B。用户使用平板电脑-从A重定向到站点C。

如果我的屏幕宽度和dpi是否有可能被某些手机和平板电脑捕获并重定向到台式机版本？

我现在有这个。

<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>

预先感谢您的帮助！

Answer 1

您可以通过加载diff显示不同的内容轻松地做到这一点。 CSS，如果不想完全响应。 我会使用CSS的@media标签，就像在W3School虚拟示例中一样

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

现在，对于您的问题，通过将手机和平板电脑的最大屏幕尺寸设置为一个值，通常在捕获台式机/笔记本电脑时就不会遇到宽度问题。 排除新的iPad Pro，99％的平板电脑为10英寸及以下，而手机为6英寸及以下

就个人而言，我不会用js来做到这一点，因为它在不需要的地方增加了复杂性。 但是此Blog帖子也可能有帮助。

Answer 2

您的解决方案看起来不错，只需添加屏幕宽度检查即可：ipad或标签页为970px，移动设备（智能手机）为768px，台式机版本为970px以上。

似乎您无法使用媒体查询，因为您想基于设备进行重定向，否则媒体查询是进行响应式设计的最佳方法。

您也可以查看下面的链接。

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

Answer 3

如果有人感兴趣，我想出了这个解决方案。 到目前为止，效果很好。 不知道将来是否可以安全使用-可能不是。 但是，如果您没有其他解决方案，或者无法建立一个令人反感的网站或类似的网站，则可以适当地使用它...

我使用最常见的设备。

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