如何使用 javascript 检测网页是否在移动设备上响应

Question

我需要使用 javascript 来检测页面是否响应。在 Galaxy Note 3 上，以下是非响应页面和响应页面的值：

non-responsive: 
window.innerWidth:980 
clientWidth:980 
screen.width:640 

responsive: 
window.innerWidth:640 
clientWidth:640 
screen.width:640 

所以说如果clientWidth == screen.width 是响应式的，否则它是非响应式的是否正确？

Answer 1

如您所知，响应式设计调用媒体查询中使用了一个重要功能，通过该功能，浏览器可以针对不同的屏幕分辨率切换替代 CSS 规则以使页面“响应”。

您可以使用 document.styleSheets 在 Javascript 中枚举 CSS 规则。和 CSS 一样

@media all and (max-width:1023px) {
    /* some styles */
}

将在 cssRules 集合中添加一些 CSSMediaRule 实例。这是我的检测代码。适用于 Chrome 和 Safari。

function isResponsive() {
  if (document.styleSheets || (typeof window.CSSMediaRule).match(/function|object/)) {
    // find avaliable style sheets
    return [].some.call(document.styleSheets, function(css) {
      if (!css.cssRules) {
        return false;
      }

      // find avaliable rules
      return [].some.call(css.cssRules, function(rule) {
        if (rule instanceof CSSMediaRule) {
          return [].some.call(rule.media, function(media) {
            return !media.match(/print/i);
          });
        }
      });
    });
  }
  // There's no avaliable style sheet, or the browser doesn't support media queries
  return false;
}