如何检测iOS移动版Safari和Chrome的“请求桌面站点”模式？

Question

当用户使用iOS移动Safari的“请求桌面站点”或iOS Chrome的“请求桌面版本”时，我希望发送我的网站iPad版本。看起来在该模式下仅用户代理不同，而且似乎无法检测。有什么想法吗？

我的网站有三个版本：桌面/平板电脑/智能手机。平板版本是桌面版本的静态版本，它非常动态并且广泛使用JavaScript（视差效果）。

- apptaro

Answer 1

另一个不太正规的方法是在iOS 13+上使用platform.maxTouchPoints。即使请求桌面版本，此字段仍然存在，但在真正的桌面Safari上，此字段不存在。

- Дмитрий Ляпунов

Answer 2

我看到一些人使用cookie/sessionStorage来检测更改的用户代理，例如http://leavesofcode.net/2013/07/08/responsive-design-with-switch-to-desktop-site-option/和https://gist.github.com/dtipson/7401026。但是，我发现可以通过交叉引用navigator.platform和navigator.userAgent来跳过所有这些步骤。这是针对iOS特别设计的，因为我听说Chrome的“请求桌面站点”也会自动更新视口，因此在其上可能不需要进行此检查。

var iOSAgent = window.navigator.userAgent.match(/iPhone|iPod|iPad/);
var iOSPlatform = window.navigator.platform && window.navigator.platform.match(/iPhone|iPod|iPad/);
var iOSRequestDesktop = (!iOSAgent && iOSPlatform);

- zeroimpl

---

看起来这个方法不再可行：在桌面模式下使用 platform=MacIntel（已在 iPadOS 13 Beta 2 上测试）。此外，iPadOS 13 看起来默认将桌面模式设置为 true（请检查 Safari 设置）。我的当前解决方案是假定触摸支持仅适用于 iOS/iPadOS 而不是 Mac 即 'ontouchstart' 在 document.documentElement 和 Safari 中意味着桌面模式 - 然而，这是一个非常糟糕的hack，因为如果苹果推出带触摸功能的 MacBook，它就会失效。我也不确定如何处理笔。 - robocat

请查看这个答案，它非常有效；它使用相同的原理，但寻找不同的值，并依赖于触摸检测：https://dev59.com/D1MH5IYBdhLWcg3w1T2K - Peter

Answer 3

请查看此问题的答案：https://dev59.com/D1MH5IYBdhLWcg3w1T2K#58064481 它目前运行得非常顺畅（无论如何）...

基本上，当iPad处于“桌面模式”时，它会将自己广告为MacIntel，但目前没有一款Mac具有触摸屏，因此您需要寻找启用了触摸的MacIntel：

let isIOS = /iPad|iPhone|iPod/.test(navigator.platform) ||
(navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)

但你一定要查看原始答案--我并不想获得荣誉： https://dev59.com/D1MH5IYBdhLWcg3w1T2K#58064481

- Peter