正确查询屏幕宽度和设备分辨率

您的问题经过深思熟虑。

这些天，设备报告的设备像素宽度不准确。像素不再意味着像素，例如iPad mini比实际的iPad小40％，但其宽度却是普通尺寸的iPad。再加上视网膜设备为2兆像素。使用基于px的媒体查询将导致这些设备上非常非常小的设计。

为了避免这种情况，我要做的是使用基于em的媒体查询。然后仅在容器（或ems）上使用百分比。媒体查询上的EMS基于16px。您可以在字体大小上使用像素，也可以在px后备时使用REM（如果需要支持8）。Respond.js（用于ie8）支持ems。

至于何时为不同设备启用JS，您的宽度应明确基于ems（默认为px）。我个人尝试对所有大小使用相同的脚本，或者我使用php类和服务器端的东西专门为手机而不是台式机等加载，或者我检测到触摸和非触摸（请参见下文）。

我已经获取了Bootstrap 3 LESS文件，更改了变量以使网格对装订线使用百分比，并且所有媒体均为em。所有字体均为具有px后备格式的REMS。html基本字体大小已更改为100％。该框架开箱即用，可移动且灵活（除了我在变量中更改的巨大装订线）。它具有版式问题，很容易纠正。我还删除了所有.container类，只使用了一个样式为max-width和min-width且不超过屏幕90％的.container。

这些是基于Bootstrap的变量，但实际上，当您在所有容器上使用百分比，并在媒体查询，流畅的设计技术和移动优先CSS上使用em时，就可以涵盖整个设备。

这些是我定位的ems，在所有设备上都具有出色的效果，因为它是视口而不是像素：

// Extra small screen / phone
@screen-xs-min: 480px;
@screen-xs-min: 30.000em;

// Small screen / tablet
@screen-sm-min: 768px;
@screen-sm-min: 48.000em;

// Medium screen / desktop   
@screen-md-min: 992px;
@screen-md-min: 62.000em;

// Large screen / wide desktop
@screen-lg-min: 1200px;
@screen-lg-min: 75.000em;

// So media queries don't overlap when required, provide a maximum
@screen-xs-max: (47.938em);
@screen-sm-max: (61.938em);
@screen-md-max: (74.938em);

检测功能而不是设备

我使用一个小的脚本来检测触摸和非触摸，并以这种方式加载或不加载脚本：

 /* __________________ Supports Touch __________________*/
 /* Detects touch support and adds appropriate classes to html and returns a JS object
 *  Copyright (c) 2013 Izilla Partners Pty Ltd
 *  http://www.izilla.com.au
 *  Licensed under the MIT license
 *  https://coderwall.com/p/egbgdw
 */
var html = document.documentElement,
   supportsTouch = 'ontouchstart' in window || navigator.msMaxTouchPoints;

if (supportsTouch)
   html.className += ' touch';
else
   html.className += ' no-touch';
}

例

 if( $("html").hasClass("no-touch") ) { 

  $(document).ready(function () {
    $('a[href^=tel]').css('pointer-events', 'none');
  });

 } // end turn off pointer events

我以相同的方式使用Modernizer，如果浏览器支持某些功能或不支持功能，我将使用它来加载脚本或不加载它们以及为CSS创建后备。