モバイルデバイス上の 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 属性の具体的な使用法

推薦する

JavaScript で実装された 7 つのソート アルゴリズムの概要 (推奨!)

目次序文バブルソート基本アルゴリズム2 番目の書き方は、基本的なアルゴリズムに基づいて改良されていま...

Element-UIの10の驚くべきトリックのまとめ

目次el-scrollbar スクロールバーel-uploadはクリックをシミュレートしますel-s...

CSSインジェクションの知識の要約

最近のブラウザでは、CSS 内で JavaScript を実行することはできなくなりました。以前は、...

mysql ダーティ ページとは何ですか?

目次ダーティページ(メモリページ)ダーティページが表示されるのはなぜですか?メモリ管理メカニズムの簡...

Dockerイメージをプライベートリポジトリにアップロードする方法の例

イメージは、GitHub と同様に Docker パブリック リポジトリに直接簡単にプッシュできます...

JavaScript 関数のカリー化

目次1 関数カリー化とは何ですか? 2 カレーの役割と特徴2.1 パラメータの再利用2.2 早期復帰...

外部ネットワークアクセスを許可するためのMysql5.6の設定手順の詳細を共有する

最近、MySQL 5.6 を導入しましたが、デフォルトでは MySQL はローカル サービスのみを許...

HTML における水平および垂直の中央揃え方法の詳細な説明 (基礎)

序文馬を書いていたとき、水平方向と垂直方向の中央揃えの方法について、誰もあまり知らなかったと思います...

Vue ルーター vue-router 詳細説明ガイド

中国語ドキュメント: https://router.vuejs.org/zh/ Vue Router...

MySQLデータベースホスト127.0.0.1とlocalhostの違い

私の友人の多くは、127.0.0.1 と localhost の違いがわからず、問題に遭遇するかもし...

mysql 5.7.17 winx64.zip インストールと設定方法のグラフィックチュートリアル

はじめに: Windows 10 を再インストールし、同時にファイルを整理しました。しかし、MySQ...

sshとは何ですか?使い方は?どのような誤解があるのでしょうか?

目次序文SSHとは何かssh は何に使用されますか? sshの使い方ssh 再修正要約する序文ssh...

JavaScript における型の必須および暗黙的な変換の詳細な説明

目次1. 暗黙的な変換二重等号での変換ブール型変換「+」と「-」 2. 強制型変換' ...

CentOS7 環境で gcc (バージョン 10.2.0) をアップグレードする詳細な手順

目次簡単な紹介1. 現在のgccバージョンを確認する2. gccインストールパッケージ(バージョン1...

xHTML タグと HTML タグの違いは何ですか?

すべてのタグは小文字でなければなりませんXHTML では、すべてのタグは小文字でなければなりません。...