将移动用户重定向到移动 url，将平板电脑/ipad 用户重定向到另一个 url [重复]

Posted 2023-03-14

【中文标题】将移动用户重定向到移动 url，将平板电脑/ipad 用户重定向到另一个 url [重复]

【英文标题】：Redirect mobile users to mobile url and tablet/ipad users to another url [duplicate]

【发布时间】：2020-12-29 13:31:30

【问题描述】：

几年前我已经尝试过在这里发布的这个javascript：

<script>
if (/iP(hone|od)|android.+mobile|BlackBerry|IEMobile/i.test(navigator.userAgent)) 
window.location.replace("page2.html");
 else if (/(tablet|ipad|playbook|silk)|(android(?!.*mobile))/i.test(navigator.userAgent)) 
window.location.replace("page3.html");

</script>

虽然移动重定向适用于 iPhone，但平板电脑/ipad 重定向不适用于 iPad（第 6 代或第 8 代）。任何建议都非常感激。 （请理解我不是任何回复的编码员。）

【问题讨论】：

我不知道我会错，但你对 if 条件下的 iP(hone|od) 有什么看法？

我认为 iP(hone|ad) 是对的。我当然不知道这种脚本。

【参考方案1】：

看完这个帖子：What is the best way to detect a mobile device? 使用用户代理进行重定向显然被认为是不可靠的。 参考此帖：Detecting a mobile browser 通过这种方法，您可以考虑使用屏幕分辨率之类的东西：

( window.innerWidth <= 800 ) && ( window.innerHeight <= 600 )

考虑以下作为解决方法。从 cmets 中可以看出，来自 ipadOS 和 MacOS 的用户代理是相同的。但是navigator.maxTouchPoints 可能是一个差异化因素：

    if (/mac/i.test(navigator.userAgent) && navigator.maxTouchPoints>0 )
     // do something on ipad
    

【讨论】：

如果它真的只是为了布局目的，你可能是对的，只要选择窗口尺寸。但是设备检测还有其他原因，例如重定向到无法正常工作的本机应用程序。并且由于正则表达式是使用/.../i（i 表示不区分大小写）选项定义的，因此正则表达式模式和要检查的文本的大小写是不相关的......这些正则表达式的问题是，iPad OS 确实识别本身具有与 MacOS 相同的用户代理，因此它们不能单独通过正则表达式来区分。

你说得很对。我不知道 iPad 的用户代理与 MacO 没有区别。我在我的谷歌浏览器上运行控制台日志，选择 iPad 作为设备并得到以下信息：“Mozilla/5.0 (iPad; CPU OS 11_0 like Mac OS X) AppleWebKit/604.1.34 (KHTML, like Gecko) Version/11.0 Mobile /15A5341f Safari/604.1"。它确实提到了 iPad；授予我没有物理设备来重现该场景。

有运行 ios 的 iPad。他们的用户代理中包含iPad。但较新的 iPad 也能够运行 iPad OS。他们的用户代理不再包含iPad，但看起来和 MacOS 上的一样

那么我建议检查接触点，作为一种解决方法。我会据此更新答案。

非常感谢您的贡献！我将上面的代码指定为 navigator-maxTouchPoints 作为附加的 else if 并且它现在可以在 iPad 6th gen 和 8th gen 上运行。它在我的触控笔记本电脑上也能正常工作（通过不重定向）。

【参考方案2】：

这里的聪明人可能会告诉我为什么这种编码不好的原因，但是自从发布这个问题以来，我现在发现以下内容适用于古老的小型 Android 平板电脑、iPhone 6s 和 11 以及 ipad 第 6 代和第 8 代一代，台式电脑和触控笔记本电脑。现在我家的技术已经用完了！

放在头部：

<link rel="alternate" href="https://mywebsite.com/index.html" id="desktop"
media="only screen and (touch-enabled: 0)">
<link rel="alternate" href="https://mywebsite.com/page2.html " id="phone"
media="only screen and (max-device-width: 640px)">
<link rel="alternate" href="https://mywebsite.com/page3.html" id="tablet"
media="only screen and (min-device-width: 641px)">

<!-- Viewport is very important, since it affects results of media
query matching. -->
<meta name="viewport" content="width=device-width">

<!-- Place the JS in the head to load as little of the page as
possible before (potentially) redirecting. -->
<script src="js/device.js"></script>

然后我将文件 device.js 加载到 js 文件夹中。我是从https://github.com/borismus/device.js/tree/master/build得到的

【讨论】：

不幸的是，我发现这个脚本可以在一个简单的网站上运行。当我试图在另一个运行大量脚本的更复杂的网站上使用它时，我无法让它工作。不知道有没有人对此有什么建议？