HTML 计算网页的PPI

news2025/6/3 13:24:39

HTML 计算网页的PPI

vscode上安装live server插件，可以实时看网页预览
有个疑问：鸿蒙density是按照类别写死的吗，手机520dpi 折叠屏426dpi 平板360dpi

<html lang="en" data - overlayscrollbars - initialize>
  <header></header>
  <body>
    <div>
      <div id="messageID">heheh</div>
    </div>
    <script>
      function getdpi2() {
        const dpr = window.devicePixelRatio || 1;
        const measureDiv = document.createElement("inchUnitId");
        measureDiv.style.cssText = `
                width: 1in;
                height: 1in;
                border - color: blue;
                position: absolute;
                top: 0;
                left: 0;
                display: flex;
            `;
        document.body.appendChild(measureDiv);
        window.getComputedStyle(measureDiv).width;
        window.getComputedStyle(measureDiv).height;

        const cssWidth = measureDiv.offsetWidth;
        const cssHeight = measureDiv.offsetHeight;
        const physicalWidth = cssWidth / dpr;
        const physicalHeight = cssHeight / dpr;
        const dpx = Math.round(physicalWidth);
        const dpy = Math.round(physicalHeight);

        const screenWidth = window.screen.width * dpr;
        const screenHeight = window.screen.height * dpr;

        const screenRatio = (screenWidth / screenHeight).toFixed(4);
        const ppi = (
          Math.sqrt(Math.pow(physicalWidth, 2) + Math.pow(physicalHeight, 2)) /
          Math.sqrt(2)
        ).toFixed(4);
        const vppi = (ppi / 160).toFixed(4);

        // 手机ppi 应为 528dpi
        const phonePPI =
          Math.sqrt(Math.pow(1280, 2) + Math.pow(2720, 2)) / 6.82;
        const phoneVPPX = (phonePPI / 160).toFixed(4);

        // 平板ppi应为 366dpi
        const tablePPI =
          Math.sqrt(Math.pow(2560, 2) + Math.pow(1600, 2)) / 10.8;
        const tableVPPX = (tablePPI / 160).toFixed(4);

        // foldablePPI 应为 224dpi
        const foldablePPI =
          Math.sqrt(Math.pow(2224, 2) + Math.pow(2406, 2)) / 7.85;
        const foldableVPPX = (foldablePPI / 160).toFixed(4);

        const messageID = document.getElementById("messageID");
        messageID.innerHTML = `
                <p>dpx:${dpx}</p>                                                                                                                                      
                <p>dpy:${dpy}</p>
                <p>ppi:${ppi}</p>
                <p>phonePPI:${phonePPI}  phoneVPPX:${phoneVPPX}</p>
                <p>tablePPI:${tablePPI}  tableVPPX:${tableVPPX}</p>
                <p>foldablePPI:${foldablePPI}  foldableVPPX:${foldableVPPX}</p>
                <p>vppx:${vppi}</p>
                <p>devicePixelRatio:${devicePixelRatio}</p>
                <p>physicalWidth:${physicalWidth}</p>
                <p>physicalHeight:${physicalHeight}</p>
                <p>window.screen.width:${window.screen.width}</p>
                <p>window.screen.height:${window.screen.height}</p>
            `;
        document.body.removeChild(measureDiv);
      }

      setInterval(() => {
        getdpi2();
      }, 200);
    </script>
  </body>
</html>