HTMLメタビューポートの詳しい説明attribute_html/css_WEB-ITnose

ビューポートとは

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

ビューポートの基本

モバイル Web ページ用に最適化されたページで一般的に使用されるビューポート メタ タグは、おおよそ次のとおりです:

<meta name=”viewport” content=”width=device-width,Initial-scale=1, Maximum-scale=1''>

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

initial-scaleページの設定 初期スケーリング値は、小数を含むことができる数値です minimum-scalemaximum- ユーザーが許可する最小スケーリング値。スケールheightの高さを設定します。このプロパティは私たちにとって重要ではありません、ほとんど使用されませんユーザースケーラブル ユーザーがズームを許可されているかどうか、値 「いいえ」または「はい」です。いいえは許可されないことを意味し、はいは許可されることを意味します

width	レイアウトビューポートの幅を正の整数、または文字列「width-device」として設定します
ユーザーが許可する最大スケーリング値は数値であり、小数を使用できます
レイアウトビューポート
	ビューポートに関するいくつかの質問 ビューポートは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 を設定すると、これら 3 つの異なるデバイスで Web サイトを正確に全画面表示できます。 ビューポートについて少し知識がある学生は、上記の知識をすでに知っているはずだと思います。今日私が言いたいことの焦点はこれではありません。ここで説明したいのは、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 と iPad では、ビューポートをどれだけ広く設定しても、デフォルトのスケーリング値が指定されていない場合、現在のページが水平方向にスクロールしないようにスケーリング値が自動的に計算されます。バー（またはビューポートの幅が画面の幅）。 しかし、私が作りたいアプリケーションは、ビューポートとズームを使用する必要があります。実際の解像度がどのようなものであっても、物理的なサイズがどのようなものであっても、ブラウザーでは均一の解像度を持ち、ユーザーがズームできないようにしたいと考えています。テストに使用したデバイスは、iPhone 4、iPad 2、htc の g11、メーカー不明の aquos Phone (Android システム)、ASUS の Android Pad、および Dell の winphone です。そして、途中で次の問題に遭遇しました。 1) ビューポートが明示的に設定されていない場合、幅はデフォルトで 980 に設定されます。ページ上のすべての要素の幅が 980 未満の場合、幅は 980 になります。ページの最も幅の広い位置が 980 を超える場合、幅は最大幅と等しくなります。つまり、デフォルトではページ全体を左から右に表示できます。ビューポートが設定されている場合、たとえば、user-scalable=no が <meta name="viewport" content="user-scalable=no" /> のように設定されている場合、幅は引き続き 980 と表示されます。 ios (つまり、デフォルトでは dpi によってスケーリングされます) ですが、Android および Winphone ではスケーリングされなくなり、ブラウザーの解像度は実際の設定解像度と一致します。 2) iOS デバイスの場合、幅の設定は有効になりますが、Android の場合、幅の設定は有効になりません。 iOS デバイスの場合、スケーリング率、つまり dpi は、設定した幅と実際の解像度に基づいて自動的に計算されます。Android では、設定できる幅は特別なフィールド target-densitydpi です。つまり、ブラウザの幅、デバイスの実際の幅、dpi という 3 つの変数があります。 それらの間の関係を簡単に式で表してみます (実際の関係ではありません。簡単に説明するためです)。 ここでの 3 つの変数のうち、デバイスの実際の幅は操作できない既知の値です。 . 、他の 2 つの変数の 1 つを設定して、他の変数に影響を与えることができます。iOS では、変更できるのはブラウザの幅であり、Android では、変更できるのは dpi とブラウザの幅です。が自動的に生成されます。 Android の場合、幅をどのように設定しても、ブラウザの幅には影響しません。 target-densitydpi: target-densitydpi は、ターゲット デバイスの密度レベルを表すプライベート プロパティであり、その機能は、CSS の 1px が表す物理ピクセル数を決定することです。 target-densitydpi 値は数値、または文字列 high-dpi、medium-dpi、low-dpi、device-dpi の 1 つです 特別な注意は、target-densitydpi=device-dpi の場合、CSS の 1 ピクセルが物理ピクセルの 1 ピクセルに等しいことです。 この属性は Android でのみサポートされており、Android は target-densitydpi 属性を放棄することを決定しているため、この属性の使用は避けるべきです。 さらに詳細な情報と参照アドレス: 著者: 嵐の後に虹を見てください 出典: http://www.cnblogs.com/moqiutao/ そう感じたらこの記事はあなたにとって役に立ちます。この研究は役に立ちます。サポートと励ましをお願いします。