9

iPhone 4 または iPhone4S のモバイル Safari では、0.5px 幅の div の境界線を使用できますか?

4

10 に答える 10

9

使用する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-18T10:30:48.853 に答える
6

はい。スケールを使用します。下のスタイルはあなたにヘアラインを与えます

 .transform-border-hairline {
     border-bottom: 1px #ff0000 solid;
     transform: scaleY(0.5);
 }

すべての側面が必要な場合、最良の方法は、DIV を :after または :before CSS 疑似クラスで複製し、その疑似クラスに境界線を適用し、サイズを 2 倍にしてから、transform:scale で半分に縮小することです。

pre:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    border: 1px #999 solid;
    content: "";
    transform: scale(0.5);
    -webkit-transform: scale(0.5);
    transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
}

より具体的に（および使用されているすべてのトリックも）ここhttp://atirip.com/2013/09/22/yes-we-can-do-fraction-of-a-pixel/

于 2013-09-25T06:32:27.693 に答える
2

また、この方法が機能していることがわかりました（iOS7）：

    background: repeat-x top left url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1' height='1'><rect fill='#ff0000' x='0' y='0' width='1' height='0.5'/></svg>");
于 2014-07-11T22:21:38.783 に答える
1

box-shadow と spread radius を使用して実行できる CSS を使用します。アプローチはここで説明されています: http://bradbirdsall.com/mobile-web-in-high-resolution

これは上記のリンクからコピーされます：

box-shadow: inset 0 0 1px #000,
            inset 0 1px 0 #75c2f8,
            0 1px 1px -1px rgba(0, 0, 0, .5);
于 2012-11-20T21:37:14.567 に答える
-1

正確には何を意味するのかわかりません。iPhone 4 で 1 ピクセルの境界線を描画できるかどうかを尋ねている場合、これは iphone3G の境界線の物理サイズの 1/2 になります。CoreGraphics は、ピクセルの代わりにポイントを使用します。次の方法でわかるように、float を指定できます。

void CGContextSetLineWidth (
   CGContextRef c,
   CGFloat width
);

1point != 1px なので、0.5point を指定することで iPhone4 では 1px を指定できます。

ここでそれを読んでください

于 2011-12-27T02:03:55.863 に答える