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

Question

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

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

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

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

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

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

Answer 1

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

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

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

最好的方法总是 渐进增强

Answer 2

所以这是我想出的解决方案......有2个横幅图像（谷歌，必应）。 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>

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

问题描述

2 个解决方案

解决方案1
0 2015-09-11 08:55:24

解决方案2
0 2015-09-11 10:00:44

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

问题描述

2 个解决方案

解决方案1 0 2015-09-11 08:55:24

解决方案2 0 2015-09-11 10:00:44

解决方案1
0 2015-09-11 08:55:24

解决方案2
0 2015-09-11 10:00:44