如何检测用户是否在使用手机、平板电脑或台式机并重定向

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

本文关键字：手机 平板电脑 重定向 台式机 何检测 检测 是否 用户      更新时间：2023-09-26

首先，我知道响应站点是第一位的，但不幸的是，目前这不是一个选择！我也有很强的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>

提前感谢您的帮助！

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

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

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

就我个人而言，我不会用js来做这件事，因为它在不需要的地方增加了复杂性。但这篇博客文章可能也有帮助。

您的解决方案看起来不错，只需添加屏幕宽度检查即可，ipad或选项卡的屏幕宽度为970px，移动设备（智能手机）的屏幕宽度是76px，桌面版的屏幕宽度大于970px。

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

你也可以看看下面的链接。

https://css-tricks.com/snippets/javascript/redirect-mobile-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");
}
相关文章：