Solve the problem that the css code written by ps cut graph measurement is different from the web page display

Reference: https://www.cnblogs.com/LiuWeiLong/p/6058059.html

Today, I found that there may be zooming on the win10 computer. There is a problem of cutting the picture 120px, css setting 120px, but the webpage display shows 120 * 1.25 px.

/ * * 
       * Dynamically change the global page zoom to prevent the cut and display from being different 
       * / 
       window.onresize = function (e) { 
        detectZoom (); 
      } 
      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;
          document.querySelector("html").style.fontSize = (16 / (ratio / 100)) + "px";
      }

 

Guess you like

Origin www.cnblogs.com/xiaqiuchu/p/12741869.html