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

1pxの線が太くなる理由

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

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

（１）物理ピクセル

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

（２）密度非依存ピクセル

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

（３）デバイスピクセル比（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 をご愛顧いただき、誠にありがとうございます。