1px边框在跨平台（尤其ios safari和旧android webview）中易渲染模糊或虚线，主因是sub-pixel渲染差异；推荐优先使用伪元素+scale(0.5)方案，兼容性最佳。
border: 1px solid #000 在多数浏览器下直接生效，但跨系统（尤其 iOS Safari 和旧版 Android WebView）可能渲染为虚线或模糊
这不是 bug，而是部分 WebKit 内核对 sub-pixel 渲染的处理差异：当元素尺寸非整数像素、或缩放比例非 100% 时，1px 边框可能被抗锯齿拉伸成 1.5px，视觉上发虚甚至断续。iOS 8–12 和某些 Android 4.x WebView 尤其明显。
- 优先检查是否启用了
viewport缩放：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">—— 缺失或initial-scale不为 1 会放大整个页面，导致1px变成物理 2px 渲染 - 避免在 flex 或 transform 元素上直接设
border，它们容易触发 sub-pixel 布局；可改用outline（仅支持单色，不占布局空间）或伪元素模拟 - 若必须用 border，强制让边框落在整数像素线上：给父容器加
transform: translateZ(0)或will-change: transform，触发硬件加速并重置渲染对齐
用伪元素 + transform 模拟 1px 实线边框（iOS/Android 通用方案）
这是目前最稳定、无兼容性妥协的做法：放弃原生 border，用 ::after 画一层绝对定位的细条，再用 scaleY(0.5)（竖边）或 scaleX(0.5)（横边）压到 1 物理像素。
.border-1px {
position: relative;
}
.border-1px::after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 200%;
height: 200%;
border: 1px solid #ddd;
transform: scale(0.5);
transform-origin: 0 0;
pointer-events: none;
}
关键点：width/height 设为 200% 是为了在高清屏（dpr=2）下，缩放后仍能精准对应 1 物理像素；transform-origin 必须设为 0 0，否则缩放错位；pointer-events: none 防止遮挡点击。
检测设备像素比（dpr）后动态写 border（适合需要 JS 控制的场景）
当项目已引入 JS 且需精细控制（如主题切换时同步边框粗细），可用 window.devicePixelRatio 判断后设置不同 border-width：
立即学习“前端免费学习笔记（深入）”；
- dpr === 1 →
border: 1px solid #000 - dpr === 2 →
border: 0.5px solid #000（Chrome/Safari 支持，但 iOS Safari 旧版本不认0.5px） - dpr >= 2 且不支持
0.5px→ 回退到伪元素方案，或设border: 1px solid #000+transform: scaleY(0.5)容器级缩放
注意：0.5px 并非所有浏览器都支持，测试发现 iOS Safari 10+、Chrome 50+ 可用，但 Android 4.4 WebView 完全忽略 —— 所以不能单独依赖它。
PostCSS 插件自动转换 1px 边框（工程化推荐）
如果项目用 Webpack/Vite，推荐接入 postcss-pxtorem 或专用插件 postcss-write-svg / postcss-1px-border，把源码中所有 1px 边框自动转为伪元素实现。
- 配置示例（
postcss.config.js）：module.exports = { plugins: [require('postcss-1px-border')({ selector: '.border-1px' })] }; - 写法保持简洁：
.cell { border: 1px solid #eee; }→ 插件自动注入::after规则 - 避免手动维护两套样式，也防止漏掉某个
div的边框适配
真正麻烦的不是写法，而是“什么时候该信 dpr，什么时候必须用伪元素”——很多团队在 Android 6 和 iOS 11 之间反复试错，最终发现：只要涉及 WebView 嵌入（比如微信内页、App 内 H5），一律用伪元素最省心。
