var ratio = 0;
var screen = window.screen;
var ua = navigator.userAgent.toLowerCase();
var flag = true;
function getRatio() {
  if (window.devicePixelRatio !== undefined) {
    ratio = window.devicePixelRatio;
  } else if (~ua.indexOf("msie")) {
    if (screen.deviceXDPI && screen.logicalXDPI) {
      //IE
      ratio = screen.deviceXDPI / screen.logicalXDPI;
    }
  } else if (
    window.outerWidth !== undefined &&
    window.innerWidth !== undefined
  ) {
    ratio = window.outerWidth / window.innerWidth;
  }
  if (ratio == 1) {
    $(".ratio-suggest").remove();
  } else if (ratio > 1) {
    appendDom("放大", detectZoom());
  } else {
    appendDom("缩小", detectZoom());
  }
}
getRatio();
function detectZoom() {
  var ratio = 0,
    screen = window.screen,
    ua = navigator.userAgent.toLowerCase();
  if (window.devicePixelRatio !== undefined) {
    ratio = window.devicePixelRatio;
  } else if (~ua.indexOf("msie")) {
    if (screen.deviceXDPI && screen.logicalXDPI) {
      ratio = screen.deviceXDPI / screen.logicalXDPI;
    }
  } else if (
    window.outerWidth !== undefined &&
    window.innerWidth !== undefined
  ) {
    ratio = window.outerWidth / window.innerWidth;
  }
  if (ratio) {
    ratio = Math.round(ratio * 100);
  }
  return ratio;
}
function appendDom(txt, num) {
  if (flag) {
    $(".ratio-suggest").remove();
    $("body").append(`
    <div class="ratio-suggest" style="position: fixed;top: 20%;right: 20px;z-index: 999;background-color: #ebf5fd;width: 340px;padding: 10px;padding-right: 30px; border-left: 4px solid #004f94;">
    <span style="color: #000;font-size: 12px;line-height: 1.8;">您的浏览器目前处于<strong style="font-weight:bold;font-size:14px;color:#004f94">${txt}</strong>状态，页面可能会出现错位现象，建议100%大小显示。当前页面缩放比例<strong style="font-weight:bold;font-size:14px;color:#004f94">${num}%</strong></span>
    <div class="close" style="position: absolute;top: 10px;right: 10px; width: 14px;height: 14px;cursor: pointer;">
      <svg t="1536830466687" class="icon leftPop-close" viewBox="0 0 1024 1024" version="1.1"><title>不再显示</title><path d="M512 438.378667L806.506667 143.893333a52.032 52.032 0 1 1 73.6 73.621334L585.621333 512l294.485334 294.485333a52.074667 52.074667 0 0 1-73.6 73.642667L512 585.621333 217.514667 880.128a52.053333 52.053333 0 1 1-73.621334-73.642667L438.378667 512 143.893333 217.514667a52.053333 52.053333 0 1 1 73.621334-73.621334L512 438.378667z" fill="" p-id="15859"></path></svg>
    </div>
    </div>
    `);
  }
}
window.onresize = function () {
  getRatio();
};
$(".ratio-suggest").on("click", ".close", function () {
  $(".ratio-suggest").remove();
  flag = false;
});