モバイル開発における 1px ラインの理解と解決策

モバイル開発における 1px ラインの理解と解決策

1pxの線が太くなる理由

モバイルプロジェクトに取り組むとき、設計図に従って要素ノードのサイズとスタイルを設定することがよくあります。しかし、設計図に従って書かれたスタイルがまだ満足できない場合があります。表面的には設計図と同じに見えますが、設計図の感触がなく、何とも言えない模倣感があります。UIを確認すると、分割線や境界線が太すぎてもっと細くする必要があると感じることがよくあります。しかし、コードを見るとすでに1pxになっているのに、なぜまだこんなに太く見えるのでしょうか。

問題の原因を理解するには、まずいくつかの概念を理解する必要があります。

(1)物理ピクセル

物理ピクセルは、ディスプレイ(携帯電話の画面)上の最小の物理表示単位(ピクセル粒子)です。オペレーティング システムのスケジュールに従って、各デバイス ピクセルには独自の色値と明るさ値が設定されます。 たとえば、iPhone 6 には 750*1334 の物理ピクセル粒子があります。

(2)密度非依存ピクセル

デバイス非依存ピクセル (密度非依存ピクセルとも呼ばれる) は、コンピュータ座標系の点として考えることができます。この点は、プログラムで使用できる仮想ピクセル (CSS ピクセルなど) を表します。論理ピクセルと呼ばれることもあります。その後、関連するシステムによって物理的なピクセルに変換されます。したがって、物理ピクセルとデバイスに依存しないピクセルの間には一定の対応関係があり、これが次に説明するデバイス ピクセル比です。

(3)デバイスピクセル比(DPR)

デバイス ピクセル比 (略して DPR) は、物理ピクセルとデバイスに依存しないピクセル間の対応を定義します。その値は次の式に従って得られます。

デバイスピクセル比(dpr)= 物理ピクセル / 論理ピクセル(px) // 特定の方向、x方向またはy方向では、次の図dpr = 2

デバイスのピクセル比がわかれば、1px の線が太くなる理由が大体わかります。簡単に言えば、携帯電話の画面の解像度はますます高くなっています。同じサイズの携帯電話でも、実際の物理的なピクセル数は増えています。モバイル デバイスごとにピクセル密度が異なるため、さまざまなモバイル デバイスに書き込む 1 ピクセルは、このモバイル デバイスの 1 ピクセルに等しくなります。モバイル端末の開発を行う場合、通常は次のような文を追加する必要があります。

<meta name="viewport" content="width=デバイス幅、初期スケール=1.0、最大スケール=1.0、ユーザースケーラブル=いいえ">

この文は、このページのビューポートの幅をデバイスの幅として定義し、初期ズーム値と最大ズーム値はどちらも 1 であり、ユーザーによるズームは禁止されています。

ビューポート設定と物理的な画面解像度は比例していますが、同じではありません。モバイル ウィンドウ オブジェクトには、デバイスの物理ピクセルと CSS ピクセルの比率を表す devicePixelRatio プロパティがあります。Retina iPhone では、この値は 2 または 3 です。CSS で記述された 1 ピクセルの長さは、物理ピクセルでは 2 ピクセルまたは 3 ピクセルにマッピングされます。ビューポートを設定することで、CSS で 1px をレンダリングするために使用される物理ピクセルの数を変更できます。異なるビューポートを設定すると、当然、1px の線の太さが不一致に見えます。

1pxの線の太さの解決方法

擬似クラス + スケール

この方法の原理は、元の要素の境界線を削除し、:before または :after を使用して境界線をやり直すことです。元の要素は相対的に配置され、新しい境界線は絶対的です。変換のスケールを使用して行の高さを半分に減らし、新しい境界線は 0.5px に相当します。コードは次のとおりです。

。規模{

  位置: 相対的;

  境界線:なし;

}

.scale:after{

  コンテンツ: '';

  位置: 絶対;

  下部: 0;

  背景: #000;

  幅: 100%;

  高さ: 1px;

  -webkit-transform: スケールY(0.5);

  変換: スケールY(0.5);

  -webkit-transform-origin: 0 0;

  変換の原点: 0 0;

}

フレキシブル.jsの使用

前述のように、1px が太くなる理由は、ビューポートの幅が画一的に設定されているためです。ビューポートの幅をデバイスの実際の物理的な幅に設定できる場合、CSS の 1px は実際の 1px の長さと同じになります。 Flexible.js の原理は次のとおりです。まずデバイスのピクセル比 devicePixelRatio を取得し、次にスケーリング比に応じてビューポート値を動的に設定します。その結果、どのデバイスでも、1px は常に 1 デバイス ピクセル、つまりデバイスの最小ピクセルを表します。

