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

モバイルデバイス上の 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 をよろしくお願いいたします。

<<:  MySQL トランザクション分離はどのように実現されますか?

>>:  テキストエリアの disabled 属性と readonly 属性の具体的な使用法

推薦する

mysql5.7.24 バージョンのインストール手順と解凍時に発生した問題の概要

1. ダウンロード参考: 2. D:\MySQL\mysql-5.7.24 などの固定の場所に解凍し...

レアタグフィールドセットと凡例の使用方法の詳細な説明

<fieldset>と<legend>については、ほとんどの人はおそらく馴染...

Vueは書籍ショッピングカートの機能を実現

この記事の例では、書籍ショッピングカート機能を実現するためのVueの具体的なコードを参考までに共有し...

Centos8.2 クラウド サーバー環境に Tomcat8.5 をインストールするための詳細なチュートリアル

Tomcatをインストールする前に、まずJDK環境をインストールしてくださいLinux サーバー上で...

Vueフロントエンドパッケージングの詳細なプロセス

目次1. パッケージ化コマンドを追加する2. パッケージ化されたコードを実行する3. パッケージ化し...

DPlayer.js ビデオ再生プラグインの使い方

DPlayer.jsビデオプレーヤープラグインは使いやすい主な用途: ビデオの再生、監視の開始、終了...

Vue ベースの Excel 解析とエクスポートの詳細な説明

目次序文基本的な紹介コードの実装基本構造アップロード分析Excel にエクスポート基本構造Excel...

Web ページでの Unicode 文字の使用の概要 (&#、\u など)

初期のコンピュータでは ASCII 文字しか使用できませんでしたが、コンピュータのアプリケーションの...

Ubuntu16.04にclionをインストールするプロセス全体と手順の詳細な説明

CLion のプロセス全体を最初から説明します。CLion は、JetBrains がリリースした新...

MySQL8 ベースの docker-compose デプロイメント プロジェクトの実装

1. まず、次のパスに従って対応するフォルダを作成します。 ローカルのdockerでmysqlを実行...

MySQL 5.7 でルートパスワードを変更する方法

MySQL 5.7 以降では、多くのセキュリティ更新が追加されました。旧バージョンのユーザーは慣れて...

jQueryはショッピングカート機能を実装します

この記事の例では、ショッピングカート機能を実装するためのjQueryの具体的なコードを参考までに共有...

Docker 大規模プロジェクトのコンテナ化変革

仮想化とコンテナ化は、クラウドベースのプロジェクトでは避けられない 2 つの問題です。仮想化は純粋な...

ソースコードから MySQL 8.0.20 をコンパイルしてインストールする詳細なチュートリアル

前回の記事では、次のことを紹介しました。 MySQL8.0.20 インストール チュートリアルとイン...