iOS移动端0.5px虚线边框左右侧不显示问题求助

问题原因 #

iPhone的Retina屏幕（设备像素比DPR≥2）对小于1px的虚线边框存在渲染精度差异：设置border-width: 0.5px时，浏览器计算虚线的线段与间隙时，左右方向的线段长度可能被压缩到不足一个物理像素单位，导致被渲染引擎直接忽略；iPad屏幕尺寸更大，渲染精度阈值更宽松，因此无此问题。viewport标签仅解决逻辑像素与物理像素的基础映射，无法覆盖这类细分渲染逻辑问题。

可行解决方案 #

方案1：伪元素+缩放实现细虚线边框 #

通过伪元素创建1px边框再缩放0.5倍，既保证边框精细度，又能让浏览器正确渲染所有边的虚线样式，兼容性更好。

/* 原元素移除原有border设置，添加相对定位 */
.target-element {
  position: relative;
  width: 200px;
  height: 120px;
  padding: 1rem;
  /* 保留其他原有样式 */
}

/* 伪元素实现细虚线边框 */
.target-element::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px dashed #333;
  transform: scale(0.5);
  transform-origin: top left;
  pointer-events: none; /* 不干扰原元素交互 */
}

方案2：调整边框宽度至0.6px（快速临时解决） #

若不想修改结构，可尝试将边框宽度设为0.6px，这个值在iPhone渲染引擎中能被正确识别，既保留接近0.5px的精细度，又能让所有边的虚线正常显示。

.target-element {
  border: 0.6px dashed #333;
}

为什么1.1px能正常显示？ #

当边框宽度设为1.1px时，对应物理像素为2.2px（DPR=2）或3.3px（DPR=3），此时虚线线段长度足够跨越至少一个物理像素单位，浏览器能完整渲染所有边的虚线样式。

内容的提问来源于stack exchange，提问作者Kaevonz