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>
相关推荐
小牛itbull4 分钟前
初始化electron项目运行后报错 electron uninstall 解决方法
前端·javascript·electron
闲蛋小超人笑嘻嘻26 分钟前
前端面试十四之webpack和vite有什么区别
前端·webpack·node.js
rggrgerj1 小时前
Vue3 组件完全指南代码
前端·javascript·vue.js
golang学习记2 小时前
从0死磕全栈之Next.js App Router动态路由详解:从入门到实战
前端
huangql5202 小时前
基于前端+Node.js 的 Markdown 笔记 PDF 导出系统完整实战
前端·笔记·node.js
在逃的吗喽3 小时前
Vue3新变化
前端·javascript·vue.js
yqwang_cn3 小时前
打造优雅的用户体验:自定义jQuery工具提示插件开发全解析
前端·jquery·ux
小Tomkk3 小时前
AI 提效:利用 AI 从前端 快速转型为UI/UX设计师和产品
前端·人工智能·ui
Demoncode_y4 小时前
Vue3中基于路由的动态递归菜单组件实现
前端·javascript·vue.js·学习·递归·菜单组件
杨超越luckly4 小时前
HTML应用指南:利用POST请求获取全国中国工商农业银行网点位置信息
大数据·前端·html·数据可视化·银行网点