检测桌面浏览器的初步想法

必须指出，实际上并没有一种确切的方法可以判定终端是否一个桌面浏览器，但是，我们总是可以把多种条件的组合一起去检查，进而来综合判断出，对方终端是否一个非移动类型的终端。这里尝试列出几点：

• ua 字符串没有返回 Android/iPhone/WinPhone 等特征的，很可能是桌面浏览器；
• window.screenX 该值返回浏览器窗体左上角在屏幕的坐标位置。因为移动终端通常总是独占屏幕的，也是在0, 0的坐标。如果 screenX 返回非 0，很可能是桌面浏览器；
• window.devicePixelRatio and screen.width 若然屏幕密度 devicePixelRatio 为 1，并且等于屏幕分辨率 screen.width，很可能是桌面浏览器；
• 分辨率能不能判断是否移动终端？有些手机的屏幕非常高，据此来判断也不容易；
• window.orientation 桌面浏览器很少是 portrait 纵向的。

外国已经有人利用以上的特性写成一个 js 库，源码如下：

/*
ReView.js 0.65b. The Responsive Viewport. responsiveviewport.com.
Developed by Edward Cant. @opticswerve.
*/
function Viewport() {
  this.viewport = function(a) {
    var b = document,
        d = b.documentElement;
    b.head = b.head || b.getElementsByTagName("head")[0];
    var e = screen,
        c = this,
        f = window;
    c.bScaled = !1;
    c.bSupported = !0;
    b.addEventListener === a ? c.bSupported = !1 : b.querySelector === a ? c.bSupported = !1 : f !== parent ? c.bSupported = !1 : f.orientation === a && (c.bSupported = !1);
    c.updateOrientation();
    c.updateScreen();
    c.dpr = 1;
    var g = f.devicePixelRatio;
    g === a ? c.bSupported = !1 : c.dpr = g;
    c.fromHead();
    this.meta !== a && (c.iHeight = c.height, c.iMaxScale = c.maxScale, c.iMinScale =
    c.minScale, c.iUserScalable = c.bUserScalable, c.iWidth = c.width);
    c.defaultWidth = 980;
    e.width > c.defaultWidth && (c.defaultWidth = e.width);
    e.height > c.defaultWidth && (c.defaultWidth = e.height);
    c.ready(function() {
      if (c.bSupported) {
        if (f.screenX !== 0) c.bSupported = false;
        else if (c.width !== a) {
          var e;
          if (d.offsetHeight <= d.clientHeight) {
            e = d.style.height;
            d.style.height = d.clientHeight + 128 + "px"
          }
          if (c.width === "device-width") {
            if (d.clientWidth !== c.screenWidth) c.bSupported = false
          } else if (c.width !== d.clientWidth) c.bSupported = false;
          e === "" ? d.style.height = "auto" : e !== a && (d.style.height = e)
        }
        if (c.bSupported) {
          b.addEventListener("touchend", function() {
            var b = (new Date).getTime();
            if (c.lastTouch !== a && b - c.lastTouch < 500 && c.bUserScalable === true) c.bScaled = true;
            c.lastTouch = b
          }, false);
          b.addEventListener("gestureend", function(a) {
            if (a.scale !== 1 && c.bUserScalable === true) c.bScaled = true
          }, false);
          b.addEventListener("resize", function() {
            c.updateCheck()
          }, false);
          b.addEventListener("orientationchange", function() {
            var b = c.orientation;
            c.updateOrientation();
            if (b !== c.orientation) {
              c.updateScreen();
              if (c.bUserScalable === true) c.bScaled = true;
              c.orientationChangePolicy !== a && c.orientationChangePolicy()
            }
          }, false)
        }
      }
      c.readyPolicy !== a && c.readyPolicy()
    })
  };
  this.fromContentString = function(a) {
    for (var a = a.split(","), b, d, e = 0; e < a.length; e++) b = a[e].split("="), 2 === b.length && (d = b[0].trim(), b = b[1].trim(), isNaN(parseFloat(b)) || (b = parseFloat(b)), "width" === d ? this.width = b : "height" === d ? this.height = b : "initial-scale" === d ? this.initialScale = b : "maximum-scale" === d ? this.maxScale = b : "minimum-scale" === d ? this.minScale = b : "user-scalable" === d && (this.bUserScalable = "no" === b ? !1 : !0))
  };
  this.fromHead = function() {
    var a = this.meta = document.head.querySelector("meta[name=viewport]");
    null === a ? this.meta = void 0 : a.hasAttribute("content") && this.fromContentString(a.getAttribute("content"))
  };
  this.ready = function(a) {
    var b = document;
    b.addEventListener && b.addEventListener("DOMContentLoaded", function() {
      b.removeEventListener("DOMContentLoaded", arguments.callee, !1);
      a()
    }, !1)
  };
  this.setDefault = function(a, b) {
    this.bUserScalable = !0;
    this.height = void 0;
    this.maxScale = 5;
    this.minScale = 0.25;
    this.width = this.defaultWidth;
    this.update(a, b)
  };
  this.setMobile = function(a, b) {
    this.bScaled ? b() : (void 0 === this.iWidth ? (this.bUserScalable = !1, this.height = void 0, this.minScale = this.maxScale = 1, this.width = "device-width") : (this.bUserScalable = this.iUserScalable, this.height = this.iHeight, this.maxScale = this.iMaxScale, this.minScale = this.iMinScale, this.width = this.iWidth), this.update(a, b))
  };
  this.toString = function() {
    var a = "";
    void 0 !== this.width && (a += "width=" + this.width + ", ");
    void 0 !== this.height && (a += "height=" + this.height + ", ");
    void 0 !== this.maxScale && (a += "maximum-scale=" + this.maxScale + ", ");
    void 0 !== this.minScale && (a += "minimum-scale=" + this.minScale + ", ");
    !0 === this.bUserScalable ? a += "user-scalable=yes" : !1 === this.bUserScalable && (a += "user-scalable=no");
    return a
  };
  this.update = function(a, b) {
    var d = this;
    if (d.bSupported) {
      d.updateFailure = b;
      d.updateSuccess = a;
      var e = d.width;
      "device-width" === e && (e = d.screenWidth);
      e = d.prevWidth;
      "device-width" === e ? e = d.screenWidth : void 0 === e && (e = document.documentElement.clientWidth);
      d.updateMeta();
      d.updateTimeout = setTimeout(function() {
        d.updateCheck()
      }, 500)
    } else b()
  };
  this.updateCheck = function() {
    if (void 0 !== this.updateTimeout) {
      var a = !1,
          b = document.documentElement.clientWidth;
      this.width === b ? a = !0 : "device-width" === this.width && this.screenWidth === b && (a = !0);
      clearTimeout(this.updateTimeout);
      this.updateTimeout = void 0;
      a ? (this.prevWidth = this.width, this.updateSuccess(), this.viewportChange()) : (this.bSupported = !1, this.updateFailure());
      this.updateSuccess =
      this.updateFailure = void 0
    }
  };
  this.updateMeta = function() {
    var a = document,
        b = this.meta;
    void 0 === b ? (b = this.meta = a.createElement("meta"), b.setAttribute("name", "viewport"), b.setAttribute("content", this.toString()), a.head.appendChild(b)) : b.setAttribute("content", this.toString())
  };
  this.updateOrientation = function() {
    var a = window.orientation;
    this.orientation = a = 0 === a || 180 === a ? "portrait" : 90 === a || -90 === a ? "landscape" : document.documentElement.clientWidth > document.documentElement.clientHeight ? "landscape" : "portrait"
  };
  this.updateScale = function() {
    this.scale = this.screenWidth / window.innerWidth
  };
  this.updateScreen = function() {
    var a = this.screenHeight = screen.height,
        b = this.screenWidth = screen.width;
    "portrait" === this.orientation ? b > a && (this.screenHeight = b, this.screenWidth = a) : b < a && (this.screenHeight = b, this.screenWidth = a)
  };
  this.viewportChange = function() {
    var a = document.createEvent("Event");
    a.initEvent("viewportChange", !0, !0);
    a.bUserScalable = this.bUserScalable;
    a.maxScale = this.maxScale;
    a.minScale = this.minScale;
    a.width = this.width;
    document.dispatchEvent(a)
  };
  return !0
}
var reView;
(function(a) {
  reView = new ReView;
  if (reView.v.bSupported) try {
    if ("sessionStorage" in a && null !== a.sessionStorage) {
      var b = sessionStorage.getItem("reViewMode");
      "core" === reView.mode && "default" === b ? reView.setDefault() : "default" === reView.mode && "core" === b && reView.setCore()
    } else reView.v.bSupported = !1
  } catch (d) {
    reView.v.bSupported = !1
  }
})(window);