//devicePixelRatio=2 の場合、出力メタは次のようになります <meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

//devicePixelRatio=3 の場合、出力メタは次のようになります <meta name="viewport" content="initial-scale=0.33333333333333333, maximum-scale=0.33333333333333333, minimum-scale=0.33333333333333333, user-scalable=no">

メタビューポートコントロールを使用する

原則は上記の通りです。コードは次のとおりです。

//1px ピクセル ライン <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">

//0.5 ピクセルの線 <meta name="viewport" content="width=device-width,initial-scale=0.5,user-scalable=0">

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

CSS を使用して影を処理し、0.5 px の効果を実現します。コードは次のとおりです。

.box-shadow-1px {

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

}

ボーダーイメージの使用

まず、線の背景画像として 0.5 ピクセルの線を作成する必要があります。 。コードは次のとおりです。

p{

    境界線の幅: 0 0 1px 0;

    border-image: imageUrl 2 0 丸め;

}

背景グラデーション線形グラデーションの使用

linear-gradient を使用して、背景画像を色付きから透明にグラデーションします。デフォルトの方向は上から下です。0 度から 50% までの色が境界線の色となり、下半分は透明になります。次に、背景の幅を 100%、高さを 1px に設定し、繰り返しを削除して、色付きの境界線が 0.5px になるようにします。コードは次のとおりです。

.bg_border {

    背景画像: 線形グラデーション(0度、黒50%、透明50%);

    背景サイズ: 100% 1px;

    背景繰り返し: 繰り返しなし;

}

要約する

以上がこの記事の全内容です。この記事の内容が皆様の勉強や仕事に何らかの参考学習価値をもたらすことを願います。123WORDPRESS.COM をご愛顧いただき、誠にありがとうございます。

<<:  Vue elementUI フォームのネストされたテーブルと各行の検証の詳細な説明

>>:  位置のいくつかの巧妙な応用の詳細な説明:sticky スティッキーポジショニング

推薦する

sqlite3 から mysql に移行するときに起こりうる問題のコレクション

簡単な説明適切な読者: モバイル開発sqlite3 データを mysql に移行する場合、多くの構文...

Vue プロジェクトにインターフェース リスニング マスクを追加する方法

1. 事業背景マスク レイヤーを使用してユーザーの異常な操作を遮断する方法は、フロントエンドでよく使...

JavaScript でよく使われる 5 つのオブジェクト

目次1. JavaScript オブジェクト1).配列オブジェクト2).ブールオブジェクト3).日付...

CSS3 を使用して楕円軌道の回転を実装するサンプルコード

最近、次のような効果を達成する必要がある最初は、CSS3D回転を使用して記述すると、次の効果しか得ら...

Linux CentOS でスケジュールされたバックアップ タスクを設定する方法

実装準備 # ファイルパスをバックアップする必要があります: /opt/apollo/logs/ac...

MySQL 8.0.24 リリースノートのいくつかの改善点

目次1. 接続管理2. オプティマイザレベルでの改善3. 機能の改善4. パフォーマンススキーマの最...

jQueryは広告を上下にスクロールする効果を実現します

この記事では、広告を上下にスクロールする効果を実現するためのjQueryの具体的なコードを参考までに...

MySQLの保存時間の不一致の問題を解決する

Java を使用してシステム時間を取得し、それを MySQL データベースに保存した後、時間タイプが...

IEのクラッシュバグ

コードをコピーコードは次のとおりです。 <スタイル タイプ="text/css&qu...

Docker.v19 で Docker Compose オーケストレーション ツールをインストールして構成する方法

1. Compose の紹介Compose は、マルチコンテナ Docker アプリケーションを定義...

webkit-box-reflect を巧みに使用してさまざまな動的効果を実現する (要約)

かなり前の記事で、 -webkit-box-reflectプロパティについて説明しました。リフレクシ...

Linux で一般的なソフトウェアを設定する方法

新しいLinuxサーバーを入手する場合、通常は次の5つの構成を実行する必要があります。 HOSTAN...

MySQLコマンドプロンプトで入力エラーが発生したときに前のコマンドを修正する方法

目次現在の問題解決プロセス具体的な手順解決した事件現在の問題MySQL コマンド プロンプトに複数行...

Vue elementUI はツリー構造テーブルと遅延読み込みを実装します

目次1. 成果を達成する2. バックエンドの実装2.1 エンティティクラス2.2 データベース内のデ...

CSSは下部のタップバー機能を実装します

現在多くの携帯電話には、下部のタブバーを切り替える機能があります。私も最近、同様の機能を見つけました...