flexible的用法

flexible.js直接引入页面中,用谷歌浏览器模拟移动端会出现data-dpr="1"的情况


<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no">

<meta name="flexible" content="" />


  //   if (!dpr && !scale) {
  //     var isAndroid = win.navigator.appVersion.match(/android/gi);
  //     var isIPhone = win.navigator.appVersion.match(/iphone/gi);
  //     var devicePixelRatio = win.devicePixelRatio;
  //     if (isIPhone) {
  //       // iOS下,对于2和3的屏,用2倍的方案,其余的用1倍方案
  //       if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
  //         dpr = 3;
  //       } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) {
  //         dpr = 2;
  //       } else {
  //         dpr = 1;
  //       }
  //     } else {
  //       // 其他设备下,仍旧使用1倍的方案
  //       dpr = 1;
  //     }
  //     scale = 1 / dpr;
  //   }
  //   docEl.setAttribute("data-dpr", dpr);
  //   if (!metaEl) {
  //     metaEl = doc.createElement("meta");
  //     metaEl.setAttribute("name", "viewport");
  //     metaEl.setAttribute(
  //       "content",
  //       "initial-scale=" +
  //         scale +
  //         ", maximum-scale=" +
  //         scale +
  //         ", minimum-scale=" +
  //         scale +
  //         ", user-scalable=no"
  //     );
  //     if (docEl.firstElementChild) {
  //       docEl.firstElementChild.appendChild(metaEl);
  //     } else {
  //       var wrap = doc.createElement("div");
  //       wrap.appendChild(metaEl);
  //       doc.write(wrap.innerHTML);
  //     }
  //   }
  if (!dpr && !scale) {
    var devicePixelRatio = win.devicePixelRatio;
    dpr = devicePixelRatio;
    scale = 1 / dpr;

    var dataDpr;
    if (devicePixelRatio >= 2.5 && (!dpr || dpr >= 2.5)) {
      dataDpr = 3;
    } else if (devicePixelRatio >= 1.5 && (!dpr || dpr >= 1.5)) {
      dataDpr = 2;
    } else {
      dataDpr = 1;
    }

    docEl.setAttribute("data-dpr", dataDpr);
  }

  if (!doc.querySelector('meta[name="viewport"]')) {
    metaEl = doc.createElement("meta");
    metaEl.setAttribute("name", "viewport");
    metaEl.setAttribute(
      "content",
      "width=device-width, initial-scale=" +
        scale +
        ", maximum-scale=" +
        scale +
        ", minimum-scale=" +
        scale +
        ", user-scalable=no"
    );
    if (docEl.firstElementChild) {
      docEl.firstElementChild.appendChild(metaEl);
    } else {
      var wrap = doc.createElement("div");
      wrap.appendChild(metaEl);
      doc.write(wrap.innerHTML);
    }
  }


你可能感兴趣的:(前端)