HTMLメタビューポート属性の詳しい説明

ビューポートとは

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

ビューポートの基本

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

width: ビューポートのサイズを制御します。600 などの値、またはデバイスの幅である device-width などの特別な値を指定できます (単位はスケーリングが 100% の場合の CSS ピクセル)。
高さ: 幅に対応し、高さを指定します。
initial-scale: 初期スケーリング比。ページが初めてロードされたときのスケーリング比です。
maximum-scale: ユーザーがズームできる最大スケール。
minimum-scale: ユーザーがズームできる最小スケール。
ユーザースケーラブル: ユーザーが手動でズームできるかどうか

ビューポートに関するいくつかの質問

ビューポートは iOS 上で固有の属性であるだけでなく、Android や Winphone にもビューポートがあります。彼らが解決したい問題は同じです。つまり、デバイスの実際の解像度を無視し、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 つの異なるデバイスの画面全体に表示されます。

ビューポートについて少し知識がある学生は、上記の知識をすでに知っているはずだと思います。今日私が言いたいことの焦点はこれではありません。ここで説明したいのは、iOS と Android でのビューポートのパフォーマンスのいくつかの違いです。

インターネットでビューポートに関する知識を検索すると、基本的には次のような情報がすべて出てきます:

このコードの意味は、ビューポートの幅を物理デバイス上の実際の解像度と等しくし、ユーザーがズームできないようにすることです。すべての主流の Web アプリはこのように設定されており、その機能は意図的にビューポートを放棄し、ページを拡大縮小しないことです。このようにして、Web ページはデバイス上の実際の解像度と同じでなければなりません。より高く見えます。 PS をプレイしている学生なら、1000 * 1000 の画像を 500 * 500 ポイントに直接拡大縮小するとどうなるか知っているはずですよね?映像の歪みは避けられません。

しかし、私が作りたいアプリケーションは、ビューポートとズームを使用する必要があります。実際の解像度がどのようなものであっても、物理的なサイズがどのようなものであっても、ブラウザ内で統一された解像度を持ち、ユーザーがズームできないようにしたいと考えています。テストに使用したデバイスは次のとおりです: iPhone 4、iPad 2、htc の g11、不明なメーカーの aquos Phone (Android システム)、ASUS の Android Pad、および dell の winphone 途中で次の問題に遭遇しました:

1)。ビューポートを明示的に設定しない場合、デフォルトの幅は 980 です。ページ上のすべての要素の幅が 980 未満の場合、幅は 980 になります。ページの最も幅の広い位置が 980 を超える場合、幅は最大幅と等しくなります。つまり、デフォルトではページ全体を左から右に表示できます。ビューポートが設定されている場合、たとえば、user-scalable=no が のように設定されている場合、幅は引き続き 980 と表示されます。 ios (つまり、デフォルトでは dpi によってスケーリングされます) ですが、Android および Winphone ではスケーリングされなくなり、ブラウザーの解像度は実際の設定解像度と一致します。

2) iOS デバイスの場合、幅の設定は有効になりますが、Android の場合、幅の設定は有効になりません。 iOS デバイスの場合、スケーリング率、つまり dpi は、設定した幅と実際の解像度に基づいて自動的に計算されます。Android では、設定できる幅は特別なフィールド target-densitydpi です。つまり、ブラウザの幅、デバイスの実際の幅、dpi という 3 つの変数があります。それらの間の関係を簡単に式で表してみます (実際の関係ではありません。簡単に説明するためです)。 ここでの 3 つの変数のうち、デバイスの実際の幅は操作できない既知の値です。 . 、他の 2 つの変数の 1 つを設定して、他の変数に影響を与えることができます。iOS では、変更できるのはブラウザの幅であり、Android では、変更できるのは dpi とブラウザの幅です。が自動的に生成されます。 Android の場合、幅をどのように設定しても、ブラウザの幅には影響しません。

追記: ここで別の奇妙な問題について話させてください。htc の g11 (私はこの 1 台の htc 携帯電話しか持っていないので、他はテストしていません) で、幅を明示的に設定せずに dpi が設定されている場合、user-scalable= no は機能しません。つまり、 が有効になり、ユーザーによる画面のスケーリングを防ぐことはできません。 。幅の値を明示的に設定する必要がありますが、この値は Android ではブラウザの解像度には影響しません (iOS では依然として影響します)。それでも設定する必要があり、この値は 320 より大きい必要があります。 320 以下の場合、user-scalable=no は有効になりません。この問題は htc の g11 フォンでのみ発生し、aquos フォンでは発生しません。 Android との互換性は本当に頭の痛い問題です @_@、将来どれだけ落とし穴があるかわかりません。 winphone では、結果はさらに奇妙です。ビューポートの幅を 480 より大きい値に設定すると、user-scalable=no は無効になりますが、480 未満の値を設定すると、user-scalable=no は無効になります。効果。しかし、ビューポートの幅にどのような値を設定しても、winphone によって実際に表示される幅には期待されるような影響はなく、target-densitydpi も影響を及ぼしません。幅を480未満に設定すると、画面は拡大縮小されますが、どのような規則に従って拡大縮小されるのかがわかりません。これが Winphone の問題なのか、Dell の実装の問題なのかはわかりません。

3) この記事は前の記事と直接関連しています。iOS デバイスが横画面または縦画面の場合、横画面か縦画面に関係なく、ブラウザの幅を自動的に調整します。はビューポートで設定された値と等しいため、水平および垂直画面、ページに表示されるコンテンツのサイズは自動的に拡大縮小および変更されます。 Android スマートフォンが横向きモードまたは縦向きモードの場合、dpi は変更されません。また、画面が横向きモードまたは縦向きモードの場合、Web ページはズームされません。このため、iOS では、水平および垂直画面のページにスクロール バーが表示されずに画面いっぱいになることを保証できますが、Android では、画面が水平方向にフルスクリーンである場合、垂直方向にフルスクリーンになることは保証できません。また、その逆も同様です。

4) iOS デバイスの場合、幅表示が定義されており、ページの最も広い位置が幅を超える場合、幅は無効となり、最も広い幅に従って表示されます (スクロール バーは表示されません)。しかし、このとき非常に奇妙な問題が発生します。携帯電話の画面を横向きと縦向きに何度か切り替えると、ページが自動的に拡大され、スクロールバーが表示されますが、実際には拡大された幅ではありません。設定した幅と同じでも構いません。これを防ぐには、幅をページの最も幅の広い部分より大きくするか、同じに設定する必要があります。

HTML メタ ビューポート属性の詳細な説明と関連記事については、PHP 中国語 Web サイトに注目してください。