Meta tag_html/css_WEB-ITnose のビューポート属性と意味

最近モバイル Web 開発を学んでいます。head に次の属性が設定されているのを初めて見ました。

情報を収集することで、viewport 属性の意味を大体理解しました。

1. ビューポートとは

モバイルブラウザは仮想「ウィンドウ」(ビューポート) にページを配置します。通常、この仮想「ウィンドウ」(ビューポート) は画面よりも広いため、それぞれを配置する必要はありません。モバイル ブラウザー用に最適化されていない Web ページのレイアウトを壊すことなく、Web ページが小さなウィンドウに押し込まれ、ユーザーはパンやズームを行って Web ページのさまざまな部分を表示できます。 Safari ブラウザのモバイル バージョンでは、最近ビューポート メタ タグが導入されました。これにより、Web 開発者はビューポートのサイズとズームを制御できるようになります。他のモバイル ブラウザも基本的にこれをサポートしています。

2. ビューポートの基本

モバイル Web ページ用に最適化されたページで一般的に使用されるビューポート メタ タグは次のとおりです:

1. ビューポートのサイズを制御します。値を指定できます。 600 などの特別な値、または device-width はデバイスの幅です (単位は 100% にスケールされた CSS ピクセルです)

2. 高さ: 幅に対応し、高さを指定します

3. 初期スケール: 初期ズーム率、ページが最初にロードされたときのズーム率

4. 最大スケール: 0 から 0 までの範囲の最大スケール10.0

5. minimum-scale: ユーザーがズームできる最小比率 (0 から 10.0 まで)

6. ユーザーが手動でズームできるかどうか。値は次のとおりです: ① はい、true はユーザーのズームを許可します。 ② いいえ、false はユーザーのズームを許可しません 3. ビューポートに関するいくつかの問題

ビューポートは iOS 上に固有の属性であるだけでなく、iOS にもビューポートがありますアンドロイドとウィンフォン。彼らが解決したい問題は同じです。それは、デバイスの実際の解像度を無視し、dpi を通じて物理サイズとブラウザの間で解像度を直接リセットすることです。この解像度はデバイスの解像度とは何の関係もありません。たとえば、3.5 インチ -320*480 iPhone 3 gs、3.5 インチ -640*960 iPhone 4、または 9.7 インチ -1024*768 iPad 2 の場合、デバイスの解像度と物理サイズは異なります。異なる場合は、ブラウザでビューポートを同じ解像度に設定できます。たとえば、Web サイトの幅が 800 ピクセルの場合、ビューポートの幅 = 800 を設定すると、Web サイトがこれら 3 つの異なるデバイスで正確に全画面表示されるようになります。

インターネット上でビューポートに関する知識を検索すると、基本的にすべての情報は次のとおりです:

このコードの意味は、ビューポートの幅を物理デバイス上の実際の解像度と等しくすることであり、それを許可しないことです。ユーザーがズームします。すべての主流の Web アプリはこのように設定されており、その機能は意図的にビューポートを放棄し、ページを拡大縮小しないことです。このようにして、Web ページはデバイス上の実際の解像度と同じでなければなりません。より高く見えます。