I.はじめに
時にはあなたは、異なる解像度、3と携帯電話の顔には、フロントエンドの高精細表示、1、モバイルエンドH5ページ2の開発の顔を移動するために必要な携帯電話の異なる画面サイズに直面しています。
第二に、視覚的なアートワーク
通常のフロントエンドの開発は、私たちの小さな兄弟またはエクスポートskech PSDファイルのビジョン、これはビジョンのドラフトで、次にようにフロントエンド構造、ライト素子、調整、最適化、を書き始めました。
モバイル側の開発のために、結果はページ定義に到達、視覚的な草案の規範は、これら2つの点を辿る傾向にあります。
（1）（以前は375 * 667のよりiphone6今、* 480 320 iPhone4の）基準として、携帯電話の画面の幅と高さを選択します。
（2）網膜画面（複数の画素が、より高い解像度が得られ、ここで画面ポイントに圧縮され、画面上に表示詳細度を高めることができる）（例：DPR = 2）、高精細の効果を達成するために、視覚的なドラフトキャンバスのサイズが2倍の基準となり、画素のすなわち数は4倍（例えばiphone6、* 667元375、1334 * 750となる）です。
質問は確かにあります：（1）なぜDPR = 2、携帯電話、なぜキャンバスサイズ* 2、我々は問題定義を解決できますか？（2）視覚的なアートワーク、特定のCSSの2倍の大きさの各ブロックは、真の幅と高さ（レイアウト上の問題）を復元する方法は？
第三に、基本的な概念
図1に示すように、物理的なピクセル：ピクセルは、物理的なディスプレイ（画面電話）上で最小の物理的表示ユニットオペレーティングシステムのスケジューラの下で、各デバイスは、それ自身のカラー画素値と輝度値を有します。
図2に示すように、デバイスに依存しない画素：独立したピクセルデバイスはまた、密度に依存しないピクセルと呼ばれるが、コンピュータとみなすことができ、この時点でポイントを付与するシステム、ダミー画素の座標（例：CSSピクセル）プログラムによって使用されてもよい表す関連するシステムの変換によって、次いで、及び物理的なピクセル。
したがって、物理的な画素とデバイス非依存ピクセル間の特定の対応関係はつまり、あるデバイスの画素比率を。
図3に示すように、デバイスの画素比率：ピクセル素子の比（DPRと略す）は、式に従って計算され得ることができる物理的な、その値との関係を、対応する個々の画素とデバイスピクセルを定義します。
设备像素比 = 物理像素 / 设备独立像素 // 在某一方向上，x方向或者y方向JavaScriptでは、によってwindow.devicePixelRatio現在の方法DPR装置を得ます。
-webkit-デバイス画素比、-webkit-MIN-デバイスピクセル比と異なるデバイスのメディアクエリ、DPR用-webkit-MAXデバイス画素比、およびいくつかの適切なスタイルを実行することにより、CSSで（主にWebKitのブラウザカーネルとWebViewのための）と。
例えば図4に示すように、
iphone6例に：
（1）装置幅375 *高さ667は、個々の画素の装置（CSSピクセル）として理解することができます。
（2）2 DPRは、上記の式に従って計算、750物理的画素×1334であるべきです。
絵で示し、それは（私のパイレーツを許して）これだけですします
異なる画面（網膜画面VS通常画面）上に、CSSピクセルレンダリング・サイズが対応する画素CSSことを除いて、同一である物理的画素数が矛盾しています。
通常画面の下で、画素は、（物理CSSピクセルに対応します1:1）。画面の網膜では、画素は、（4つの物理ピクセルCSS相当します1:4）。
図5に示すように、画素のビットマップ
（：PNG、JPG、GIF、等などの）データの最小単位ビットマップは、ピクセルのラスタ画像です。各ビットマップのピクセルのディスプレイ自体は（：表示位置、カラー値、透明度、等のような）いくつかの情報が含まれています。
理論的には：ビットマップのピクセルは、物理的なピクセルに対応し、鮮明な表示を得るために完璧な画像。。
問題はないが、網膜画面で通常の画面には、状況のぼやけた画像を引き起こして、十分なビットマップのピクセルを表示します。
マップを見てください：
示される：目的のDPR =網膜画面2、4つの物理画素について画素ビットマップの場合、画像のピクセルが画像ボケを生じるだけに最も近い色を取って、パーティション内の単一のビットことができないからです。
だから、問題の高精細映像のために、よりよい解決策は、（長さと幅が2倍に増加した）二重像にあります。
このように：200×300（CSSピクセル）imgタグは、400×600の画像を提供することが必要です。
そうダウンビットピクセルポイント数が4倍になる、画面に網膜は、画素ビットマップの数は、物理的画素数1を用いて形成することができる：1の比、鮮明な画像が自然に、最初に解決するために質問。
通常画面の下に、存在する場合、また二回絵で、何が起こるのだろうか？
明らかに、通常画面の下で、200×300（CSSピクセル）のIMG タグ、それに対応する画素の物理数200×300一つであり、两倍图片図中のピクセルの数のビット200×300*4、そうそこに4ビットに対応する物理的な画素図ピクセルは、それだけ（結果は画素四半期の表示のみオリジナル総数であり、我々はこのプロセスが呼び出された呼び出し特定のアルゴリズムを介して色を取ることができるdownsampling(プロセスデータのサンプリングレートや解像度を低下させる、ダウンサンプリング)） 。絵が肉眼をぼかしていませんが、と感じています絵は、いくつかの鋭さに欠け、または少し色（まだ許容）。
IVの概要
H5携帯端末の開発、異なる解像度で異なる画面の携帯電話をいくつかの古典的な問題が発生します
問題の1、網膜の下で、高精細画像
：既に述べ溶液画像の長さおよび幅回、次いでピクチャ容器 50％減少します。
例えば：
1、IMGタグ
width: 200px;
height: 300px;2、背景画像
width: 200px;
height: 300px;
background-image: url(image@2x.jpg);
background-size: 200px 300px; // 或者: background-size: contain;欠点は、通常画面の下にあります：
図1に示すように、リソースの浪費をもたらす、2倍の画像である同じ長さをダウンロードします。
2、画像のダウンサンプリングは、いくつかの鮮明度（または色）を失います。
別の画像のサイズをロードし、異なるDPR：最善の解決策はそう。
CSSメディアクエリによってかどうか、またはjsの条件判断により可能です。絵の2セットを用意する必要があります。
2、網膜の下で、国境：1pxの問題
彼の目で1ピクセルのピクセル設計者は、最も懸念しています。
または（図海賊が再び私を許して）図によって説明します。
上記の図のため1pxには、iPhone5の、広い直線、画面上のその物理的寸法（灰色の領域）は、実際に画面上に同じ、実際には異なる物理的最小単位、すなわち物理的な画素であるので、直線用ディスプレイの最小幅は、CSSで表さ図赤灰色の領域におけるコイルのうち、実際には、理論的です0.5px。
だから、次の設計者が網膜を望んでborder: 1px;、実際には、広い物理的な画素は、CSSのために、考えることができborder: 0.5px;、これはより低い網膜（DPR = 2）での最小単位で表示することができます。
しかし、すべての無力携帯電話のブラウザが特定できていないborder: 0.5px;Androidなど他のシステムでは、以下ios7、0.5pxを扱う際に、どのようにこのを達成するために0PXになることだろう0.5px、それを？
最も簡単な方法は、このA（あります元素scale）：
.scale{
position: relative;
}
.scale:after{
content:"";
position: absolute;
bottom:0px;
left:0px;
right:0px;
border-bottom:1px solid #ddd;
-webkit-transform:scaleY(.5);
-webkit-transform-origin:0 0;
}私たちは、いつものように書きborder-bottom: 1px solid #ddd;、その後を通じてtransform: scaleY(.5)狭い0.5倍を達成するために0.5px効果を、このハックは本当に十分に一般的ではない（例えば：フィレットなど）だけでなく、トラブルを書くこと。
それとも、使用することができますサポートはHTMLにクラス名のヘアラインを追加する場合は、現在のブラウザは0.5pxの境界線をサポートしているかどうかを判断するためのjsを、
if (window.devicePixelRatio && devicePixelRatio >= 2) {
var testElem = document.createElement('div');
testElem.style.border = '.5px solid transparent';
document.body.appendChild(testElem);
if (testElem.offsetHeight == 1)
{
document.querySelector('html').classList.add('hairlines');
}
document.body.removeChild(testElem);
}CSS
div {
border: 1px solid #bbb;
}
.hairlines div {
border-width: 0.5px;
}
V.リファレンス
1、http://www.smashingmagazine.com/2012/08/20/towards-retina-web/
2、http://www.paintcodeapp.com/news/iphone-6-screens-demystified
3、http://iconmoon.com/blog2/iphone-6-plus-screen-size/
4、http://dieulot.net/css-retina-hairline