当前位置：首页 > article >正文

HTML 计算网页的PPI

article 2025/8/7 20:02:37

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 应为 528dpiconst phonePPI =Math.sqrt(Math.pow(1280, 2) + Math.pow(2720, 2)) / 6.82;const phoneVPPX = (phonePPI / 160).toFixed(4);// 平板ppi应为 366dpiconst tablePPI =Math.sqrt(Math.pow(2560, 2) + Math.pow(1600, 2)) / 10.8;const tableVPPX = (tablePPI / 160).toFixed(4);// foldablePPI 应为 224dpiconst 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>