モバイルデバイス上の 1px 境界線を解決する最善の方法 (推奨)

モバイル デバイス向けに開発する場合、Retina 画面上で要素の境界線が太くなるという問題に遭遇することがよくあります。この記事では、境界線が厚くなる問題の原因を探り、現在市場にある最適な解決策を紹介します。

1px 境界問題の起源

Apple iPhone 4 は、Retina ディスプレイの概念を初めて提案しました。iPhone 4 が採用した Retina スクリーンでは、2x2 ピクセルが 1 つの物理ピクセルとして使用されます。つまり、2x2 ピクセルを使用して、本来 1 つの物理ピクセルで表示されるコンテンツを表示することで、UI 表示がより洗練され、鮮明になります。この 2x2 ピクセルは論理ピクセルと呼ばれます。ピクセル比が2（ピクセル比（DPR）＝物理ピクセル／論理ピクセル）のRetinaディスプレイは、ダブルスクリーンとも呼ばれます。現在、市場には、さらにピクセル比の高いトリプルスクリーンやクアドラプルスクリーンも存在します。 CSS では、1px は物理ピクセルを指します。したがって、1px に設定された境界線は、dpr = 2 の Retina スクリーン上では実際には 2 論理ピクセルの幅を占め、その結果、インターフェイスの境界線が太く見えるという視覚的体験が得られます。

変換を使用して解決

市場で最も一般的な解決策は、要素のボックス サイズを border-box に設定し、疑似要素を構築してから、CSS3 の transform を使用して拡大縮小することです。この方法はあらゆるシナリオに対応でき、柔軟に変更できます。唯一の欠点は、疑似要素をすでに使用している要素に対して、余分な無駄な要素をネストする必要があることです。具体的な実装は以下のとおりです。

.1ピクセルの境界線{
  位置: 相対的;
  ボックスのサイズ: 境界線ボックス;
}

.one-pixel-border::before {
  表示: ブロック;
  コンテンツ： "";
  位置: 絶対;
  上位: 50%;
  左: 50%;
  幅: 200%;
  高さ: 200%;
  境界線: 1px 実線の赤;
  変換: translate(-50%, -50%) スケール(0.5, 0.5);
}

これにより、0.5 ピクセルの境界線が作成されます。

次のように、メディア クエリ (@media) を組み合わせて、異なる DPR 値を持つ画面の境界の問題を解決することもできます。

@media screen および (-webkit-min-device-pixel-ratio: 2)、(min-resolution: 2dppx) {
  ...
}

@media screen および (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
  ...
}

注意: iOS 上の Safari ブラウザは標準の min-resolution をサポートしておらず、非標準の min-device-pixel-ratio を使用します。

解決するにはpixel-border.cssを使用する

Pixel-border.css は、モバイル デバイス上の 1 ピクセル境界の問題を解決するための一般的な CSS ツールです。 transform を使用するソリューションは、ソース コードが数行しかなく、非常に便利です。これは、これまでに見つかった最良のソリューションです。

インストール

npmインストール:

npm インストール ピクセルボーダー --save

糸の取り付け:

糸ピクセル境界線を追加

ブラウザにインストールする場合は、圧縮バージョンをインストールすることをお勧めします。

<link rel="スタイルシート" href="path/to/pixel-border.min.css"><link>

使用

Pixel-border は、要素の ::before 疑似要素を介してスケーリングされた変換を使用して、要素の境界を設定します。したがって、ネイティブ CSS 境界プロパティを使用して要素の境界を設定できます。要素に Pixel-border または Pixel-border="true" 属性を追加し、要素の border-style 値を設定するだけです。これにより、1 ピクセルの境界線が作成されます。

<div Pixel-border style="border-style: solid;">1 ピクセルの境界線</div>

注意: 要素の境界のpixel-borderは1pxの固定値に設定されているため、要素のborder-widthを設定しないでください。また、要素のbox-sizing値はborder-boxに設定されているため、他のタイプの値にリセットしないでください。

任意の境界を設定します。

要素の片側の境界線を設定する場合は、要素の border-top-style、border-bottom-style、border-left-style、border-right-style のいずれかの値を設定し、要素の border-color の値を設定するだけです。上部の境界線を次のように設定します。

<スタイル>
  .border-top {
    ボーダー上部のスタイル: solid;
    上の境界線の色: 赤;
  }
</スタイル>

<div class="border-top" Pixel-border>上部の境界線</div>

丸い境界線を設定する:

丸い境界線が必要な場合は、常に border-radius にパーセンテージ値を設定します。次のように：

<スタイル>
  .border-radius {
    幅: 100ピクセル;
    高さ: 100px;
    境界線のスタイル: solid;
    境界線の色: 赤;
    境界線の半径: 10%;
  }
</スタイル>

<div class="border-radius" Pixel-border>丸い境界線</div>

これで、モバイルデバイスでの 1px 境界問題を解決する最善の方法に関するこの記事は終了です。モバイルデバイスでの 1px 境界問題を解決する方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。