仅检测桌面的最佳方法（非移动）答案

【问题标题】：Best method to detect desktop only (non-mobile)仅检测桌面的最佳方法（非移动）
【发布时间】：2015-12-07 18:30:11
【问题描述】：

最后一天我花了很多时间研究并尝试使用 css 媒体查询的各种方法，最常见的解决方案是针对 1200 像素的最小宽度。然而，随着高分辨率移动设备（如 Amazon Kindle Fire HDX 和一些可笑的 4K 智能手机）的推出，这还不够。

除了使用 javascript 库来检测移动设备并反转媒体查询的 CSS 之外，我正在考虑使用 CSS 媒体查询来定位最小宽度为 1200 像素的路线。

我知道Modernizer，但这已经走模块化构建的路线，而不是单一的 CDN 源。我更喜欢保持最新的轻量级库，这样我就不必担心未来的设备 - 有什么建议吗？

最后...有没有更可靠、更简单的方法来实现仅桌面检测？

我没有提到的一个重要注意事项是，我根本不关心设备功能。如果不是移动设备，我只是想省略页面上的广告显示 - 这不需要浏览器/设备中的任何花哨功能！

我知道 UA 嗅探是个坏主意，但是否 100% 确定所有移动设备的用户代理中都包含“移动”一词？

【问题讨论】：

What is the best way to detect a mobile device in jQuery?的可能重复
关于重复的问题，答案显示了javascript和jquery的解决方案
“桌面”和“移动”不是有用的类别。你真正关心的是什么？屏幕尺寸？网络连接速度？触控支持？测试您真正关心的内容。
通常在 Web 开发中，桌面与移动不是一个有用的类别 - 但在我的情况下，我只需要知道这些。编辑 Q 以反映我的目的。我只需要知道用户是在 PC 上还是笔记本电脑上

标签： javascript html css mobile media-queries

【解决方案1】：

我不知道这是否是最好的方法，但我曾经检查ontouchstart 事件是否在window 对象上 - 我尽量不嗅探浏览器，因为这本质上是媒体查询旨在替换。

var isDesktop = !('ontouchstart' in window);

但请注意：有触摸屏笔记本电脑（我实际上拥有一台便宜的）和台式机。越来越有可能这种技术对这个世界来说并不长久，或者至少不是万无一失的。

最好的方法总是progressive enhancement

【讨论】：

笔记本电脑也可以有触摸屏？
@TrungNguyen 已经在您评论时输入了免责声明 :)
我知道 Modernizer 使用“渐进式增强”检测移动设备 - 但是，出于我的目的，我不需要了解设备功能。我只需要知道目标设备是否是桌面，以便可以省略特定功能
是的，我明白，但是渐进增强是一种设计理念，而不是一种实现，所以当我说最好的方法是 PE 时，我的意思是无论您的业务逻辑需要什么，如果你嫁给了一个需要浏览器嗅探的解决方案

【解决方案2】：

这就是我想出的解决方案...有 2 个横幅图片（Google、Bing）。 Google 横幅仅为移动设备加载（包括高分辨率）。

意见和建议？

$(document).ready(function() {
  var md = new MobileDetect(window.navigator.userAgent);
  if (md.mobile()!==null) {
    var d = document.getElementById("banner1");
    d.className = d.className + " ismobile";
  }
  $('#output').html('isMobile: '+md.mobile());
});

div {
  width: 50%;
  margin: 10px auto;
}
img {
  width: 100%;
  height: auto;
}

/* Should be 1200, but 300 in this example because viewport too small in code snippet */
@media only screen and (min-width: 300px) {
  /* Do not display ads on desktop (large resolution) */
  #banner1 {
    display: none;
  }
  /* override for mobile devices with large resolution */
  #banner1.ismobile {
    display: block;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="//cdnjs.cloudflare.com/ajax/libs/mobile-detect/1.2.1/mobile-detect.min.js"></script>
</head>
<body>
  <div id="output"></div>
  
  <div id="banner1">
    <img src="http://www.google.co.uk/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
  </div>
  
  <div id="banner2">
    <img src="http://vignette2.wikia.nocookie.net/logopedia/images/c/c6/Bing_logo.png/revision/latest?cb=20101019022831">
  </div>
</body>

【讨论】：