の概念を知っている必要があり、モバイルWeb開発者を終了

A、ビューポート

1024ピクセルのPCのウェブ幅は通常、最小限のですが、それほど大きくない幅の携帯電話の画面ページのPC版が直接表示されている場合は、ブラウザの表示可能領域の大きさは、その後、携帯電話の画面の最大幅を超えない、群がり寄るだろう、混乱を公開されるか、どのようにそれを行うには？仮想ページ表示窓（ビューポート）を取得し、PC上のWebブラウザよりも大きな面積を見て、このウィンドウは、携帯電話の画面上に表示することができます（ビューポート所有するモバイルデバイス上のブラウザは980または1024に設定されています）、これは、ビューポート、レイアウトビューポート内の最初のコンセプトです。

レイアウトビューポートは別の概念で、ビジュアルビューポートを作成しており、PCのWebページが携帯電話のブラウザ上に表示することができますが、レイアウトは、ビューポートのブラウザの表示可能領域よりも大きな、ブラウザのスクロールバーが表示されます可能

ビジュアルビューポート 、ブラウザの幅に等しい幅は、そのビューポートブラウザの幅に等しく、それは自動的に圧縮Webページには、あなたがページのPC版を表示することができますし、スクロールバーが表示されません。

 

今、画面上のページのPC版が正常に表示することができますが、ユーザーエクスペリエンスが原因で圧縮多く、良いものではなく、拡大ページを停止することはできません、さらに、ユーザーエクスペリエンスの問題を解決するために、ユーザ体験は非常に悪いです、企業の多くを削減読み取りH5は、携帯端末向けの専用バージョンを開発します。

しかし、それは別の論理的および物理的な解像度は、例えばiphoneの解像度である携帯電話上に存在する、iPhone4のは始めから、解像度から物理的および論理的な解像度の異なる高精細画面、そこにいわゆるされています。

解像度の異なる物理的および論理的な解像度は、さまざまな表示効果につながります。次の問題に対処するために、物理的なピクセルのビューポートとビューポートを行うには何もすることが急務：

 

1.ユーザーがズームインする必要がなく、水平スクロールバーは、サイトのすべての通常のコンテンツを見ることができます。

2.表示テキストのサイズがないため、表示画面の画素の高密度の、テキスト14pxサイズのピースとして適切には、見るには小さすぎるであり、これは、両方の何の理想的な状況14pxテキストであります解像度は、サイズを表示その下種密度画面、番号、画像、DIV幅だけでなく、すべて真である、類似しています。

  これは、すべての携帯電話はサイズを使用するための規定がない、何の何の理想的なビューポート、idieal-ビューポートと物理的な解像度ではありませんが、異なるデバイスは異なる理想的なビューポートを持っています。

 理想的なビューポートは、実際に表しているあなたがCSSでdiv要素を指定したとし、デバイスに依存しない解像度で画面が375px幅のdiv要素にiphone6でカバーすることができるので、広い375pxです。

 

ビューポートへのPPK

stackoverflowの

 

私たちは、このステートメントの下のhtmlの多くは、HTMLでこれらの単語を追加するフロントエンドマシンの多くを持つことになります参照が、その使用理由は分からない、と関連するプロパティの意味は、ここで見てみましょう。

 

<メタ名=「ビューポート」コンテンツ=「幅=デバイス幅、初期スケール= 1.0、最大規模= 1.0、ユーザースケーラブル= 0」>

 

幅	レイアウトビューポートの幅の設定、正の整数または文字列「デバイス幅」。我々はすでに述べてきたことを、デバイス幅の実際のビジュアルビューポート
初期の規模	（ページの初期スケール値設定基準スケーリングのための理想的なビューポート内）、小数であってもよい数。高い値をスケーリング、現在のビューポートの幅が小さく、より多くの強力なファジーページになります
最小規模	最小スケーリング値は、ユーザ、小数点以下とすることができる数を可能にします
最大規模	数のユーザの最大スケーリング値を許容する、それが小数であってもよいです
高さ	セットレイアウトビューポートの   高さが、このプロパティは、私たちにとって重要ではないが、ほとんど使用されません
ユーザースケーラブル	かどうかは、ユーザーがズームできるようにするために、何の代表者が許可されません、「いいえ」または「はい」、そうは許可していない代表

 

