如何检测 iOS Mobile Safari 和 Chrome 的“请求桌面站点”模式？答案

【问题标题】：How to detect "request desktop site" mode of iOS Mobile Safari and Chrome?如何检测 iOS Mobile Safari 和 Chrome 的“请求桌面站点”模式？
【发布时间】：2015-07-26 21:56:02
【问题描述】：

当用户使用 iOS 移动 safari 的“请求桌面站点”或 iOS Chrome 的“请求桌面版本”时，我想发送我的网站的 iPad 版本。似乎只有用户代理在该模式下有所不同，并且似乎无法检测到。有什么想法吗？

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

【问题讨论】：

标签： javascript ios google-chrome mobile

【解决方案1】：

请看这个问题的答案： https://stackoverflow.com/a/58064481/1237536

它完美无瑕（现在，无论如何）..

基本上，当 iPad 处于“桌面模式”时，它们会宣传自己是 MacIntel，但目前没有 Mac 配备触摸屏，因此您需要寻找支持触摸屏的 MacIntel：

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

但你绝对应该看看原来的答案——我不是想把功劳： https://stackoverflow.com/a/58064481/1237536

【讨论】：

【解决方案2】：

另一个肮脏的技巧是在iOS 13+ 上使用platform.maxTouchPoints。即使在请求桌面版本后，该字段仍然存在，但在真正的桌面 Safari 上，该字段不存在。

【讨论】：

【解决方案3】：

我见过一些人使用cookies/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);

【讨论】：

看起来这将不再起作用：platform=MacIntel for Desktop Mode（在 iPadOS 13 Beta 2 上测试）。 iPadOS 13 默认情况下似乎将桌面模式设置为 true（检查 Safari 设置）。我目前的解决方法是假设触摸支持仅在 iOS/iPadOS 上而不是 Mac 上，即 document.documentElement 和 Safari 中的“ontouchstart”表示桌面模式 - 但是这是一个非常肮脏的黑客，因为如果苹果推出带有 MacBook 的触碰。我也不确定笔是如何处理的。
请看这个答案，效果很好；它使用相同的原理，但寻找不同的值，并依赖于触摸检测..:stackoverflow.com/questions/58019463/…