移动端1px边框在iPhoneX上显示成2px怎么办？

这个问题挺常见的，直接说解决办法吧。用 transform 确实有点麻烦，推荐用伪元素加 background 的方式，兼容性更好。

代码给你：

.borders {

  position: relative;

}



.borders::after {

  content: '';

  position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  border: 1px solid #ddd;

  -webkit-transform: scale(0.5);

  transform: scale(0.5);

  -webkit-transform-origin: 0 0;

  transform-origin: 0 0;

  pointer-events: none; /* 避免影响交互 */

}

这样写的好处是，伪元素单独处理边框缩放，不会影响内容区域。水平和垂直方向都能正常显示。

如果需要更通用的方案，可以用 vw 单位来定义边框宽度，比如 border-width: 0.01rem，再配合媒体查询调整比例，但上面的方法已经够用了。

试试看吧，不行再调。

这个问题挺常见的，移动端1px边框在Retina屏上确实容易出问题。你用transform缩放的方向有点问题，而且这种方法本身也不太完美。

最简单靠谱的办法是用伪元素+background来实现1px边框。这样既能兼容iOS，也不会让安卓上的边框变得太细。代码可以这么写：

.borders {

  position: relative;

}

.borders::after {

  content: '';

  position: absolute;

  left: 0;

  right: 0;

  top: 0;

  bottom: 0;

  border: 1px solid #ddd;

  -webkit-transform: scale(0.5);

  transform: scale(0.5);

  -webkit-transform-origin: left top;

  transform-origin: left top;

  pointer-events: none;

}

这种方式通过伪元素创建一个独立的边框层，再用scale缩放适配高分辨率屏幕。记得加 -webkit- 前缀，因为iOS对WebKit的支持更好。

如果不想用伪元素，也可以试试 viewport 单位或者rem来做适配，但相比之下伪元素的方式更灵活可控。反正别折腾什么方向性的缩放了，那确实会出问题。