移动端1px边框变粗是因高dpr设备（如iphone retina屏）将css 1px渲染为2或3物理像素；bootstrap未内置适配方案，需用伪元素+transform方案手动实现，仅对dpr≥2设备启用，并注意父元素定位与颜色手动设置。
为什么移动端的 1px 边框看起来比预期粗？
这不是 Bootstrap 的 bug，而是设备像素比（dpr）导致的渲染问题。iPhone 等 Retina 屏设备 dpr=2 或 3，CSS 中写的 1px 实际会渲染成 2 物理像素或 3 物理像素宽，视觉上变粗、模糊。Bootstrap 默认的边框样式（比如 .border、.border-top）用的就是普通 1px solid，没做适配。
Bootstrap 本身不提供 1px 边框解决方案
截至 Bootstrap 5.3，框架未内置针对高 DPR 设备的细边框 CSS 类。它依赖标准 CSS 渲染逻辑，不会自动插入 transform: scaleY(0.5) 或伪元素 + transform 这类 hack。所以不能指望加个 .border-1px 就生效。
- 官方文档和源码中查不到
border-1px、thin-border等类名 -
border-width支持的值仍是1px、2px等固定单位，不感知 dpr - 如果项目已用 Bootstrap，需自行补充适配逻辑，而非切换或禁用其边框类
如何在 Bootstrap 项目里补上 1px 边框支持？
推荐用伪元素 + transform 方案，轻量、兼容性好（iOS 8+ / Android 4.4+），且不影响原有布局。关键点是：只对高 DPR 设备启用，避免在 dpr=1 的桌面端误缩放。
/* 在 Bootstrap 引入后追加这段 CSS */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.border-1px::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1px;
background-color: #ddd;
transform: scaleY(0.5);
transform-origin: 0 0;
}
/* 若需下边框，可改 bottom: 0；左右边框需调整 width/height 和 transform */
}
- 必须给父元素设
position: relative，否则伪元素定位失效 - 不要直接覆盖
.border类，避免影响其他组件；建议新建语义类如.border-1px - 颜色需手动指定（
background-color），无法继承border-color，可用 CSS 变量统一管理 - 圆角、阴影、border-radius 与该方案不兼容，需单独处理
有没有更现代的替代方式？
CSS thin 关键字理论上可行，但实际支持极差：border: thin solid #ddd 在 Safari 和多数安卓浏览器中仍渲染为 2px，Chrome 仅在部分版本中接近 1px，不可靠。不如坚持伪元素方案。
-
border-image+ SVG 切片能精准控制，但增加请求、维护成本高，小项目没必要 - JS 动态写 style（如根据
window.devicePixelRatio设置border-width）会触发重排，且 SSR 场景下无法预判 dpr - PostCSS 插件（如
postcss-pxtorem）作用于根字体大小，不解决边框物理像素问题
真正要落地，就老老实实加一层伪元素，把 dpr 判断和缩放逻辑封装进自己的 SCSS mixin 里——否则每次写边框都要手动算 transform: scaleY(0.33)。
