HTML meta_html/css_WEB-ITnose の viewport ディレクティブ

ブートストラップ チュートリアルを見ているときに、弟の Xiao Hu の協力を得て、

に遭遇しました。ビューポートの意味を理解してください:

ViewPort タグは、ユーザーが Web ページをズームできるかどうか、またズームできる場合は最大および最小のズーム率を指定するために使用されます。 ViewPort タグを使用すると、ドキュメントがモバイル デバイス用に最適化されていることも示されます。 ViewPort タグのコンテンツ値は、ディレクティブとその値のカンマ区切りのリストです。

例:



width ディレクティブと height ディレクティブは、ビューポートの論理的な幅と高さをそれぞれ指定します。それらの値は、ピクセル単位の数値または特別なマーカー シンボルのいずれかです。 width ディレクティブは、device-width タグを使用して、ビューポートの幅がデバイスの画面幅である必要があることを示します。同様に、高さディレクティブは device-height フラグを使用して、ビューポートの高さがデバイスの画面の高さであることを示します。

ユーザー スケーラブル ディレクティブは、ユーザーがビューポートをズームできるかどうか、つまり Web ページのビューをズームできるかどうかを指定します。値が「yes」の場合、ユーザーはズームできます。値が「no」の場合、ズームは禁止されます。

initial-scale ディレクティブは、Web ページの初期スケーリングを設定するために使用されます。デフォルトの初期スケーリング値はスマートフォンのブラウザによって異なります。通常、デバイスはブラウザーで Web ページ全体をレンダリングします。これを 1.0 に設定すると、拡大縮小されていない Web ドキュメントが表示されます。

maximum-scale ディレクティブと minimum-scale ディレクティブは、Web ページのスケーリングに関するユーザーの制限を設定するために使用されます。値の範囲は 0.25 ～ 10.0 です。初期スケールと同様に、これらのディレクティブの値は、ビューポートのコンテンツに適用されるスケーリングです。

すべてのスマートフォンのブラウザは、ViewPort の width および user-scalabel ディレクティブをサポートしています。しかし、Opera Mobile はユーザー スケーラブル ディレクティブを使用せず、代わりにユーザーはモバイル ブラウザーで Web ページをズームできる機能を常に保持すべきであると主張しています。