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

您可以通过加载差异显示不同的内容来轻松完成此操作。 css，如果不想完全响应。我会使用CSS的@media标签，就像在W3School虚拟示例中那样

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

现在，至于您的问题，将手机和平板电脑的最大屏幕尺寸设置为一个值，您通常会遇到问题，无法抓住台式机/笔记本电脑。除了新的iPad Pro，99％的平板电脑都是10＆＃39;更少，而手机是6＆＃39;少了

就个人而言，我不会按照你的方式使用js，因为它增加了不需要的复杂性。但是这个Blog post也可能有所帮助。

Answer 2

您的解决方案看起来不错，只需添加一个屏幕宽度检查，ipad或标签为970px，移动设备（智能手机）为768px，桌面版本为970px。

由于您似乎无法使用媒体查询，因为您希望根据设备进行重定向，因此媒体查询是进行响应式设计的最佳方式。

您也可以查看以下链接。

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

如何检测用户是使用手机，平板电脑还是桌面并重定向？

2 个答案: