PowerToys屏幕标尺通过Win+Shift+M启动，切换至「边界」模式，拖动测量目标区域获取X/Y偏移及宽高像素值，再结合img.naturalWidth/Height计算缩放比，将渲染尺寸换算为原始像素坐标（如X=84px,Y=132px,W=196px,H=88px，缩放比0.25→coords="21,33,70,55"），并用outline或JS动态覆盖验证对齐。
PowerToys 屏幕标尺怎么量 coords 坐标
直接用 Windows 自带的标尺工具量出来的像素值，不能直接填进 coords——它测的是屏幕渲染尺寸，而 coords 必须基于图片原始像素（naturalWidth/naturalHeight）。但标尺仍是调试热区偏移最有效的手段之一。
实操建议：
- 先在浏览器中打开页面，让图片完成加载（确保
img.naturalWidth可读） - 按下
Win + Shift + M启动 PowerToys Screen Ruler，切换到「边界」模式 - 把标尺左上角对准图片左上角（可临时加
outline: 2px solid red辅助定位） - 拖动标尺覆盖目标热区，记录显示的宽高和起始偏移（例如：X=84px, Y=132px, W=196px, H=88px）
- 再用 JS 控制台查真实原始尺寸：
console.log(img.naturalWidth, img.naturalHeight) - 若原始图是 1600×900，当前渲染尺寸是 400×225，则缩放比为 0.25 → 真实
coords应为"21,33,70,55"（四舍五入取整）
为什么截图+PS 量出来的坐标常出错
设计稿或标注图给的“缩放后坐标”，比如 coords="100,80,180,140"，默认是按当前视口尺寸写的。但 HTML 图像映射不认这个——它只认图片文件本身的像素网格。你用 CSS 把一张 2000×1000 的图缩成 500×250 显示，coords 还得按 2000×1000 算，否则点不到。
常见翻车点：
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 用 image-map.net 导出时没选「Use original image size」选项
- 在 Figma/Photoshop 里用「导出选区」得到的是缩放后尺寸，不是 natural 尺寸
- 开发环境开了 125% 系统缩放，标尺读数 ×1.25，但
naturalWidth不变 - 浏览器地址栏、书签栏高度影响了图片
offsetTop，导致标尺起始点偏移
如何验证 coords 是否真对齐
别只信肉眼或标尺读数。最可靠的验证方式是把 area 可视化出来：
- 给对应
area加临时样式：style="outline: 2px dashed blue; position: absolute;"（需配合父容器position: relative） - 或者用 JS 动态画一个
div覆盖热区：div.style.left = x + 'px'; div.style.top = y + 'px'; ... - 右键图片 → 「检查」→ 在 Elements 面板中 hover 每个
area，看高亮框是否贴合目标区域 - 如果高亮框明显漂移，说明
coords没换算回原始尺寸，或usemap指向错误
移动端真机测量必须做
桌面端标尺再准，也代替不了真机验证。iOS Safari 和安卓 WebView 对小热区的点击容差极低——标尺量出 44×44px 的区域，在 iPhone 上可能手指一滑就点空。
关键动作：
- 用 Safari 开发者工具连真机，实时查看
touchstart事件的clientX/clientY - 在手机上长按热区，看是否触发
:active样式或出现系统反馈（如高亮色块） - 用 iOS 的「辅助功能」→「放大器」功能，把热区局部放大 2×，确认手指能稳定覆盖
- 物理尺寸必须 ≥ 48×48px：用标尺量设备屏幕上的实际像素，不是 CSS 像素
真正卡住人的不是不会写 coords，而是以为“量出来就能用”。原始尺寸、缩放比、设备 DPI、触摸容差——四个变量少盯住一个，上线后热区就飘。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