幅=ビューポートが理想的なビューポートになることができ、デバイス幅設定または初期スケール= 1.0。初期の規模= 1.0は、同じ効果を得ることができる理由幅=装置幅はよく理解できますか？

ズームするのに理想的なビューポートへ= 1.0相対INIT規模、ビューポート=理想的なビューポートに代わって作成するように設定。

なぜこれほど多くのhtmlは、2つのプロパティを書いたのですか？両方が小さな欠陥を持っているためです。セット幅=デバイス幅、その後、iPhone、アプリ肖像画のいずれか又は風景モード、理想ビューポートのみ肖像を認識するとき、最初のスケール= 1は、iPhone、計算された問題を解決することができるのみ、唯一inital規模なら= 1、IE窓電話、鉛直スクリーン上かどうかは、理想的なビューポートの幅の幅に横または縦点である 幅=幅デバイス-IEの問題が解決されます。

幅は、それを受けて、ビューポートの初期規模な計算と矛盾している場合、2つのプロパティは、ブラウザによって識別することができますか？

<メタ名= "ビューポート" コンテンツ= "幅= 400、初期スケール= 1">

ブラウザは、2つの値の彼らが大きくなります。例えば、幅= 400、スクリーン320の幅は、400が撮影されたとき。 

document.documentElement.clientWidth ビューポートの幅を取得

 

二、CSSのPX問題

PXは、比較的抽象的な画素単位で、PC1論理画素内の論理ピクセルを指す物理的画素に等価であるが、最終的に論理的に移動し、物理画素の画素は等しくない、なぜ？

1個の物理ピクセルが論理ピクセルに等しい場合、携帯端末の画面サイズは、非常に小さいですが、それは、テキストや画像など透明性が高く十分ではありません表示されるそれを行う方法を、十分な詳細ではないでしょうか？改善された物理的ピクセル、即ち、論理画素内の複数の物理的なピクセル。

だから、最終的には物理的なピクセル1ピクセルは、それに等しいどのくらい？我々はいくつかの概念を知るために取得する必要があります

 

物理ピクセルDP（デバイスピクセル）：

物理的な表示のみ表示画像を表示することができるように、ピクセルで構成され、制御は工場から表示された画像の異なる画面の各ピクセルの物理的な色及び明るさによるものである日、それはその上部固定の物理的なピクセル。

 

個々の画素のDIP（デバイス非依存ピクセル）：

また、論理的なピクセルまたは密度に依存しない画素として知られ、それはコンピュータと考えることができる点は座標系であり、この点は、（例：CSSピクセル）プログラムによって使用することができる仮想の画素を表します。

 

デバイスピクセル比DPR：

DPR =物理的ピクセル/ロジカル画素（PX）は、 役割が等しく1ピクセルの物理的なピクセルのDPR番号の長さを決定する主です 。長CSSの、物理1ピクセル= 2つの画素、2 iphone6 DPRは、1ピクセル= 4物理的画素と言うことができます。

window.devicePixelRatio获取

 

第三に、側面像ブレを移動するための理由

（：PNG、JPG、GIF、等などの）データの最小単位ビットマップピクセルはラスタ画像です。各ピクセルは、ビットマップ自身の表示いくつかの情報が含まれています。（例：表示位置、色値及び透明度）

理論的には、ビットマップのピクセルは透明ディスプレイを実現するために、物理的画素に画像に対応します。

しかし、高精細画面の画素の物理的な複数の画素（他の表示の効果物理ピクセルを達成するために、Appleの網膜を4つの物理画素を用いて高精細画面）に対応するビットマップであろう。単一のビットマップ画素が最小のデータ単位を有していて、そしてそれを切断することができないからです。だから、表示することができるようにするためには、それだけで、いわゆる画像ボケの問題が生じ、最も近い色を取ることができます。

どのように解決するには？

