HTML 计算网页的PPI

HTML 计算网页的PPI

vscode上安装live server插件,可以实时看网页预览

有个疑问: 鸿蒙density是按照类别写死的吗,手机520dpi 折叠屏426dpi 平板360dpi

html 复制代码
<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>
相关推荐
郝学胜-神的一滴18 分钟前
Cesium绘制线:从基础到高级技巧
前端·javascript·程序人生·线性代数·算法·矩阵·图形渲染
蒙奇D索大1 小时前
【计算机网络】408计算机网络高分指南:物理层编码与调制技术精讲
java·前端·学习·计算机网络
无盐海1 小时前
CSRF漏洞攻击(跨站请求伪造攻击)
前端·csrf
慧一居士1 小时前
CSS3 全部功能点介绍,使用场景,对应功能点完整使用示例
前端
烛阴1 小时前
深入Lua包(Package)与依赖管理
前端·lua
IT_陈寒1 小时前
5个Vue3性能优化技巧,让你的应用提速50% 🚀(附实测对比)
前端·人工智能·后端
god002 小时前
chromium项目中添加源文件(BUILD.gn项目中添加源文件)
java·服务器·前端
快乐非自愿2 小时前
Vue 缓存之坑,变量赋值方式和响应式数据
前端·vue.js·缓存
Github掘金计划2 小时前
别再用 “臃肿监控” 了!这款轻量监控神器开源 3 月狂揽 1.3k Star!
前端·监控
努力学习的少女2 小时前
SpaekSql函数
前端·数据库