html meta viewport 属性の説明

ビューポートとは？

モバイルブラウザは、通常画面より広い仮想の「ビューポート」にページを配置するため、各ページを小さなウィンドウに押し込む必要がありません（これは、モバイルブラウザに最適化されていないページのレイアウトを壊してしまうことになります）。モバイル版Safariは最近、viewportメタタグを導入し、ウェブ開発者がviewportのサイズとズームを制御できるようになり、他のモバイルブラウザでもほぼサポートされています。

{他のモバイルブラウザも対応しています。 ビューポートの基本

モバイルウェブ用に最適化されたページでよく使われるviewport metaタグは、おおよそ次のようなものです。

ビューポートについて少しでも知っている学生であれば、上記の知識はすでに理解しているはずだと思います。今日、私が言いたいのはそこではありません。私が説明したいのは、iosとandroidでviewportがどのように動作するかの違いです。

Webでviewportに関する知識を検索すると、基本的に以下のような情報ばかりです。

このコードは、ビューポートの幅を物理デバイスの実際の解像度と同じにし、ユーザーが拡大縮小できないようにするためのものです。主流のウェブアプリはすべてこのように設定されています。このコードが行うことは、意図的にビューポートを破棄し、ページを拡大縮小しないようにすることです。そのため、拡大縮小をしなくても、デバイスの実際の解像度と同じ dpi にしなければならず、ページは高く、より詳細に表示されることになります。PSをプレイする学生は、あなたが500 * 500ポイントに直接1000 * 1000の画像をズームするとき、何、右知っている必要があります？画像の歪みが逃げてはいけません。

でも、これから作るアプリケーションはその逆で、ビューポートを活用してスケーリングを使う必要があるんです。実際の解像度がどうであれ、物理的なサイズがどうであれ、ブラウザの解像度を統一しつつ、スケーリングをさせないようにしたいのです。テストに使った端末は、iphone4、ipad2、htcのg11、某メーカーのアクオスフォン（android系）、asusのandroid pad、dellのwinphone、それから途中で以下の問題に遭遇しました。

1) ビューポートがディスプレイなしで設定されている場合、デフォルトの幅は980です。ページのすべての要素の幅が980より小さい場合は980、ページの最も広い位置が980より大きい場合は、最大幅と同じ幅になるように設定されています。つまり、ページ全体を左から右へ表示するのがデフォルトです。ビューポートを設定する場合は、例えばuser-scalable=noと設定するだけです。 の場合、iosではwidthは980のまま表示されますが（つまり、デフォルトでdpiでスケーリングされます）、androidとwinphoneではスケーリングされなくなり、ブラウザの解像度が実際の解像度と同じになります。

{ブラウザの解像度は実際の解像度と同じになります。 2) iosデバイスの場合、widthの設定は効果を発揮できますが、androidの場合、widthの設定は効果を発揮しません。iosデバイスでは、スケーリング比、すなわちdpiは、widthの設定と実際の解像度の設定によって自動的に計算されますが、androidでは、widthの設定は効果がありません。設定できるのは特殊フィールドtarget-dpi、すなわち、ブラウザの幅、デバイス真の幅、dpiの3変数が存在するのです。デバイスの真の幅 * dpi = ブラウザの幅、ここで3つの変数、デバイスの真の幅は、我々は操作することはできません既知の値である、それらの間の関係（実際の関係ではない、で簡単に説明する式を使用してみましょう。他の2つの変数は、我々は他の変数に影響を与えるために設定することができ、iosでは、我々は、ブラウザの幅を変更することができ、dpiは自動的に生成され、一方Androidでは、我々はdpiを変更することができ、ブラウザの幅が自動的に生成されます。アンドロイドの場合、widthをどのように設定しても、ブラウザの幅には影響しません。

追記：ここでもう一つ奇妙な問題を言っておきます：htcのg11（htcの携帯はこれだけ持っていて、他はテストしていません）では、dpiを設定して幅を表示しない場合、user-scalable=noが有効にならない、つまり、「dpiを設定しても、幅を表示しない。 というように、ユーザーが画面を拡大縮小することを妨げるものではありません。表示する幅の値を設定する必要があります。この値は、アンドロイドではブラウザの画面解像度に影響しない（iosではまだ影響する）にもかかわらず、設定する必要があり、この値は320以上でなければならず、320以下であれば、user-scalable=noを有効にすることができないのです。この問題はhtcのg11 phoneでのみ発生し、aquos phoneでは発生しません。Androidの互換性は本当に頭の痛い問題です@_@、これからどれだけポツポツと出てくるか分かりませんね。そしてwinphoneではさらにおかしなことに、ビューポートの幅に480以上の値を設定するとuser-scalable=noが無効になり、480未満の値を設定するとuser-scalable=noが効くようになるのです。しかし、ビューポートの幅にどのような値を設定しても、winphoneの実幅には思ったような効果がなく、target-densitydpiにも効果がないのです。幅を480以下に設定すると、画面は拡大縮小されるのですが、その拡大縮小が期待したものと違い、どのように拡大縮小されるのかが分かりません。これはwinphoneの問題なのか、dellの実装の問題なのかわかりません。

(3) この記事と前回の記事は直接関係するはずですが、iosデバイスは横画面でも縦画面でも、ブラウザの幅がビューポートで設定した値と同じになるようにdpiを自動調整するので、横画面と縦画面のときの変化を演出するために、ページに表示するコンテンツの大きさが自動的に拡大縮小されるのです。一方、アンドロイド携帯は、縦横でdpiが変わらないので、ウェブページが横長と縦長で拡大縮小されることはない。したがって、iosは、水平および垂直画面のページがスクロールバーを生成しないことを保証することができ、フルスクリーン表示、アンドロイドはこの点を保証することはできませんが、水平方向のフルスクリーンは、垂直はフルスクリーン、およびその逆にすることはできませんです。

{/{p 4) iosデバイスの場合、widthを定義しても、ページの最も広い位置がwidthを超える場合、widthは無効となり、最も広い幅が表示されます（スクロールバーなし）。しかし、この時点で非常に奇妙な問題があるでしょう、あなたが携帯電話の水平方向と垂直方向の画面を数回切り替えますと、あなたのページが自動的に拡大され、スクロールバーがありますが、実際には、拡大された幅は、実際にあなたが設定した幅との関係を持っていないことが判明する。これを防ぐには、横幅をページの一番広い部分より大きく設定するか、同じにする必要があります。

{