O conceito central envolve a relação entre pixels físicos e pixels lógicos (CSS). A razão entre eles é chamada de Device Pixel Ratio (DPR).

• Pixel Físico: pontos reais de luz na tela do dispositivo.
• Pixel CSS: unidade abstrata utilizada em folhas de estilo.
• DPR = Pixel Físico / Pixel CSS. Com DPR=2, um único pixel CSS ocupa uma área de 2x2 pixels físicos.

Em telas Retina e similares, onde o DPR é maior que 1, a declaração border: 1px acaba sendo interpretada em múltiplos pixels físicos, resultadno em uma linha visualmente mais espessa que o desejado.

Estratégias de Resolução

Abordagem 1: Escalonamento com transform

Criamos um pseudo-elemento que desenha a linha e depois reduzimos sua dimensão via scaleY.

.thin-line {
  position: relative;
}

.thin-line::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: #333;
  transform: scaleY(0.5);
  transform-origin: 0 0;
}

Vantagem: excelente compatibilidade e controle direcional da borda.
Limitação: exige CSS adicional e pode interferir no posicionamento de elementos filhos.

Abordagem 2: Media Queries baseadas em DPR

Adaptamos o fator de escala conforme a densidade de pixels do dispositivo.

.hairline {
  border: 1px solid #333;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .hairline {
    position: relative;
    border: 0;
  }
  
  .hairline::before {
    content: '';
    position: absolute;
    inset: 0;
    width: 200%;
    height: 200%;
    border: 1px solid #333;
    transform: scale(0.5);
    transform-origin: 0 0;
    pointer-events: none;
  }
}

@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
  .hairline::before {
    transform: scale(0.333);
  }
}

Vantagem: ajuste fino para cada densidade de tela.
Limitação: maior volume de código e complexidade de manutenção.

Abordagem 3: Ajuste dinâmico do Viewport via JavaScript

Manipulamos a tag <meta viewport> para alinhar pixels CSS com pixels físicos na proporção 1:1.

<meta name="viewport" id="vp-meta" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

<script>
  const pixelRatio = window.devicePixelRatio || 1;
  const inverseScale = 1 / pixelRatio;
  const metaTag = document.getElementById('vp-meta');
  metaTag.setAttribute('content', 
    `width=device-width, initial-scale=${inverseScale}, maximum-scale=${inverseScale}, user-scalable=no`
  );
</script>

Vantagem: solução global sem necessidade de CSS extra.
Limitação: afeta todo o layout da página, exigindo unidades como rem ou vw.

Abordagem 4: Border-image com gradiente

Utilizamos um gradiente para gerar uma linha fina.

.gradient-border {
  border-width: 1px 0;
  border-style: solid;
  border-image: linear-gradient(to bottom, #333 50%, transparent 50%) 2 0 stretch;
}

Vantagem: implementação direta.
Limitação: não suporta border-radius e pode apresentar imprecisão visual.

Abordagem 5: Box-shadow como alternativa

Empregamos a propagação de sombra para simular uma linha estreita.

.shadow-line {
  box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.5);
}

Vantagem: código enxuto.
Limitação: a aparência pode não corresponder fielmente a uma borda real.

Comparativo das Abordagens

Recomendações

1. Perferência geral: combinar transform: scale() com media queries, equilibrando compatibilidade e flexibiliadde.
2. Projetos complexos: adotar viewport dinâmico em conjunto com rem/vw.
3. Casos simples: recorrer a box-shadow ou border-image para agilidade.