ビューポートとは何ですか
モバイルブラウザは、ページを仮想ウィンドウ（ビューポート）に配置します。通常、仮想ウィンドウ（ビューポート）は画面よりも広くなっているため、各Webページは各Webページを非常に小さなウィンドウに絞る必要はありません（これにより、モバイルブラウザ向けに最適化されていないWebページのレイアウトが破壊されます）。ユーザーは、パンニングとズームを通じてWebページのさまざまな部分を見ることができます。 Safari Browserのモバイルバージョンは最近、Web開発者がViewPortのサイズとズームを制御できるようにするViewPortのMetaタグを導入しました。
ビューポートの基本
モバイルWebページ用に最適化された一般的に使用されるページのビューポートメタタグは、次のとおりです。
<Meta name = viewport content = width = device-width、initial-scale = 1、maximum-scale = 1″>
幅：600またはデバイスの幅などの特別な値がデバイスの幅（100％にスケーリングされた場合のCSSのピクセルの単位で指定できるビューポートのサイズを制御します。
高さ：幅に対応し、高さを指定します。
初期スケール：初期スケーリング、つまり、ページが初めてロードされたときのスケーリング比。
最大スケール：ユーザーがスケーリングできる最大スケール。
最小スケール：ユーザーがスケーリングできる最小スケール。
ユーザースケーラブル：ユーザーは手動でスケーリングできます
ビューポートに関するいくつかの質問
Viewportは、iOSの単なるユニークな属性ではなく、AndroidとWinPhoneのビューポートでもあります。彼らが解決したい問題は同じです。つまり、デバイスの実際の解像度を無視し、DPIを直接無視して、物理サイズとブラウザの間の解像度をリセットします。これは、デバイスの解像度とは関係ありません。たとえば、3.5インチ-320 * 480、3.5インチ-640 * 960のiPhone4、9.7インチ-1024 * 768のiPhone4、さまざまな解像度と物理サイズのiPad2を搭載したiPhone4を入手できます。たとえば、あなたのウェブサイトの幅は800pxです。ビューポートの幅= 800を設定して、これらの3つの異なるデバイスにWebサイトをフル画面に表示できるようにすることができます。
ビューポートを少し理解しているすべての学生は、上記の知識をすでに理解しているべきだったと思います。これは私が今日話したいポイントではありません。私が説明したいのは、iOSとAndroidのビューポートパフォーマンスの違いの一部です。
ビューポートに関するオンライン知識を検索するとき、それは基本的に次のすべての情報です。
<meta name = viewport content = width = device-width、initial-scale = 1.0、maximing-scale = 1.0、minimut-scale = 1.0、user-scalable = no />
このコードは、ビューポートの幅が物理デバイスの実際の解像度に等しく、ユーザーがスケーリングできることを意味します。これが、Yiduの主流のWebアプリの設定方法です。その機能は、ビューポートを意図的に放棄し、ページをスケーリングすることではありません。このようにして、DPIはデバイスの実際の解像度と同じでなければなりません。スケーリングなしで、Webページはより高く、より繊細に見えます。 PSをプレイする学生は、1000 * 1000の写真を直接500 * 500ポイントにズームすると、それがどうなるかを知る必要がありますよね？写真の歪みを逃がしてはなりません。
しかし、私がやりたいアプリケーションは反対であり、ビューポートとズームを使用する必要があります。実際の解像度が何であれ、物理サイズが何であれ、ブラウザに統一された解像度があり、ユーザーがズームを許可されないことを願っています。私がテストしていたデバイスは次のとおりです。iPhone4、iPad2、HTC G11、AQUOS電話（Android System）、Asus Android Pad、Dell WinPhone、そして私は次の問題に遭遇しました。
1）表示されていないビューポートが表示されない場合、デフォルトの幅は980です。ページのすべての要素が980未満の場合、幅は980です。ページの幅が980を超える場合、幅は最大幅に等しくなります。要するに、ページ全体をデフォルトで左から右に表示できます。たとえば、ビューポートを設定した場合、ユーザースケーラブル=いいえ、たとえば<meta name = viewport content = user-scalable = no />、iOSの幅は980で表示されます（つまり、デフォルトでDPIによってスケーリングされます）が、アンドロイドとワンフォンは同じセットで縮小されます。
2）iOSデバイスの場合、設定幅が有効になる可能性がありますが、Androidの場合、設定幅は有効になりません。 DPIのスケーリング比は、設定した幅と設定した実際の解像度によって自動的に計算されます。ただし、Androidでは、幅を設定することは無効です。設定できるのは、特別なフィールドTarget-DensityDPIです。つまり、ブラウザ幅、デバイスの実際の幅、DPIの3つの変数があります。式を使用してそれらの関係を表現しましょう（実際の関係ではなく、簡単な説明に使用するだけです）デバイスの実際の幅 * dpi =ブラウザ幅、ここでは3つの変数、デバイスの実際の幅は操作できない既知の値です。 iOSでは、変更できるのはブラウザの幅、DPIが自動的に生成され、Androidで変更できるのはDPIで、ブラウザの幅が自動的に生成されます。 Androidの場合、幅をどのように設定しても、ブラウザの幅に影響を与えません。
PS：ここで私は別の奇妙な問題について話します：HTCのG11（私はこれがHTCの携帯電話でしかありません、そして他のテストはありません）、DPIが幅を表示せずに設定する場合、ユーザースケーラブル=効果はありません、つまり、<meta name = viewport content = target-dencessdpi = 300、userable = no no from from in in no in scaliable = 300幅を表示可能に設定する必要があります。この値は、Androidの下でのブラウザ画面の解像度に影響を与えませんが（iOSにまだ影響を与えます）、設定する必要があります。この値は320以上でなければなりません。この問題は、HTCのG11電話にのみ表示され、AQUOS電話にはそのような問題はありません。 Androidと互換性があるのは、本当に頭痛 @_ @です。将来何回の落とし穴になるのかわかりません。 WinPhoneでは、結果はさらに奇妙です。ビューポートの幅に480を超える値を設定し、ユーザースケーラブル= NOは失敗します。値が480未満の場合、ユーザースケーラブル= noが有効になります。しかし、ViewPort幅をどれだけ値に設定しても、WinPhoneが表示する実際の幅に影響を与えず、Target-DencessDPIを介して効果もありません。幅を設定しますが、480未満の場合、画面はズームアウトされますが、削減のスケールは私が予想したものとはまったく異なります。ズームインしているルールがわかりません。これがWinPhoneの問題なのか、Dellの実装の問題なのかはわかりません。
3）この記事は、前の記事に直接関連する必要があります。iOSデバイスが水平で垂直な場合、DPIを自動的に調整します。水平であろうと垂直であろうと、ブラウザの幅がビューポートで設定された値に等しいことを保証できます。したがって、水平画面と垂直スクリーンが水平画面と垂直画面の場合、ページに表示されるコンテンツのサイズが自動的にスケーリングおよび変更されます。 Android携帯電話が水平画面で垂直な画面である場合、DPIは変更されず、水平および垂直の画面の場合、Webページはズームされません。このため、iOSは水平ページと垂直ページでスクロールバーが生成されず、フル画面が表示されていることを確認できますが、Androidはこれを保証できません。水平画面と垂直画面がいっぱいになることが許可されていない場合、逆も同様です。
4）iOSデバイスの場合、幅ディスプレイが定義され、ページの最も広い位置が幅を超えると、幅が無効であり、幅が最も広い幅で表示されます（スクロールバーはありません）。しかし、現時点では非常に奇妙な問題が発生します。携帯電話の水平画面と垂直画面を数回切り替えた後、ページが自動的に拡大し、スクロールバーが表示されますが、実際、拡大した幅は設定した幅とは何の関係もありません。これが発生しないようにするには、幅の幅をページの最も広い部分よりも大きくするか、同じように設定する必要があります。