ある概念を導入するために、ビューポートの前にいえば、
CSSは、デバイスの1ピクセルの1ピクセルに等しくありません
我々は、一般的ユニット、デスクトップブラウザでは、CSSとしてPXを使用するCSSで、ピクセルは、多くの場合、物理的なピクセルのコンピュータの画面に対応し、物理的なピクセルピクセルピクセルと、この一つの画素CSSは二つのことです。
CSS抽象単位の画素、又は異なる環境で異なるデバイスのみ、画素1ピクセルのCSSで表される物理デバイスが異なっています。同時に、異なる装置の画素密度それらと共に異なる、物理的スクリーンピクセルは異なるであろう。
その逆と、ユーザがダブルページ倍率は、1ピクセルを表現しているCSSの物理的なピクセルも倍増したときに、例えば、ユーザのズームPXのCSSの変化を引き起こすもあります。このような観点から、それを理解することは比較的容易である-要するに、最初に理解することである 物理的なピクセルで1ピクセルの1ピクセルのCSSには、2つの事である事。その後、ビューポートを伝えることができます。
1.ビューポートとは何ですか
ここでの説明に使用ルーキーチュートリアルを引用します
ビューポートは、ユーザのWebページの表示領域です。
中国語に翻訳ビューポートは、「ビューポート」と呼ぶことができます。
この意志（モバイルブラウザ（ビューポート）通常はこの仮想「ウィンドウ」画面より広い（ビューポート）の仮想「ウィンドウ」内のページであるので、あなたはすべてのページに小さなウィンドウを圧迫する必要はありません。携帯電話のブラウザに最適化ページにはダメージレイアウトしない）、ユーザーは、パンやページのさまざまな部分を見るためにズームすることができます。
人気話すには、デバイスのビューポート上の画面は、ブラウザ上のWebページを表示するために使用され、当社のウェブページの領域を表示するために、もう少し具体的な使用することができ、モバイルデバイス、エリアの一部ですが、ブラウザのビューポートに限られるものではありません領域の視覚的大きさ、それは大きくすることができる、ブラウザの表示領域よりも大きくてもよいです。一般的に、モバイルデバイス上のビューポートは、ブラウザの表示領域よりも大きいです。言い換えれば、そのより通常は、モバイルデバイス上のビューポートでの表示可能領域の幅（OHよりも表示可能領域のビューポートの幅）が大きく、また、水平スクロールバーや他のいくつかの奇妙なことになります。だから我々は、友人のビューポートの値を設定するために必要なものです。
2.ビューポートのメタタグによって、
前に述べたように、私はメタタグに書きました
<meta name="viewport" content="width=device-width, initial-scale=1.0">それは何を意味するのですか？
次のテーブルでそれを見てみましょう
| 幅 | レイアウトビューポートの幅は正の整数、または文字列のために提供され 「デバイス幅」 |
|||
| 初期の規模 | ページのスケーリングの初期値、小数可能数 | |||
| 最小規模 | 最小スケーリング値は、ユーザ、小数点以下とすることができる数を可能にします | |||
| 最大規模 | 数のユーザの最大スケーリング値を許可すると、それが小数であってもよいです | |||
| 高さ | 高さレイアウトビューポートを設定し、このプロパティは、私たちにとって重要ではないが、ほとんど使用されません | |||
| ユーザースケーラブル |
ユーザーがズームすることを許可するかどうか、「いいえ」または「はい」、何の代表者が許可されません、はいできるようにすることです代表 | |||
これらのプロパティは、同時に使用することができ、複数を同時に属性をカンマで区切られたリストに、単独または組み合わせて使用することができます。
よく見ると、あれ？レイアウトビューポートは何地獄ですか？
心配しないで心配しないでください、私が説明します
大規模な外国の神のPPKモバイルデバイス上の3つのビューポートがあると思います
レイアウトビューポート、視覚的なビューポート和理想的なビューポート
彼の3回の記事では、特定の表情：
レイアウトビューポートの幅がdocument.documentElement.clientWidthによって得ることができます
視覚的なビューポートの幅がwindow.innerWidthによって得ることができます
この図は以下の通りです
ここではあなたが理解ふり、私は2つのビューポートについて詳しく説明しません
フォーカスは理想的なビューポートです
理想的なビューポートのビューポートがデバイス上で動いている、それは固定サイズを持っていない、異なるデバイスは異なる理想的なビューポートを持っています。モバイルデバイスの画面の幅に等しい理想的なビューポートの幅。
関係なくどのような解像度の画面の下に、理想的なビューポートのために設計されたこれらのサイトは、手動でズームするユーザーを必要としない、意義理想的なビューポートは、水平スクロールバーは、それが完全にユーザに提示することができ、存在している必要はありません。
3.現在のビューポートの幅がビューポートの理想の幅に設定されています
取得するには理想的なビューポートの幅は、デフォルトのレイアウトビューポートは、モバイルデバイスの画面幅に設定されていなければなりません。幅のメタビューポートがレイアウトビューポートの幅を制御するので、私たちはちょうどライン上でこの特別な値のデバイス幅に幅する必要があります。
<meta name="viewport" content="width=device-width">しかし、この書き込みは、iPhoneやiPad、ポートレートや風景モードのいずれかで、理想的なビューポートの幅が縦画面の幅である、と指摘します
書かれた次とコードで同じ効果を得ることができ、それはまた、現在のビューポートの理想的なビューポートになることができます
<meta name="viewport" content="initial-scale=1">のでスケーリングはズームインして理想的なビューポートに相対的である、それはまあ理想的なビューポートを1のズーム値を取得していないとき
しかし、あなたは理想的なビューポートの肖像画を考えるためにIEのどちらかに縦または横画面幅を回し、書き込み
どのようにそれを行うには？
ここではそれを知っている必要があります
幅と初期規模が同時に発生した場合、ブラウザは、2つの値の大きい方にそれらを取るでしょう
したがって、完璧なソリューションです
<meta name="viewport" content="width=device-width, initial-scale=1">
〜以下のリンクで知識のより深い理解があるかもしれません