HTMLのメタビューポート属性の使い方

今回はHTMLのmeta viewport属性の使い方と、HTMLのmeta viewport属性を使用する際の注意点についてお届けします。以下は実践的なケースですので見てみましょう。

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

<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>

width: ビューポートのサイズを制御します。値 (600 の場合)、または特別な値 (たとえば、) を指定できます。 as 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 でのビューポートのパフォーマンスのいくつかの違いです。
インターネットでビューポートに関する知識を検索すると、基本的にすべての情報は次のとおりです:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />

このコードの意味は、ビューポートの幅を物理デバイス上の実際の解像度と同じにし、ユーザーがそれを許可しないことです。ズーム。すべての主流の Web アプリはこのように設定されており、その機能は意図的にビューポートを放棄し、ページを拡大縮小しないことです。このようにして、Web ページはデバイス上の実際の解像度と同じでなければなりません。より高く見えます。 PS をプレイする学生なら、1000 * 1000 の 写真 を 500 * 500 ポイントに直接拡大縮小するとどうなるか知っているはずですよね?映像の歪みは避けられません。
しかし、私が作りたいアプリケーションは、ビューポートとズームを使用する必要があります。実際の解像度がどのようなものであっても、物理的なサイズがどのようなものであっても、ブラウザ内で統一された解像度を持ち、ユーザーがズームできないようにしたいと考えています。テストに使用したデバイスには、iPhone 4、iPad 2、htc の g11、不明なメーカーの aquos Phone (Android システム)、ASUS の Android Pad、および Dell の winphone が含まれます。その後、途中で次の問題に遭遇しました。表示されません。ビューポートを手動で設定した場合、デフォルトの幅は 980 です。ページ上のすべての要素の幅が 980 未満の場合、幅は 980 になります。ページの最も幅の広い位置が 980 を超える場合、幅は最大幅と等しくなります。つまり、デフォルトではページ全体を左から右に表示できます。ビューポートが設定されている場合、たとえば、user-scalable=no が のように設定されている場合、幅は引き続き 980 と表示されます。 ios (つまり、デフォルトでは 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 が設定されている場合、ユーザーがスケーラブルになります。 =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 デバイスの場合、幅表示が定義されており、ページの最も広い位置が幅を超える場合、幅は無効となり、最も広い幅に従って表示されます (スクロール バーは表示されません)。しかし、このとき非常に奇妙な問題が発生します。携帯電話の画面を横向きと縦向きに何度か切り替えると、ページが自動的に拡大され、スクロールバーが表示されますが、実際には拡大された幅ではありません。設定した幅と同じでも構いません。これを防ぐには、幅をページの最も広い部分よりも大きく、または同じに設定する必要があります。

これらの事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトその他の関連記事に注目してください。

関連記事:

モバイル アダプティブ Web ページ サイズを実現する方法

HTML で hr 水平線を使用する方法

以上がHTMLのメタビューポート属性の使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。