6

Retina ディスプレイで 1 ピクセル幅のモバイル サファリで線を引くにはどうすればよいですか?

私は試した：

border-bottom:0.5px solid #fff;

と

border-bottom:0.05em solid #fff;

0.01em と 0.1em の間の異なる値を使用します。

Mobile Safari は、常に 1 ピクセル幅 (Retina ディスプレイでは 2 ピクセル) の線を描画するか、まったく描画しません。モバイル サファリに実際の 1 ピクセル (0.5 ピクセル) 幅の線を描画させるにはどうすればよいですか?

4

4 に答える 4

2

使用するborder-width: 0.5px

Safari 8 (iOS と OS X の両方) は、border-width: 0.5px. 現在のバージョンの Android と古いバージョンの iOS および OS X が通常の境界線を表示することを受け入れる準備ができている場合は、それを使用できます (私の意見ではかなりの妥協点です)。

ただし、これを直接使用することはできません。境界線を認識しないブラウザーは0.5px境界線を として解釈するため0pxです。境界はない。<html>したがって、サポートされている場合は、要素にクラスを追加する必要があります。

if (window.devicePixelRatio && devicePixelRatio >= 2) {
  var testElem = document.createElement('div');
  testElem.style.border = '.5px solid transparent';
  document.body.appendChild(testElem);
  if (testElem.offsetHeight == 1)
  {
    document.querySelector('html').classList.add('hairlines');
  }
  document.body.removeChild(testElem);
}
// This assumes this script runs in <body>, if it runs in <head> wrap it in $(document).ready(function() {   })

次に、網膜のヘアラインを使用すると、非常に簡単になります。

div {
  border: 1px solid #bbb;
}

.hairlines div {
  border-width: 0.5px;
}

何よりも、border-radius を使用できます。また、4つのボーダー（上/右/下/左）で簡単に使用できます。

ソース: http://dieulot.net/css-retina-hairline

于 2014-09-29T10:07:00.240 に答える
1

通常、ピクセル単位で .5 を使用することはお勧めしません。しかし、あなたはそれにフォールバックしたいです。

フォールバックを一番上に置くだけです。このような。

border-bottom: 1px solid #fff;
border-bottom: 0.5px solid #fff;
于 2013-07-23T16:28:15.977 に答える