HTML怎么做屏幕尺寸显示_html实时显示屏幕尺寸工具【从零开始】-html教程-PHP中文网

应使用 window.innerwidth 和 window.innerheight 获取实时视口尺寸，并监听 resize 事件配合防抖更新，避免仅在加载时读取；注意其包含滚动条宽度但不含浏览器 ui，移动端需加 viewport meta，dpr 应在 resize 回调中重读。

html怎么做屏幕尺寸显示_html实时显示屏幕尺寸工具【从零开始】

用 `window.innerWidth` 和 `window.innerHeight` 获取实时视口尺寸

浏览器窗口可渲染区域（不含滚动条、地址栏等）的宽高，直接读 window.innerWidth 和 window.innerHeight 就行，不需要 DOM 查询或计算。这两个值是动态的，但不会自动更新——你得自己监听变化。

常见错误是只在页面加载时取一次，结果窗口缩放后数字卡死。必须配合 resize 事件才能“实时”。

注意：不是 screen.width/screen.height，那是设备物理分辨率，和用户当前窗口大小无关
innerWidth/innerHeight 包含垂直/水平滚动条宽度（如有），但不包含浏览器 UI（如书签栏）
移动端 Safari 在地址栏收起/展开时也会触发 resize，数值会跳变，属正常行为

监听 `resize` 事件并防抖输出

频繁拖拽窗口会导致 resize 在毫秒级连续触发，直接更新 DOM 可能卡顿。必须加简单防抖，比如延迟 100ms 更新一次。

下面这段代码可以直接粘贴到 HTML 的 <script></script> 中运行：

let resizeTimer;
window.addEventListener('resize', () => {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(() => {
    const w = window.innerWidth;
    const h = window.innerHeight;
    document.getElementById('size-display').textContent = `${w} × ${h}`;
  }, 100);
});

别用 debounce 工具函数——这里不需要引入外部库，原生 setTimeout 足够
如果页面没有 <span id="size-display"></span>，记得先加一个容器元素，否则脚本报错 Cannot set property 'textContent' of null
移动端建议加 viewport meta，否则 innerWidth 可能返回 980 这类缩放后值：<meta name="viewport" content="width=device-width, initial-scale=1">

显示 DPR（设备像素比）辅助响应式调试

光看 CSS 像素不够，尤其做高清图适配或 Canvas 渲染时，得知道 window.devicePixelRatio。它表示 1 个 CSS 像素对应几个物理像素。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

把它和视口尺寸一起显示，能快速判断是否处于 Retina 屏、缩放状态或模拟器环境：

const dpr = window.devicePixelRatio || 1;
document.getElementById('dpr-display').textContent = `DPR: ${dpr.toFixed(1)}`;

DPR 为 2 表示典型 Retina 屏；Windows 缩放 125% 时可能是 1.25；Chrome 开发者工具模拟 iPhone 14 Pro 会返回 3
DPR 不会触发 resize，但它可能在系统缩放设置变更后突变（如 macOS 切换显示器），所以建议也放在 resize 回调里重读
不要用 matchMedia 查 DPR——它不响应动态变化，且 API 更重