如何檢測 iOS Mobile Safari 和 Chrome 的“請求桌面站點”模式？

Question

當用戶使用 iOS 移動 Safari 的“請求桌面版網站”或 iOS Chrome 的“請求桌面版”時，我想發送我網站的 iPad 版。 在那種模式下似乎只有user-agent不同，似乎無法檢測到。 有任何想法嗎？

我的網站有三個版本：台式機/平板電腦/智能手機。 平板版是桌面版的靜態版本，非常動態並且大量使用 JavaScript（視差效果）。

Answer 1

我見過一些人使用 cookie/sessionStorage 來檢測不斷變化的用戶代理，例如http://leavesofcode.net/2013/07/08/responsive-design-with-switch-to-desktop-site-option/和https://gist.github.com/dtipson/7401026

但是，我發現您可以通過對navigator.userAgent交叉引用navigator.platform來跳過所有這些。 這是專門針對 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);

Answer 2

另一個骯臟的黑客是在iOS 13+上使用platform.maxTouchPoints 。 即使在請求桌面版本后，該字段仍然存在，但在真正的桌面 Safari 中，該字段不存在。

Answer 3

請看這個問題的答案： 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