HTMLメタビューポート属性_HTML/Xhtml_Webページ制作の詳細説明

ビューポートとは

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

ビューポートの基本

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



幅:コントロール ビューポート サイズは、600 などの値、またはデバイスの幅 (100% に拡大縮小したときの CSS ピクセル単位) である device-width などの特別な値として指定できます。
高さ: 幅に対応し、高さを指定します。
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 が単純に設定されている場合、幅は ios では引き続き 980 と表示されます (つまり、デフォルトで dpi によってスケーリングされます)。 Android および winphone では表示されません。スケーリング後、ブラウザーの解像度は実際の設定解像度と一致します。

2) iOS デバイスの場合、幅の設定は有効になりますが、Android の場合、幅の設定は有効になりません。 iOS デバイスでは、設定した幅と実際の解像度に基づいてスケーリング率、つまり dpi が自動的に計算されますが、Android では、設定できる幅は特別なフィールド target-densitydpi です。詳細については、target-densitydpi を参照してください: http://hi.baidu.com/j_fo/blog/item /748361279ebccd18908f9d7d.html。つまり、ブラウザの幅、デバイスの実際の幅、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 デバイスが横画面または縦画面の場合、横画面か縦画面に関係なく、dpi を自動的に調整します。ブラウザの幅はビューポートに設定された値と等しいため、画面が横向きまたは縦向きモードの場合、ページに表示されるコンテンツのサイズは自動的に拡大縮小されて変更されます。 Android スマートフォンが横向きモードまたは縦向きモードの場合、dpi は変更されません。また、画面が横向きモードまたは縦向きモードの場合、Web ページはズームされません。このため、iOS では、水平および垂直画面のページにスクロール バーが表示されずに画面いっぱいになることを保証できますが、Android では、画面が水平方向にフルスクリーンである場合、垂直方向にフルスクリーンになることは保証できません。また、その逆も同様です。

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