高清屏边框变粗、图像锯齿源于css像素与物理像素未对齐，需通过伪元素+scaley、渐变/svg背景或动态rem适配dpr，禁用固定viewport缩放。
高清屏下边框变粗、图像锯齿，本质是 CSS 像素和物理像素没对齐——dpr（设备像素比）让 1px 在屏幕上实际占 2 或 3 个发光点。这不是 bug，但必须主动适配，不能只靠写 border: 1px。
用伪元素 + scaleY 模拟真实 1 物理像素
这是目前最稳定、兼容性最好的方案，尤其适合单边边框（如下边框）。
- 给目标元素设
position: relative，清除原有 border - 用
::after绝对定位画一条 1px 高的色块，放在底部或右侧 - 加
transform: scaleY(0.5)，再设transform-origin: 0 0防偏移 - 注意父容器不能有
overflow: hidden，否则伪元素会被裁掉
避免直接写 0.5px 边框
虽然部分 iOS 设备支持 border-width: 0.5px，但多数安卓 WebView 不渲染或直接忽略，导致边框消失。
- 不要依赖媒体查询统一降为 0.5px，如
@media (-webkit-min-device-pixel-ratio: 2) { * { border-width: 0.5px; } } - 若真要用，需运行时检测：创建测试 div，写 0.5px 边框，检查
offsetHeight是否为 1，再动态加 class - 该方法维护成本高，上线后容易漏测机型，不推荐作为主方案
用渐变背景或 SVG 替代 border
绕过 border 渲染机制，用背景“画线”，可控性强且无缩放干扰。
- 单侧线可用
background-image: linear-gradient(to bottom, #999 50%, transparent 50%)，配合background-size: 1px 1px和background-repeat: repeat-x - SVG 方案更精确：
background-image: url("data:image/svg+xml,...")，其中stroke-width="0.5"可被高清屏正确解析 - 适合需要圆角、虚线或复杂样式边框的场景，但要注意 base64 过长可能影响首屏加载
viewport 与缩放逻辑必须协同处理
如果 viewport 设置不当，比如 initial-scale=0.5 或写死 width，会放大整个渲染层，加剧边框粗、文字糊、图片锯齿等问题。
- 标准 viewport 应为：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> - 禁用
user-scalable=no会影响可访问性；如必须锁定，改用touch-action: manipulation - rem 基准要动态算：
document.documentElement.style.fontSize = clientWidth / 375 * 16 + 'px'，并监听resize和orientationchange
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
