javascript - 如何知道移动设备是否显示桌面？

Question

我看过很多questions询问如何检测设备是否移动。通常，它们分为 3 类:

1. 检查屏幕尺寸/视口(viewport)
2. 检查用户代理
3. 使用库，例如​​ Modernizr解决浏览器功能问题。

在实现了我能做的事情之后，我仍然遇到了一个我从未见过被问到或解决过的情况；在许多移动浏览器上，都有“请求桌面站点”(Chrome)、“桌面模式”(Dolphin) 或“桌面 View ”(HTC Sense)。

我选择了上面的策略 #1，除非在桌面模式下查看页面，否则该策略有效。实现 #2 有缺点(欺骗、未编目代理等)。

是否有一种可靠的(跨浏览器)方法来使用 Javascript 在移动浏览器上检测桌面模式？ jQuery 或其他库可以，但它应该基于特征检测，而不是一组用户代理。

Answer 1

所以，我终于有了经过验证的方法来检测这一点。有点棘手，但得到了精确的解决方案。

---

第一步

安装 device-uuid 库，( Here already mentioned. How to install )

<script src="https://raw.githubusercontent.com/biggora/device-uuid/master/lib/device-uuid.min.js"></script>
<script>
    var user_configuration = new DeviceUUID().get();
    console.log(user_configuration);
</script>
// output
// {"isAuthoritative":true,"isMobile":true,......"resolution":[980,1104],"browser":"Chrome"}

---

第 2 步

检测设备宽度

var curr_width = parseInt((window.innerWidth).toFixed());

---

第 3 步

现在需要比较curr_width和user_configuration.resolution[0](宽度)

如果两者相同则这是普通 View ，如果不是则为“DESKTOP VIEW”。附上屏幕截图。

if(curr_width == user_configuration.resolution[0]){
   alert("normal_view");
}else{
   alert("desktop_view");
}

---

在移动浏览器中打开桌面模式的屏幕截图

正常移动 View 的屏幕截图