HTML meta viewport 属性の詳細

ビューポートとは
モバイルブラウザは、通常画面より広い仮想の「ビューポート」にページを配置するため、各ページを小さなウィンドウに押し込む必要がありません（これは、モバイルブラウザに最適化されていないページのレイアウトを壊してしまうことになります。 このため、ユーザーは各ページを小さなウィンドウに押し込むのではなく、パンやズームでページの別の部分を見ることができます（これは、モバイルブラウザ用に最適化されていないページのレイアウトを壊してしまいます）。モバイル版Safariは最近、viewportメタタグを導入し、ウェブ開発者がviewportのサイズとズームを制御できるようになり、他のモバイルブラウザでもほぼサポートされるようになりました。 {他のモバイルブラウザでもサポートされています。 /{br {viewport metaタグは、Safariブラウザの最新機能です。
ビューポートの基本
モバイルWebに最適化されたページの一般的なviewport metaタグは、おおよそ次のようなものです。
/{br
ビューポートについて少しでも知っている学生であれば、上記の知識はすでに理解しているはずだと思います。今日、私が言いたいのはこの点ではありません。私が説明したいのは、iosとandroidにおけるviewportのパフォーマンスの違いの一部です。
ビューポートに関する知識をウェブで検索すると、基本的に以下のような情報が得られます。
/

このコードは、ビューポートの幅を物理デバイスの実際の解像度と同じにし、ユーザーが拡大縮小できないようにするためのものです。主流のウェブアプリはすべてこのように設定されています。このコードが行うことは、意図的にビューポートを破棄してページのスケーリングを行わないようにすることです。そのため、スケーリングを行わずにdpiをデバイスの実際の解像度と同じにしなければならず、ページはより高く、より詳細に表示されることになります。PSをプレイしている学生は、1000 * 1000の画像を直接500 * 500ポイントにズームすると、何、に知っている必要があります。画像の歪みから逃れられないのです。 {画像の歪みから逃れられない。
しかし、私はその逆で、ビューポートを利用した、スケーリングを活かしたアプリケーションを作りたいのです。実際の解像度がどうであれ、物理的なサイズがどうであれ、ブラウザの解像度を一定にし、かつユーザーがズームできないようにしたいのです。テストに使った端末は、iphone4、ipad2、htcのg11、某メーカーのアクオスフォン（android系）、asusのandroid pad、dellのwinphoneで、途中、以下の問題に遭遇しました。
1) ビューポートがディスプレイなしで設定されている場合、デフォルトの幅は980です。ページのすべての要素が980より小さい場合は980、ページの最も広い位置が980より大きい場合は、最大幅と同じ幅になります。つまり、デフォルトではページ全体を左から右に表示するようになっています。ビューポートを設定する場合は、例えばuser-scalable=noと設定するだけです。 とすると、iosではwidthは980のまま表示されますが（つまりデフォルトでdpiで拡大縮小される）、androidとwinphoneでは拡大縮小されなくなり、ブラウザの解像度が実際の解像度と同じになります。 {ブラウザの解像度は実際の解像度と同じになります。 /{br
2）iosデバイスの場合は、設定幅が有効にすることができますが、アンドロイドの場合は、設定幅が有効になりません。iosデバイス、スケーリング比、すなわちdpiは、設定幅と設定実質解像度によって自動的に計算され、一方アンドロイドでは、設定幅が無効であることができ、あなたが設定できるすべては、特別なフィールドのターゲット-密度dpiです。密度dpi、ターゲット-密度dpiについてこの記事を参照できます： http://hi.baidu.com/j_fo/blog/item /748361279ebccd18908f9d7d.html. つまり、3つの変数があります：ブラウザの幅、デバイスの実 我々は、単にそれらの間の関係を表現する式を使用する（ない実際の関係、との単純な説明）デバイスの実幅* dpi =ブラウザ幅、ここで3変数は、デバイスの実幅は、我々は操作することはできませんが、他の二つの変数我々は他に影響を与えるために1を設定できる既知の値です、iosで、我々は変更できるものブラウザ幅であり、dpiは自動生成され、Androidで、我々は変更できるものがdpiであり、ブラウザ幅が自動生成されています。androidの場合、widthをどう設定しても、ブラウザの幅には影響しない。
追記：ここでもう一つ奇妙な問題を言っておくと、htcのg11（htcの携帯はこれだけ持っていて、他はテストしていない）では、dpiを設定して幅を表示しない場合、user-scalable=noは有効にならない、つまりは。 というように、ユーザーが画面を拡大縮小することを妨げるものではありません。表示する幅の値を設定する必要がありますが、この値はアンドロイドではブラウザの画面解像度に影響しない（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の実装の問題なのかわかりません。 {これがwinphoneの問題なのか、dellの実装の問題なのかわかりません。 /{br
(3）この記事と前の1つは、直接関連する必要があります：iosデバイスは、ブラウザの幅がビューポートで設定された値と等しくなるように、水平または垂直かどうか、水平および垂直画面が、ときに自動的にdpiを調整します、上の表示コンテンツの大きさは、。