モバイルデバイスで 1 ピクセルの境界線の問題を解決するいくつかの方法 (5 つの方法)

この記事では、モバイルデバイス上の 1 ピクセルの境界線の問題を解決する 5 つの方法を紹介します。もちろん、その前に、物理ピクセル、デバイスに依存しないピクセル、デバイス ピクセル比、ビューポートといった方法に関連する知識を整理しました。

物理ピクセル、デバイス非依存ピクセル、デバイスピクセル比

CSS では、通常、単位として px を使用します。CSS スタイルの px は、物理的なピクセルと同じではないことに注意してください。 CSS のピクセルは単なる抽象的な単位です。CSS で 1px で表される物理的なピクセルは、デバイスや環境によって異なります。 PC 側では、CSS の 1 px は通常、コンピューター画面上の 1 つの物理ピクセルに相当しますが、モバイル側では、CSS の 1 px は複数の物理ピクセルに相当します。

物理ピクセル

物理ピクセルは、デバイス ピクセルまたはデバイス物理ピクセルとも呼ばれます。これは、ディスプレイ (コンピューターや携帯電話の画面) の最小の物理表示単位です。各物理ピクセルは、色の値と明るさの値で構成されます。いわゆる 1 倍スクリーン、2 倍スクリーン (Retina)、3 倍スクリーンは、デバイスが 1 つの CSS ピクセルを表示するために使用する物理ピクセルの数を指します。つまり、マルチスクリーンでは、1 つの CSS ピクセルを表示するために、より多くの細かい物理ピクセルが使用されます。通常のスクリーンでは、1 つの CSS ピクセルは 1 つの物理ピクセルに対応しますが、Retina スクリーンでは、1 つの CSS ピクセルは 4 つの物理ピクセルに対応します (理解するには、以下のフィールド図を参照してください)。

デバイスに依存しないピクセル

デバイス非依存ピクセル (CSS ピクセルとも呼ばれる) は、CSS を記述するときに使用するピクセルです。これは主にブラウザで Web ページのコンテンツを正確に測定するために使用される抽象的な単位です。

デバイスのピクセル比

デバイス ピクセル比は DPR と略され、物理ピクセルとデバイス非依存ピクセルの対応を定義します。デバイス ピクセル比 = 物理ピクセル / デバイス非依存ピクセル。

CSS の 1px は、複数の物理ピクセルに相当します。画面のピクセル密度 dpr に関連するだけでなく、ユーザーのズームにも関連しています。たとえば、ユーザーがページを半分に拡大すると、CSS で 1px で表される物理ピクセルも 2 倍になります。逆に、ユーザーがページを半分に縮小すると、CSS で 1px で表される物理ピクセルも半分になります。これについては、この記事の後半の「1px の細い線の問題」セクションで説明します。

1px の細い線の問題

上で説明したように、CSS ピクセルは 1 ピクセル幅の直線であり、対応する物理ピクセルは異なり、2 ピクセルまたは 3 ピクセルになる場合があります。デザイナーが求める 1 ピクセル幅の直線は、実際には 1 物理ピクセル幅です。

CSS の場合、複数の画面に表示できる最小単位である border: 0.5px; と考えることができます。ただし、すべてのモバイル ブラウザーが border: 0.5px を認識できるわけではありません。一部のシステムでは、0.5px は 0px として扱われます。では、1px の細い線の問題はどうなるのでしょうか。

ボーダーイメージの使用

必要に応じて画像を選択し、CSS の border-image プロパティに従って設定します。コードは次のとおりです。

分割
{
 -moz-border-image:url(/i/border.png) 30 30 Stretch; /* 古い Firefox */
 -webkit-border-image:url(border.png) 30 30 Stretch; /* Safari 5 */
 -o-border-image:url(border.png) 30 30 ストレッチ; /* オペラ */
 border-image:url(border.png) 30 30 ストレッチ;
}

利点: 単一または複数のテーブル フレームを設定できます。デメリット: 色やスタイルの変更が難しく、デバイスによってはぼやけてしまう場合があります。

背景画像の使用

background-image の方法は border-image と同じです。まず、要件を満たす画像を用意する必要があります。利点と欠点は border-image と同じです。

 .背景画像-1px {
 背景: url(../img/line.png) repeat-x 左下;
 -webkit-背景サイズ: 100% 1px; 背景サイズ: 100% 1px;
}

境界線をシミュレートするにはボックスシャドウを使用します

 .box-shadow-1px {
   ボックスシャドウ: インセット 0px -1px 1px -1px #c8c7cc;
 }

利点: コードが少なく、互換性が良好です。デメリット: 境界線が影付きで色が薄くなります。

上記の3つの方法はあまり効果的ではありません。

擬似要素 + 変換

1px の境界線を持つ疑似要素を作成し、transform を使用して 50% に拡大します。

/* デザインドラフトは 750、比率は 1:100、フォントサイズは 100*(100vw/750) です */
.border-1px {
    位置: 相対的;
}
@media screen および (-webkit-min-device-pixel-ratio: 2) {
    .border-1px:前{
        コンテンツ： " ";
        位置: 絶対;
        左: 0;
        上: 0;
        幅: 100%;
        高さ: 1px;
        上境界線: 1px 実線 #D9D9D9;
        色: #D9D9D9;
        -webkit-transform-origin: 0 0;
        変換の原点: 0 0;
        -webkit-transform: スケールY(0.5);
        変換: スケールY(0.5);
    }
}

利点: あらゆるシナリオに対応でき、柔軟に変更可能です。欠点: 疑似クラスを使用する要素は複数回ネストする必要があります。

JS で rem ベース値とビューポート ズーム値を計算する

/* デザイン ドラフトは 750、比率は 1:100、フォント サイズは 100 * (docEl.clientWidth * dpr / 750) です */
var dpr、rem、スケール;
var docEl = document.documentElement;
var fontEl = document.createElement('style');
var metaEl = document.querySelector('meta[name="viewport"]');
dpr = window.devicePixelRatio || 1;
rem = 100 * (docEl.clientWidth * dpr / 750);
スケール = 1 / dpr;
// ビューポートを設定し、高解像度の効果を実現するために拡大縮小します。metaEl.setAttribute('content', 'width=' + dpr * docEl.clientWidth + ',initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no');
// ぼやけた画像と 1 ピクセルの細い線の問題を解決するために、CSS ハッキングの data-dpr 属性を設定します。docEl.setAttribute('data-dpr', dpr);
// 動的にスタイルを記述します docEl.firstElementChild.appendChild(fontEl);
fontEl.innerHTML = 'html{font-size:' + rem + 'px!important;}';

JS を使用して、画面サイズと DPR に応じて、さまざまな画面の rem ベースライン値と初期スケールのスケーリング値を正確に設定します。この JS ソリューションは、1 ピクセルの細い線の問題を完全に解決しました。

これで、モバイル端末の1pxボーダー問題を解決するいくつかの方法（5つの方法）に関するこの記事は終了です。モバイル端末の1pxボーダーに関するより関連性の高いコンテンツについては、123WORDPRESS.COMの以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも123WORDPRESS.COMを応援していただければ幸いです。