HTML メタビューポート属性の詳細な説明

ビューポートとは

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

ビューポートの基本

モバイル向けに最適化されたページでよく使用されるビューポートメタタグは次のようになります。

<meta name=”viewport” content=”width=デバイス幅、初期スケール=1、最大スケール=1″>

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

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

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

ビューポートについて少しでも知識のある人なら、上記の知識は理解しているはずだと私は信じています。これは私が今日話したい点ではありません。ここで説明したいのは、iOS と Android のビューポートパフォーマンスの違いです。

ビューポートについてインターネットで簡単に検索すると、基本的に次の情報がすべて得られます。

<meta name="viewport" content="width=デバイス幅、初期スケール=1.0、最大スケール=1.0、最小スケール=1.0、ユーザースケーラブル=いいえ" />

このコードは、ビューポートの幅が物理デバイスの実際の解像度に等しく、ユーザーがズームできないことを意味します。主流のウェブアプリはすべてこのように設定されています。その機能は、実際にはビューポートを意図的に放棄し、ページを拡大縮小しないことです。この方法では、dpi はデバイスの実際の解像度と同じである必要があります。拡大縮小を行わないと、ウェブページはより繊細に見えます。 Photoshop に詳しい人なら、1000 × 1000 の写真をそのまま 500 × 500 に拡大するとどうなるか、ご存じですよね?画像の歪みを避ける方法はありません。

しかし、私が作りたいアプリケーションは正反対です。ビューポートとズームを使用する必要があります。実際の解像度や物理的なサイズに関係なく、ユーザーがズームできないようにして、ブラウザで均一な解像度を実現したいと考えています。テストに使用したデバイスは、iPhone 4、iPad 2、HTC G11、メーカー不明のAquos Phone (Android システム)、Asus Android Pad、Dell Win Phone ですが、その途中で次のような問題が発生しました。

1) ビューポートが明示的に設定されていない場合、デフォルトの幅は 980 になります。ページ上のすべての要素の幅が 980 未満の場合、幅は 980 になります。ページの最も広い位置が 980 を超える場合、幅は最大幅と同じになります。つまり、ページ全体をデフォルトで左から右に表示できます。ビューポートが設定されている場合、たとえば、<meta name="viewport" content="user-scalable=no" /> のように、user-scalable=no のみが設定されていると、iOS では幅が 980 として表示されます (つまり、デフォルトで dpi で拡大縮小されます)。ただし、Android および Windows Phone では拡大縮小されなくなり、ブラウザーの解像度は実際に設定されている解像度と一致します。

2) iOS デバイスの場合、幅の設定は有効になりますが、Android デバイスの場合、幅の設定は有効になりません。 iOS デバイスでは、設定した幅と実際に設定した解像度に基づいて、拡大縮小率 (dpi) が自動的に計算されます。ただし、Android では、幅の設定は無効です。設定できるのは、特別なフィールド target-densitydpi です。target-densitydpi の詳細については、次の記事を参照してください: http://hi.baidu.com/j_fo/blog/item/748361279ebccd18908f9d7d.html。つまり、ブラウザの幅、デバイスの実際の幅、dpi の 3 つの変数があります。それらの関係を表す式を簡単に使用してみましょう (実際の関係ではなく、説明を簡単にするため)。デバイスの実際の幅 * dpi = ブラウザの幅。ここでの 3 つの変数のうち、デバイスの実際の幅は操作できない既知の値です。他の 2 つの変数については、一方を設定すると他方に影響します。iOS では、ブラウザの幅を変更でき、dpi は自動的に生成されます。Android では、dpi を変更でき、ブラウザの幅は自動的に生成されます。 Android の場合、幅をどのように設定してもブラウザの幅には影響しません。

P.S.: ここで、別の奇妙な問題についてお話ししたいと思います。HTC の G11 (私はこの HTC 電話機を 1 台しか持っていないので、他の電話機はテストしていません) では、幅を明示的に設定せずに DPI を設定すると、user-scalable=no は有効になりません。つまり、<meta name="viewport" content="target-densitydpi=300,user-scalable=no" /> となり、ユーザーが画面を拡大または縮小するのを防ぐことができません。幅の値を明示的に設定する必要があります。この値は Android のブラウザ解像度画面には影響しませんが (iOS には影響します)、設定する必要があり、この値は 320 より大きくする必要があります。320 以下の場合、user-scalable=no は有効になりません。この問題は HTC の G11 電話でのみ発生し、Aquos Phone では発生しません。 Android との互換性は本当に頭痛の種です @_@、将来どれだけ落とし穴があるかわかりません。 Windows Phone では、結果はさらに奇妙です。ビューポートの幅を 480 より大きい値に設定すると、user-scalable=no は無効になりますが、480 未満の値に設定すると、user-scalable=no が有効になります。しかし、ビューポートの幅にどのような値を設定しても、winphone の実際の表示幅に期待どおりの効果はなく、target-densitydpi も効果がありません。幅を480未満にすると画面が拡大縮小されるのですが、縮小率が思っていたものと全然違います。どのようなルールで拡大縮小されるのかわかりません。これが Winphone の問題なのか、Dell の実装の問題なのかはわかりません。

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

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

<<: CSS3を使用してプログレスバー効果を実現し、動的にパーセンテージを追加する

>>: Docker で TLS と CA 認証を有効にする方法