按钮文字在Retina屏发虚，主因是浏览器将CSS像素误当物理像素，需通过viewport声明、动态根字号、rem单位及text-rendering优化解决；边框阴影应按DPR缩放；点击区域须满足最小尺寸并禁用缩放；图标优先用内联SVG。
按钮文字在Retina屏上发虚？别只调font-size
按钮文字模糊不是字体太小，是浏览器把CSS像素当物理像素用了。高分屏下window.devicePixelRatio为2或3时，若CSS里写font-size: 16px，实际只占32或48个物理像素——但系统默认渲染逻辑没对齐，导致亚像素模糊。
关键不是“放大字号”，而是让文本绘制引擎拿到足够清晰的锚点：
- 确保
<meta name="viewport" content="width=device-width, initial-scale=1.0">已声明，否则clientWidth和getBoundingClientRect()返回值不可靠 - 避免用
transform: scale(1.2)强行放大按钮整体——这会让文字、边框、阴影全被插值拉伸 - 优先用
rem单位，并在JS中按DPR动态设document.documentElement.style.fontSize，例如：document.documentElement.style.fontSize = (16 * dpr) + 'px'，再让按钮内文字继承 - 对特别敏感的按钮文字，可加
text-rendering: optimizeLegibility，但注意Firefox不支持该值，需配合-webkit-font-smoothing: antialiased
按钮边框和阴影在2x屏上变细？物理像素没对齐
高清屏下border: 1px solid #ccc实际只画1个物理像素，在DPR=2设备上几乎不可见；同理box-shadow: 0 2px 4px rgba(0,0,0,0.2)的2px偏移也会被压缩失真。
解决思路是让CSS尺寸对应物理像素密度：
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 边框不要死守
1px，改用border: calc(1px * (1 / dpr)) solid #ccc（需配合JS注入CSS变量）或直接写border: 0.5px solid #ccc（Chrome/Safari支持，Firefox仍fallback为1px） - 阴影偏移量也按DPR缩放：用
box-shadow: 0 calc(2px * (1 / dpr)) calc(4px * (1 / dpr)) rgba(0,0,0,0.2) - 更稳妥的做法是放弃px，改用
rem或em定义边框和阴影，并确保根字号已按DPR缩放 - 禁用
image-rendering: pixelated——它对文字/边框无效，只影响<img>和<canvas>
按钮点击区域在高分屏上难触发？别忽略touch-action和缩放行为
用户反馈“点不中按钮”，常因两个隐藏问题叠加：一是CSS像素尺寸过小导致触摸热区不足，二是页面被意外缩放干扰了坐标映射。
实操必须检查以下三点：
- 按钮最小点击宽度/高度至少设为
44px（iOS人机指南）或48px（Material Design），且用min-width/min-height硬约束，不能只靠padding撑开 -
<meta>中必须含user-scalable=no或maximum-scale=1.0，否则用户双指缩放后，getBoundingClientRect()返回的坐标与真实触点错位 - 给按钮加
touch-action: manipulation，让浏览器跳过300ms延迟并优化触摸响应，尤其在DPR突变（如插拔外接显示器）后能快速重校准 - 避免在按钮父容器上用
transform: scale()——子元素的offsetWidth和事件坐标会失真，改用zoom也不行，它已被Chrome标记为非标准
按钮图标模糊？SVG比PNG更可靠，但要防内联渲染陷阱
用<img src="icon.png">加载图标，在DPR=2屏上必然模糊；即使用srcset提供@2x图，也依赖浏览器选择逻辑，且无法动态着色。
推荐方案是内联SVG，但要注意几个坑：
- SVG本身不含DPR感知，需显式设
width和height属性为CSS像素值（如width="24"），再用CSS控制显示尺寸：svg { width: 24px; height: 24px; } - 禁止给SVG外层容器加
transform: scale(0.5)来“缩小图标”——这会导致内部路径被栅格化模糊 - 若用CSS
background-image: url(icon.svg)，确保SVG文件中无viewBox以外的宽高硬编码，且导出时选“响应式”选项 - 需要动态换色的图标，优先用
<svg><use href="#icon"></svg>+<defs>，而非<img>，避免跨域和缓存问题
最易被忽略的是：按钮清晰度问题往往不是单点缺陷，而是viewport、DPR同步、CSS单位、触摸策略四者耦合失效的结果。改完一个地方，务必在MacBook Retina、Windows 125%缩放、iPhone竖横屏切换三个场景下连点十次验证——因为模糊常在状态切换瞬间才暴露。