function ReView() {
  this.mode = "default";
  this.v = new Viewport;
  this.v.viewport();
  this.v.readyPolicy = function() {
    reView.ready()
  };
  this.v.bSupported && "device-width" === this.v.width && (this.mode = "core");
  this.failure = function() {
    var a = reView;
    a.mode === "default" && a.v.iWidth !== void 0 && window.location.reload();
    a.failurePolicy !== void 0 && a.failurePolicy()
  };
  this.ready = function() {
    var a = document.getElementsByClassName("reView"),
        b = a.length,
        d = reView;
    if (d.v.bSupported) {
      for (d.mode === "default" && sessionStorage.getItem("reViewMode") !== "core" && d.success(); b--;) a[b].style.display = "inline";
      document.body.addEventListener("click", function(a) {
        if (a.target.hasAttribute("class") && a.target.getAttribute("class").indexOf("reView") > -1) {
          a.preventDefault();
          d.mode === "default" ? d.setCore() : d.mode === "core" && d.setDefault()
        }
      })
    } else
    for (screen.width >= 1024 && d.success(); b--;) a[b].style.display = "none"
  };
  this.setCore = function() {
    if (this.mode === "core") this.success();
    else if (this.v.bSupported) {
      try {
        sessionStorage.setItem("reViewMode", "core")
      } catch (a) {}
      this.v.setMobile(function() {
        reView.mode = "core";
        reView.success()
      }, reView.failure)
    } else this.failure()
  };
  this.setDefault = function() {
    if (this.mode === "default") this.success();
    else if (this.v.bSupported) {
      try {
        sessionStorage.setItem("reViewMode", "default")
      } catch (a) {}
      this.v.setDefault(function() {
        reView.mode = "default";
        reView.success()
      }, reView.failure)
    } else this.failure()
  };
  this.success = function() {
    var a = reView;
    a.v.bSupported && a.updateAnchors();
    a.successPolicy !== void 0 && a.successPolicy()
  };
  this.updateAnchors = function() {
    var a = document.getElementsByClassName("reView"),
        b = a.length;
    if (this.mode === "core") for (; b--;) a[b].innerHTML = a[b].hasAttribute("data-coreText") ? a[b].getAttribute("data-coreText") : "Default View";
    else
    for (; b--;) a[b].innerHTML = a[b].hasAttribute("data-defaultText") ? a[b].getAttribute("data-defaultText") : "Core View"
  };
  return !0
};

随着有越来越多的高分辨率设备，所以依靠分辨率的这个方法也不灵了。