当前位置: 首页 > news >正文

HTML 计算网页的PPI

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>

在这里插入图片描述

相关文章:

  • 【音频处理】java流式调用ffmpeg命令
  • 【穷举】数字方格
  • Nat Commun项目文章 ▏小麦CUTTag助力解析转录因子TaTCP6调控小麦氮磷高效利用机制
  • Linux系统管理与编程24:基础条件准备-混搭“本地+阿里云”yum源
  • mqtt协议连接阿里云平台
  • 华为防火墙NAPT配置
  • Spark-Core Project
  • 深入解析注解框架实现原理:从源码到实战
  • 内存泄漏检测之Valgrind的使用
  • c++数据结构7——二叉树的遍历
  • 从实验室到商用!铁电液晶如何改写显示技术格局?
  • IT Tools 部署
  • 20中数组去重的方法20种数组去重的方法
  • 【数学】求最大公约数问题
  • 贝锐蒲公英工业路由器R300A海外版:支持多国4G频段,全球组网
  • Cadence Allegro中设置主画面最小显示间距
  • JAVA:Kafka 消息可靠性详解与实践样例
  • 常见关系型数据库对比指南
  • 【Linux笔记】Shell-脚本(下)|(常用命令详细版)
  • 利用Python制作环保志愿者招募海报