あいまいな状況生成されたビットマップのピクセルに十分なポイントが、解決策は非常に簡単ですので、もちろん、画像のDPRのサイズと同じの複数を使用することです。たとえば、iphone6について、200x300 imgのラベルは、400x600の元のサイズを提供します。ロードされたときにimgタグ、ブラウザは自動的に1ピクセルの各ピクセルCSSの半分の、それがこの時点で理解されるであろう1に維持されている：1画素CSS：物理ピクセル、無ぼかし。これは、UIは、計画を切断する際の図は倍増する理由です。

DPR 1、また二回絵を使用し、通常の画面と、画面がされ、何が起こるでしょうか？

通常画面、200×300の下でimgタグ、目に対応する画素の物理的な数は200×300であり、それは物理的画素ビットマップに対応するように、二倍の画素数とビットマップ画像は、200x300x4である4それだけで特定のアルゴリズムによって色を取るために減少させることができるので、ピクセルは、結果が画像が肉眼をぼかすませんが、オリジナルの総画素数の1/4のみを示すが、少し色を感じます。（実際には、逆の処理が曖昧です）。

それは自動的にそれを描く適切な時間をロードするimgタグのDPR装置によれば許可することはできませんか？答えはイエスです

IMG自動的DPRに応じて異なる画像を読み込みます

 

ラフな視覚的なグラフより四、htmlのHD画面の1ピクセルの境界線

視覚的に1つのピクセルのマップにマーク国境にマークされ、設計者は、その後、あなたはCSSの国境での書き込みに非常に満足している：1pxのiphone6 1pxの、悲劇の結果、中、高精細画面の見た目はかなり厚いです。

知識の理由は、1つのピクセルの物理的な画素、上記第二の点は、1に等しくないでiphone6物理1ピクセルに2つの画素に等しく、それは視覚的なドラフト上の意志よりも厚く見えました。

ソリューションの概要 

5、どのように視覚的なアートワークを復元するには？ 

フィット感の高精細画面にするために、UIは、一般的にビジュアルデザイン案への物理的な解像度Iphone6に、すなわち視覚的なマップの幅は、なぜそれiphone6選択し、750pxのですか？なぜならiphone6のサイズの携帯電話の画面サイズの中間値です。

視力を回復すると、発行された場合、シンプル、粗方法直接幅と高さの寸法を決定するために2によって標識されている（2,750ピクセルの物理的な幅は、唯一375の個々の画素はiphone6にすることができるので、DPRは、2で割っiphone6携帯電話の大画面サイズにそうすること、）をカバーし、両側は空白になりますが、小さい画面サイズに最も不完全表示されます。

 

異なる画面解像度に応じて適応するための使用メディアクエリの問題：

• 画面の解像度との間の仕切り：範囲内で区別できないが、解像度の主流と互換性のない100％、一般的に分割されます。
• 追加のワークロード：ワーク応答レイアウトは、追加のオープン量をもたらし、実装する開発者を必要としています。
• 一般的に、クラスの情報ページ、（特にPCとH5とは対照的に）厳しいページの全体的なサイトのレイアウトやスタイルの複雑な機能に適した応答性;：機能は、複雑なページには適していません

ベストプラクティスは、ユニットREMを使用することです

CSS3のREMは、フォントサイズのセットHTMLルート要素は、他の要素は、フォントサイズ、計算されたサイズ自体に応じて可能な単位の倍数です。仮定htmlのフォントサイズ12pxの幅2remdiv要素が比較されます24px。

代替レムPXを使用する場合は、次のように、アイデアは以下のとおりです。

1、次いでピクセル電話375pxとは無関係である、（サイズ上の図でUI）、代表1EM 100pxに（PX 1EM等しい数が、唯一ここで便宜上、決定することができる）750個の画素を想定1EM = 100×（750分の375）+ 'PX' =は50px

2. 1 REMは、例えば、特定のブロックの設計案は、100pxに* 300ピクセルであるに変換デザイン案の= 100pxに変換画素、REM比較。1 REM * 3rem

3.metaヘッド（注、initalスケール変換を必要としないDPRによれば、常に1であり、そしてその後動的ズーム倍率を設定する）に配置されています

<メタ名=「ビューポート」コンテンツ=「幅=デバイス幅、初期スケール= 1.0、最大規模= 1.0、ユーザースケーラブル= 0」>

https://www.jianshu.com/p/3b45aa981e77