viewportを深く理解する

viewportは、モバイルデバイスでのみ使用できるビューポートの初期サイズに関するヒントを提供するラベルのプロパティです.すなわち,viewportの使用を明確にしてこそ,異なる解像度のデバイスに対してモバイルエンド開発をよりよくすることができる.
viewportとは?
viewport
英[ˈvju:pɔ:t]美[ˈvjupɔrt]
n.ビューポート;
中英互訳はよく理解されていると信じています.はい、viewportは簡単に言えば、デバイスがページを表示する領域です.
PC端子と比較します.モバイルデバイスのビューポートは小さくなり、幅が高くなりません.モバイル側デバイスのために設計されていないWebサイトが正常に表示されるように、レイアウトが乱れないようにするには、モバイル側が仮想ビューポートでページをレンダリングし、デバイスビューポートのサイズに合わせて縮小します.
この仮想ビューポートは、モバイル端末の最適化を行わないウェブサイトをモバイルデバイスに自動的に適合させる有効な方法であると言わざるを得ない.
しかし、問題は、メディアクエリーで最適化されたページに対して、このメカニズムは友好的ではなく、応答的な設計を浪費していることです.
viewport metaラベルが誕生しました.
アップルはsafari IOSで初めてviewport metaラベルを導入し、開発者にビューポートのサイズとスケールを制御させることができる.
典型的な移動先最適化ページmetaラベルの例:

init-scale:ページの初期スケールを設定する

maximum-scale:ページ最大スケール

が設定されています.

minimum-scale:ページの最小スケールが設定されている

user-scalable:ページのスケーリングをユーザーに許可するかどうか

したがって、上記の例は、ブラウザビューがデバイス幅であり、ページの初期スケールおよび最大スケールの最小スケールが1であり、ユーザがページをスケールすることは許されないことを意味する.