Preliminary ideas on detecting desktop browsers

It must be pointed out that there is actually no definite way to determine whether the terminal is a desktop browser. However, we can always check the combination of multiple conditions to make a comprehensive judgment, whether the peer terminal is a non-mobile terminal. Here we try to list the following points:

• The UA string does not return Android, iPhone, winphone, and other features, probably in a desktop browser;
• Window. screenx: return the coordinates of the screen in the upper left corner of the browser form. Because mobile terminals usually occupy the screen exclusively, they are also in the coordinates of 0 and 0. If the return value of screenx is not 0, it is probably a desktop browser;
• Window. devicepixelratio and screen. Width if the screen density of devicepixelratio is 1 and is equal to the screen resolution of screen. Width, it is probably a desktop browser;
• Can the resolution determine whether it is a mobile terminal? Some mobile phones have very high screens, so it is not easy to judge them accordingly;
• Window. Orientation desktop browsers are rarely portrait oriented by portrait.

Someone in foreign countries has used the above features to write a JS library. The source code is as follows:

/*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};