<メタのcharset = "UTF-8" NAME = "ビューポート" コンテンツ= "幅=デバイス幅、初期スケール= 1.0、最小スケール= 0.5、最大規模= 2.0、ユーザースケーラブル= YES" />
、
幅=デバイス幅：幅デバイスの画面の幅を示し
、初期スケール= 1.0：の初期スケーリング表す
= 0.5最小スケール：最小スケール表す
最大規模= 2.0：最大スケーリング示す
ユーザスケーラブル=をはい：ユーザーがズームを調整することができますかどうかを示します
あなたがWebページを開きたい場合は、自動的に元の比率を表示し、ユーザーが変更することはできません、それは次のとおりです。
<メタのcharset = "UTF-8" NAME = "ビューポート"コンテンツ= "幅=デバイス幅、最小スケール= 1、最大スケール= 1、ユーザスケーラブル= NO初期スケール= 1.0" />
PS ：1までのすべての割合は、することができます。
ビューポートレイアウト：レイアウトビューポート（レイアウトビューポート）：あなたがセットその行に有名なコードを持っていないとき概念は、分割され、必要な標準解像度に加えて、だけでなく、自分の携帯電話のメーカーは、最大解像度を設定します。コードのない行が存在しない場合、あなたは5,000ピクセル幅のページを開いたときに携帯電話を作る一切レイアウトビューポートは、存在しない、想像してみて、すべての画面にプッシュ5000電話の意志ページ幅、そして、すべての単語は、ピクセルになりますポイントは、完全に表示されません。この現象を防止するために、製造者は、レイアウトビューポートを指定し、その幅ができdocument.documentElement.clientWidth得ることが、通常980px、固定値です。初期のコンピュータのモニタは1024×768であるため、なぜこの数は、ある、そのようにアップル、980pxに設定されている幅のページへの設計仕様もフィギュアを使用して、今日のほぼすべての携帯電話メーカーは、すべての数字です。実際には、この数字はあまり重要プログラムの猿であり、主な意義は、ベンダーが自分の携帯電話はばかげなってきてさせません、あなたが開いているページ980を越え、それらをドラッグすることができます混雑していない時間の幅よりも大きいです。（親血管内のレイアウトビューポートは、<HTML>要素）、CSSの単位画素。
ビジュアルビューポート：ビジュアルビューポート（ビジュアルビューポート）：概念が分割されているが、視覚的なビューポートの幅がwindow.innerWidthによって得ることができます。iPhone 6 Plusの、周知の前提の下でコードの他に、値はそれなしで、414pxであり、値は980pxであり、有名なコード変更された場合width=device-width, initial-scale=1.5、その値は276pxです。だから、変数の値です。iphone8例にすなわちピクセル解像度ビジュアルビューポート装置、1334個の* 750ピクセルの解像度。各ハンドセットピクセル解像度に対して異なる解像度は、ハードウェアのサイズによって決定されます。
ビューポートに最適：ビューポートの上に（理想のビューポート）：概念は、定義により、分割したときwidth=device-width, initial-scale=1.0の時間、ビューポートの視覚的なサイズ。iPhone 6 Plusのために、それは固定値414pxです。したがって、デバイスの幅にわたってビューポートと同じです。ビューポートの理想。ビューポートや機器の均一な幅にわたって、iphone8理想的なビューポートは375pxです。
携帯端末の開発は、私たちはビューポートメタタグを使用する場合に制御することができます。
<メタのcharset = "UTF-8" NAME = "ビューポート" コンテンツ= "幅=デバイス幅、初期スケール= 1.0、最小スケール= 0.5、最大規模= 2.0、ユーザースケーラブル= YES" />
幅=デバイス幅（素子幅=幅）
デバイス（デバイスの幅）の幅：デバイスの幅は、特定のモデルのデフォルト値への携帯電話メーカーである、iPhone 5初期世代から世代には、その値が320ピクセルです。第6世代は375pxで、6plus 414pxです。この値は、標準解像度または推奨解像度として理解することができ、あなたのページはちょうどこの解像度作りに従うことを、企業はあなたが完璧な効果を得ることを確認してください。コンピュータのモニタは、それが同じ理由で、解像度を推奨しています。
プログラムの猿は、我々はHTMLであの有名な行を追加し、推奨解像度に適合するようにしたい<meta name="viewport" ...の役割で、width=device-widthこの文。
報道関係お問い合わせ先
お使いの携帯電話のブラウザ、幅、高さメディアクエリ、あるレイアウトビューポートの幅と高さを表し、オンdocument.documentElement.clientWidthとdocument.documentElement.clientHeight。
@media（最小幅：320ピクセル）{
本体{
色：赤。
}
}
コードは、レイアウトビューポート> = 320PX時間、フォントの色が赤である場合、上記を表します。
デスクトップブラウザ、デバイス幅、デバイスの高さメディアクエリ、理想的なビューポートの幅と高さを表す、であり、上にscreen.width及びscreen.height。
@media（MIN-デバイス幅：320ピクセル）{
本体{
色：赤。
}
}
コードは、理想的なビューポート> = 320PX時間、フォントの色が赤である場合、上記を表します。我々メディアクエリは、ちょうどそれに幅と高さを使用する場合、統合3つのビューポートで、我々は通常値ので、それが一般的です。
screen.width/screen.height
、取得しました
CSSピクセルは、フォントサイズ、要素の幅は、そのようなものとして、CSSファイルで提供等を意味します font-size: 14px; width: 100px; 。PC側では、ブラウザのズーム比は、デフォルトで、1つのCSS画素= 1つのデバイスピクセルが100％です 。
あなたが200％にページを拡大表示するときに、これらの画素値がCSSピクセルによって表されるので、フォントサイズの画素値と要素の幅は、それが実際に大きいCSSピクセル、ケース1つのCSSピクセル= 4素子画素で、変更されません、高さと幅は200％です。あなたは、この時間を得る screen.width/screen.height 値が変化しない、と windows.innerWidth して windows.innerHeight いるので値は、元の半分になる windows.innerWidth/windows.innerHeight 値はCSSピクセルで表されます。
デバイスに依存しない画素（密度に依存しないピクセル）
すなわち、論理ピクセルです。
高解像度の画面、マルチスクリーン画素と小さい粒子では、単一の画素の大きさは、従来のコンピュータの画面や携帯電話の画面解像度よりもはるかに小さい、したがって、同じことを表す10個のピクセル（10pxの）テキスト、高解像度あなたは伝統的なロジックのオンスクリーン表示を押した場合（単一画素サイズが非常に小さいため）、その後、認識は小さなたくさんのだろう。
調整の分解能の後、それが論理解像度と呼ばれるように、例えば1つの画素に4つの画素として、画素としての複数の画素 - こうして論理解像度の概念を導入します。
デバイスピクセル（デバイスピクセル比）より
すなわち、論理解像度比の物理的な解像度。
著者：男性の大きなブレーク
リンクします。https：//www.jianshu.com/p/70acdc6d5853
出典：ジェーンの本が
著者によって著作権で保護されています。著者は認可商業転載してください接触、非商用の転載は、ソースを明記してください。