[HTML]metaでideal viewportを設定する

モバイルデバイス上のviewportは、layout viewport、visual viewportとideal viewportの3つに分類される.layout viewportは、ブラウザが設定した表示サイズであり、ブラウザメーカーによって決定され、一般的には980 pxである.visual viewportは、画面でサポートされている解像度のサイズであり、ハードウェアによって決定されます.ideal viewportはユーザが設定したサイズであり、ラベルによって決定される.
たとえば、ページの元の幅1000px,layout viewport=980px,visual viewport=640pxの場合、ページは640pxのスペースに表示され、980pxの内容が表示されます.モバイルデバイスのデフォルトのideal viewportはlayout viewportです.ideal viewport=320pxを設定すると、640pxのスペースに320pxの内容が表示されます.

width:ideal viewportの幅を正の整数に設定するか、文字列「width-device」initial-scale:ページの初期スケール値を設定し、1つの数字であり、小数であり、1より小さくスケールminimum-scale:ユーザーの最小スケール値を許可し、1つの数字であり、小数でありmaximum-scale:ユーザーの最大スケール値を許可し、1つの数字である.小数height:ideal viewportの高さを設定できます.この属性は私たちにとって重要ではありません.user-scalable:ユーザーにスケールを許可するかどうかは、「no」または「yes」の値です.yesは許可を表し、noは許可を表しません.
注意:iPhone 3 GSはiPhone 4 Sと物理的に同じサイズ(3.5インチ)ですが、解像度が異なります.(iPhone 3 GS=480 px*320 px、iPhone 4 S=960 px*640 px)なので、画面の物理的な大きさに合った内容をデバイスに表示させるのがベストです.例えば、3.5インチのデバイスには320 pxの内容が表示されます.
したがって、device-widthはデバイスの物理的サイズに関連しており、異なるデバイスは異なるdevice-widthを有し、Viewport Sizesに表示することができる.
例:

iPhone<=5s：device-width=320px
iPhone=6：device-width=375px
iPhone=6p：device-width=414px

参考:A tale of two viewports-part one A tale of two viewports-part two Meta viewportモバイルフロントエンド開発のviewportの深い理解