仅使用“桌面模式”浏览器检测移动用户答案

【问题标题】：Detect Only Mobile Users with "Desktop Mode" Browsers仅使用“桌面模式”浏览器检测移动用户
【发布时间】：2013-06-27 13:32:06
【问题描述】：

我知道有很多方法可以检测手机用户（主要是通过检查用户代理）。

但是很多移动浏览器都有所谓的“桌面模式”，它为网站提供了更多的功能环境。

有没有办法只为这些移动用户提供特定功能（例如 jQuery 滑块），在这种模式下浏览？我遇到的真正问题是，基本上，他们的用户代理在两种模式下都是相同的（例如“Opera Mini 9.0.1”），所以从网站管理员的角度来看 - 我怎么知道他们在移动设备上但是以桌面模式浏览网站？

【问题讨论】：

“桌面模式”的重点是防止移动特定内容。你甚至不应该试图改变这一点
我意识到这一点，但想象一下这种情况：您的网站检测（通过检查用户代理）用户是否通过已识别的移动设备列表之一进行访问。由于您知道您网站上的特定功能在移动浏览器上不起作用（因为它具有悬停效果或类似效果），因此您将这个功能完全隐藏起来。但是，该功能适用于移动设备，使用“桌面模式”。我们是否将其隐藏在此类设备上或尝试检测此模式并显示该功能？这就是我面临的困境。
或者某个特定的移动浏览器充满了您必须解决的错误。无论是否假装是桌面版本（没有错误），这些错误都存在。为问题 +1。
Target features, not specific browsers. 使用响应式设计。无论您认为它是桌面（鼠标）浏览器还是移动（触摸屏）浏览器，都执行此操作，您会更幸运地涵盖所有可能的情况。

标签： php jquery-mobile mobile user-experience

【解决方案1】：

这里是 iOS Safari 用户的相关代码。本质上，用户代理在桌面模式下丢失了对 iPhone/iPod/iPad 的引用，但该信息仍然存在于 navigator.platform 中：

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);

【讨论】：

【解决方案2】：

在 Android Chrome 上，“桌面模式”会从用户代理中删除“Android”字符串。如果您可以使用 JavaScript，则以下大部分会检测 Android Chrome 桌面模式：

var webkitVer = parseInt(/WebKit\/([0-9]+)|$/.exec(navigator.appVersion)[1], 10); // also matches AppleWebKit
var isGoogle = webkitVer && navigator.vendor.indexOf('Google') === 0;  // Also true for Opera Mobile and maybe others
var isAndroid = isGoogle && userAgent.indexOf('Android') > 0;  // Careful - Firefox and Windows Mobile also have Android in user agent
var androidDesktopMode = !isAndroid && isGoogle && (navigator.platform.indexOf('Linux a') === 0) && 'ontouchstart' in document.documentElement;

假设带有 ARM 处理器的 Chrome 是 Android。对于在 ARM 上运行 Linux 的用户来说，这个假设肯定是失败的，对于 i686 或 MIPS 等上的 Android 来说是失败的（而且我还无法测试 ChromeOS）。

对于 Windows Mobile，您可以通过检查字符串“WPDesktop;”来检测桌面模式。在用户代理中。

编辑：曾经使用window.chrome 和window.chrome.webstore 的代码是一个可靠的测试，但在Chrome 65 附近的某个地方，您无法再使用这些属性来检测桌面模式。感谢@faks 提供的信息。

编辑 2：我现在强烈建议不要将“桌面模式”视为“移动模式”，但是，这是我的最新意见：

请注意，检测桌面模式的代码非常脆弱，并且较新的浏览器版本经常会破坏嗅探代码技术
除非您有严重的错误或严重的可用性问题，否则完全不值得一探
如果您没有积极维护代码并针对 Beta 版浏览器进行测试，请不要嗅探
我在 iOS 上使用以下代码：navigator.vendor.indexOf('Apple') === 0 && 'ontouchstart' in document.body。我们需要它来为 iPadOS 13 正确设置令人惊讶的糟糕 iOS inputMode（旧的 navigator.platform 技术现在在 iOS 13 Beta 中被破坏）并避免其他输入类型的其他 iOS 可用性错误。我认为您可以检查window.screen.width == 768 来嗅探iPad（即使方向改变也保持不变）。如果 Macbook 推出触控版，嗅探就会中断。
我现在使用以下代码来检测 Android 桌面模式：'ontouchstart' in document.body && navigator.platform.indexOf('Linux a') === 0 && (window.chrome || (window.Intl && Intl.v8BreakIterator))。可怕的不可靠的嗅探，但我们确实需要它，因为 android 视口和捏缩放（不是页面缩放）在 Android 上对于我们的 SPA 来说确实被破坏了（屏幕尺寸不够，因为桌面触摸用户可以使用小窗口）。

【讨论】：

我认为您的代码中有错字。要检测 isAndroid userAgent.indexOf('Android') 应该是 navigator.userAgent.indexOf('Android')>-1 否则它会返回错误。此外，!(window.chrome || window.chrome.webstore) 在应该返回 true 的地方返回 false，以便检测可以正常工作。你能解释一下你为什么要检查window.chrome属性吗？
@Faks - 你是对的，所以我已经修复了它。奇怪的是，它在我的原始代码中是正确的，所以我必须在为我的答案重写代码时塞满了！

【解决方案3】：

如果检测操作系统/平台不是问题，那么您可以这样做。

const screenWidth = window.screen.width;
const isMobile = screenWidth <= 480;
const isTablet = screenWidth <= 1024;

可以有一些宽度达到1280px的高端平板电脑；

【讨论】：

【解决方案4】：

可以很好地测试的代码：

let screenWidth = window.screen.width;
let isMobile = screenWidth <= 480;

let details = navigator.userAgent;

let regexp = /android|iphone|kindle|ipad/i;

let isMobileDevice = regexp.test(details);

if (isMobileDevice && isMobile) {
    document.write("You are using a Mobile Device");
} else if (isMobile) {
    document.write("You are using Desktop on Mobile"); // the most interesting
} else {
    document.write("You are using Desktop");
}

【讨论】：