ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解

モバイル デバイス上で Web ページを再構築または開発する場合、最初に理解する必要があるのは、モバイル デバイス上のビューポートです。ビューポートの概念を理解し、ビューポートに関連するメタ タグの使用法を理解することによってのみ、より深く理解することができます。当社の Web ページは、さまざまな解像度のさまざまなモバイル デバイスに適応または応答します。

ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解. ビューポートの概念

平たく言えば、モバイルデバイス上のビューポートは、Web ページを表示するために使用できるデバイスの画面上の領域です。または、アプリ内の Web ビュー) は、Web ページのその部分を表示するために使用されますが、ビューポートはブラウザーの表示領域のサイズに制限されず、ブラウザーの表示領域よりも大きい場合もあります。ブラウザの表示領域よりも大きくする必要があります。表示領域は小さくする必要があります。一般に、デフォルトでは、モバイル デバイスのビューポートはブラウザの表示領域よりも大きくなります。これは、モバイル デバイスの解像度がデスクトップ コンピュータの解像度より小さいためです。そのため、従来の Web サイト向けに設計されています。デスクトップ ブラウザは通常、デバイス上に表示されます。モバイル デバイス上のブラウザは、デフォルトのビューポートを 980 ピクセルまたは ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解0ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解4 ピクセルに設定します (他の値である場合もあります。これはデバイス自体によって決定されます)。その結果、水平スクロールが行われます。ブラウザの表示領域の幅がデフォルトのビューポートの幅より小さいため、ブラウザにバーが表示されます。以下の画像は、一部のデバイス上のブラウザのデフォルトのビューポート幅を示しています。

ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解. CSS の ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解 ピクセルはデバイスの ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解 ピクセルと等しくありません

CSS では、一般に単位として px が使用され、CSS の ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解 ピクセルはコンピューター画面 ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解 に対応することがよくあります。物理ピクセル。CSS 内のピクセルがデバイスの物理ピクセルであるかのように錯覚する場合があります。しかし実際はそうではなく、CSS のピクセルは単なる抽象的な単位であり、デバイスや環境が異なると、CSS で ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解px で表されるデバイスの物理的なピクセルが異なります。デスクトップブラウザ用に設計された Web ページでは、これについて心配する必要はありませんが、モバイルデバイスではこれを理解する必要があります。以前のモバイル デバイスでは、解像度 ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解0x480 の iPhone ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解 など、画面のピクセル密度が比較的低く、CSS の ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解 ピクセルが画面上の ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解 つの物理ピクセルに相当しました。その後、テクノロジーの発展に伴い、Apple は iPhone 4 から解像度を ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解 倍の ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解40x9ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解0 に高めた、いわゆる Retina スクリーンを発売しましたが、画面サイズは変わりませんでした。これは、同じサイズの画面上に ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解 倍のピクセルがあることを意味します。このとき、ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解 つの CSS ピクセルは ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解 つの物理ピクセルに相当します。他のブランドのモバイルデバイスにも同じことが当てはまります。たとえば、Android デバイスは、画面のピクセル密度に応じて ldpi、mdpi、hdpi、xhdpi などのさまざまなレベルに分類でき、Android デバイスの ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解 つの CSS ピクセルは何ピクセルに相当します。画面上の物理的なピクセル数はデバイスによって異なりますが、結論はありません。

CSS の px の変更を引き起こす可能性のある別の要因があり、それはユーザーのスケーリングです。たとえば、ユーザーがページ サイズを ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解 倍にすると、CSS で ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解px で表される物理ピクセルも ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解 倍になります。逆に、ページが ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解 倍になると、CSS で ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解px で表される物理ピクセルも ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解 倍になります。この点については、この記事の後半で説明します。

モバイル ブラウザーと一部のデスクトップ ブラウザーでは、window オブジェクト に devicePixelRatio 属性があります。その公式の定義は、デバイスの物理ピクセルとデバイスに依存しないピクセルの比率、つまり devicePixelRatio = 物理ピクセル/独立ピクセルです。 CSS の px はデバイスの独立したピクセルと見なすことができるため、devicePixelRatio を通じて、デバイス上の CSS ピクセルが表す物理ピクセル数を知ることができます。たとえば、Retina スクリーンを備えた iPhone では、devicePixelRatio の値は ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解 です。これは、ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解 CSS ピクセルが ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解 物理ピクセルに相当することを意味します。ただし、devicePixelRatio には依然としてさまざまなブラウザーでの互換性の問題があるため、現時点ではこれを完全に信頼することはできません。具体的な状況については、この記事を参照してください。

devicePixelRatio テスト結果:

ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解. ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解 つのビューポートに関する PPK の理論

ppk の達人は、モバイル デバイス上のビューポートについて多くの研究を行っています (最初の記事、二番目の記事、三番目の記事) 、興味のある学生はこの記事の多くのデータや意見もそこから得られます。 ppk は、モバイル デバイスには ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解 つのビューポートがあると考えています。

まず、モバイル デバイス上のブラウザは、モバイル デバイス用に設計されていない Web サイトも含め、すべての Web サイトが適切に表示されるようにする必要があると考えています。ただし、ブラウザの表示領域をビューポートとして使用すると、モバイル デバイスの画面はそれほど広くないため、デスクトップ ブラウザ用に設計された Web サイトをモバイル デバイスで表示すると、モバイル デバイスのビューポートが必然的に狭くなりすぎます。 . そして密集してしまうとレイアウトまで崩れてしまいます。現在、ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解8xビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解0ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解4 や ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解080xビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解9ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解0 などの非常に大きな解像度の携帯電話が多くありますが、そのような携帯電話でデスクトップ ブラウザ用に設計された Web サイトを表示しても問題ないのかと疑問に思う人もいるかもしれません。前に述べたように、CSS の ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解px は画面上の ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解px を表すわけではありません。解像度が大きいほど、CSS の ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解px で表される物理ピクセルが多くなり、devicePixelRatio の値も大きくなります。は増加しましたが、画面サイズはあまり増加していません。CSS の ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解 ピクセルは、画面上の ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解 ピクセルのサイズが低解像度デバイスのサイズと同じになるように、より多くの物理ピクセルを表す必要があります。そうしないと、小さすぎてはっきりと見えなくなります。したがって、ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解080xビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解9ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解0 のようなデバイスでは、デフォルトで、p の幅を全画面幅である ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解00 ピクセル (devicePixelRatio の値に応じて) 以上に設定するだけでよいでしょう。トピックに戻ります。モバイル デバイス上のブラウザの表示領域がビューポートに設定されている場合、一部の Web サイトはビューポートが狭すぎるために乱雑に表示されるため、これらのブラウザはデフォルトでビューポートを広いビューポートに設定することにします。 .値 (980px など) を使用すると、デスクトップ用に設計された Web サイトでもモバイル ブラウザーで通常どおり表示できます。 ppk は、このブラウザのデフォルトのビューポートを レイアウト ビューポート と呼びます。 このレイアウト ビューポートの幅は、document.documentElement.clientWidth を通じて取得できます。

ただし、レイアウト ビューポート の幅はブラウザの表示領域の幅より大きいため、ブラウザの表示領域のサイズを表すビューポートも必要です。ppk はこのビューポートを ビジュアル ビューポート と呼びます。 。ビジュアル ビューポートの幅は window.innerWidth を通じて取得できますが、Android ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解、Oprea mini、UC 8 では正しく取得できません。

これで、レイアウト ビューポートとビジュアル ビューポートの ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解 つのビューポートができました。しかし、ブラウザはそれだけでは十分ではないと感じています。現在、ますます多くの Web サイトがモバイル デバイス向けに個別に設計されているため、モバイル デバイスに完全に適応できるビューポートが必要です。いわゆる完全な適応とは、まずユーザーがズームや水平スクロール バーを必要とせずに Web サイトのすべてのコンテンツを通常どおりに表示できること、次に、表示されるテキストのサイズが適切であることを意味します。 ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解4px のテキストは、テキストのサイズが原因で表示されません。高密度ピクセルの画面では、表示が小さすぎてはっきりと見えません。この ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解4px のテキストのサイズは、どの密度であっても同じになることが理想的です。画面と解像度。もちろん、これはテキストだけでなく、写真などの他の要素にも当てはまります。 ppk は、このビューポートを 理想ビューポート と呼びます。これは ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解 番目のビューポート、つまりモバイル デバイスにとって理想的なビューポートです。

理想的なビューポートには固定サイズがありません。デバイスが異なれば、理想的なビューポートも異なります。すべての iPhone の理想的なビューポート幅は、画面幅が ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解0 か ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解40 かに関係なく、ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解0 ピクセルです。つまり、iPhone では、CSS の ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解0 ピクセルが iPhone 画面の幅を表します。ただし、Android デバイスは比較的複雑で、ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解0 ピクセル、ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解0 ピクセル、ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解84 ピクセルなどがあります。多数のデバイスに最適な幅のコレクションを確認してください。

要約すると: ppk は、モバイル デバイス上のビューポートを、レイアウト ビューポート、ビジュアル ビューポート、 理想的なビューポートの ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解 つのカテゴリに分類します。そのうち、理想的なビューポートは、モバイル デバイスに最も適したビューポートです。 Ideal ビューポートの幅は、モバイル デバイスの画面幅と同じです。 特定の要素の幅が CSS で理想的なビューポートの幅 (単位は px) に設定されている限り、この要素の幅は次のようになります。デバイス画面の幅、つまり幅は ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解00% になります。理想的なビューポートの重要性は、使用されている画面解像度に関係なく、理想的なビューポート用に設計された Web サイトを、ユーザーが手動でズームしたり水平スクロール バーを操作したりすることなく、ユーザーに完全に表示できることです。

4. メタタグを使用してビューポートを制御します

モバイルデバイスのデフォルトのビューポートは、画面よりも広いビューポートです。理想的なビューポートが必要です。では、どうすれば理想的なビューポートを取得できるでしょうか?メタタグが登場する番です。

モバイル デバイス用の Web サイトを開発する場合、最も一般的なアクションの ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解 つは、次の内容を head タグにコピーすることです:

<meta name="viewport" content="width=device-width, initial-scale=ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解.0, maximum-scale=ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解.0, user-scalable=0">

このメタ タグの機能は、現在のビューポートの幅を現在のビューポートの幅と等しくすることです。ユーザーが手動でズームすることはできませんが、デバイスの幅に合わせて調整できます。ユーザーがズームできるようにするための要件は Web サイトごとに異なる可能性がありますが、ビューポートの幅をデバイスの幅と同じにすることは、誰もが望む効果であるはずです。このように設定しない場合は、画面比率が使用されます。デフォルトのビューポートは幅が広いため、水平スクロール バーが表示されます。

viewport という名前のこのメタ タグには正確に何が含まれており、その機能は何ですか?

meta viewport タグは、モバイル デバイスのビューポートの問題を解決するために、Apple によって Safari ブラウザに初めて導入されました。その後、Android や主要なブラウザ メーカーもこれに倣い、メタ ビューポートのサポートを導入しました。これは、これが依然として非常に便利であることを証明しています。

Apple の仕様では、メタ ビューポートには次のように ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解 つの属性があります (これらをコンテンツの属性と値と呼びましょう):

これらの属性は、単独または混合して同時に使用できます。複数の属性を同時に使用する場合は、カンマで区切ってください。

さらに、Android はターゲット デバイスの密度レベルを表すプライベート属性 target-densitydpi もサポートしています。その機能は、CSS の ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解px が何個の物理ピクセルを表すかを決定することです

特别说明的是，当 target-densitydpi=device-dpi 时， css中的ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解px会等于物理像素中的ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解px。

因为这个属性只有安卓支持，并且安卓已经决定要废弃target-densitydpi 这个属性了，所以这个属性我们要避免进行使用 。

五、把当前的viewport宽度设置为 ideal viewport 的宽度

要得到ideal viewport就必须把默认的layout viewport的宽度设为移动设备的屏幕宽度。因为meta viewport中的width能控制layout viewport的宽度，所以我们只需要把width设为width-device这个特殊的值就行了。

<meta name="viewport" content="width=device-width">

下图是这句代码在各大移动端浏览器上的测试结果：

可以看到通过width=device-width，所有浏览器都能把当前的viewport宽度变成ideal viewport的宽度，但要注意的是，在iphone和ipad上，无论是竖屏还是横屏，宽度都是竖屏时ideal viewport的宽度。

这样的写法看起来谁都会做，没吃过猪肉，谁还没见过猪跑啊~，确实，我们在开发移动设备上的网页时，不管你明不明白什么是viewport，可能你只需要这么一句代码就够了。

可是你肯定不知道

<meta name="viewport" content="initial-scale=ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解">

这句代码也能达到和前一句代码一样的效果，也可以把当前的的viewport变为 ideal viewport。

呵呵，傻眼了吧，因为从理论上来讲，这句代码的作用只是不对当前的页面进行缩放，也就是页面本该是多大就是多大。那为什么会有 width=device-width 的效果呢？

要想清楚这件事情，首先你得弄明白这个缩放是相对于什么来缩放的，因为这里的缩放值是ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解，也就是没缩放，但却达到了 ideal viewport 的效果，所以，那答案就只有一个了，缩放是相对于 ideal viewport来进行缩放的，当对ideal viewport进行ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解00%的缩放，也就是缩放值为ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解的时候，不就得到了 ideal viewport吗？事实证明，的确是这样的。下图是各大移动端的浏览器当设置了<meta name="viewport" content="initial-scale=ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解"> 后是否能把当前的viewport宽度变成 ideal viewport 的宽度的测试结果。

测试结果表明 initial-scale=ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解 也能把当前的viewport宽度变成 ideal viewport 的宽度，但这次轮到了windows phone 上的IE 无论是竖屏还是横屏都把宽度设为竖屏时ideal viewport的宽度。但这点小瑕疵已经无关紧要了。

但如果width 和 initial-scale=ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解同时出现，并且还出现了冲突呢？比如：

<meta name="viewport" content="width=400, initial-scale=ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解">

width=400表示把当前viewport的宽度设为400px，initial-scale=ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解则表示把当前viewport的宽度设为ideal viewport的宽度，那么浏览器到底该服从哪个命令呢？是书写顺序在后面的那个吗？不是。当遇到这种情况时，浏览器会取它们两个中较大的那个值。例如，当width=400，ideal viewport的宽度为ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解0时，取的是400；当width=400， ideal viewport的宽度为480时，取的是ideal viewport的宽度。（ps:在uc9浏览器中，当initial-scale=ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解时，无论width属性的值为多少，此时viewport的宽度永远都是ideal viewport的宽度）

最后，总结一下，要把当前的viewport宽度设为ideal viewport的宽度，既可以设置 width=device-width，也可以设置 initial-scale=ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解，但这两者各有一个小缺陷，就是iphone、ipad以及IE 会横竖屏不分，通通以竖屏的ideal viewport宽度为准。所以，最完美的写法应该是，两者都写上去，这样就 initial-scale=ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解 解决了 iphone、ipad的毛病，width=device-width则解决了IE的毛病：

<meta name="viewport" content="width=device-width, initial-scale=ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解">

六、关于meta viewport的更多知识

ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解、关于缩放以及initial-scale的默认值

首先我们先来讨论一下缩放的问题，前面已经提到过，缩放是相对于ideal viewport来缩放的，缩放值越大，当前viewport的宽度就会越小，反之亦然。例如在iphone中，ideal viewport的宽度是ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解0px，如果我们设置 initial-scale=ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解 ，此时viewport的宽度会变为只有ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解0px了，这也好理解，放大了一倍嘛，就是原来ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解px的东西变成ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解px了，但是ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解px变为ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解px并不是把原来的ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解0px变为ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解40px了，而是在实际宽度不变的情况下，ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解px变得跟原来的ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解px的长度一样了，所以放大ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解倍后原来需要ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解0px才能填满的宽度现在只需要ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解0px就做到了。因此，我们可以得出一个公式：

visual viewport宽度 = ideal viewport宽度  / 当前缩放值

当前缩放值 = ideal viewport宽度  / visual viewport宽度

ps: visual viewport的宽度指的是浏览器可视区域的宽度。

大多数浏览器都符合这个理论，但是安卓上的原生浏览器以及IE有些问题。安卓自带的webkit浏览器只有在 initial-scale = ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解 以及没有设置width属性时才是表现正常的，也就相当于这理论在它身上基本没用；而IE则根本不甩initial-scale这个属性，无论你给他设置什么，initial-scale表现出来的效果永远是ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解。

好了，现在再来说下initial-scale的默认值问题，就是不写这个属性的时候，它的默认值会是多少呢？很显然不会是ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解，因为当 initial-scale = ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解 时，当前的layout viewport宽度会被设为 ideal viewport的宽度，但前面说了，各浏览器默认的 layout viewport宽度一般都是980啊，ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解0ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解4啊，800啊等等这些个值，没有一开始就是 ideal viewport的宽度的，所以 initial-scale的默认值肯定不是ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解。安卓设备上的initial-scale默认值好像没有方法能够得到，或者就是干脆它就没有默认值，一定要你显示的写出来这个东西才会起作用，我们不管它了，这里我们重点说一下iphone和ipad上的initial-scale默认值。

根据测试，我们可以在iphone和ipad上得到一个结论，就是无论你给layout viewpor设置的宽度是多少，而又没有指定初始的缩放值的话，那么iphone和ipad会自动计算initial-scale这个值，以保证当前layout viewport的宽度在缩放后就是浏览器可视区域的宽度，也就是说不会出现横向滚动条。比如说，在iphone上，我们不设置任何的viewport meta标签，此时layout viewport的宽度为980px，但我们可以看到浏览器并没有出现横向滚动条，浏览器默认的把页面缩小了。根据上面的公式，当前缩放值 = ideal viewport宽度 / visual viewport宽度，我们可以得出：

当前缩放值 = ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解0 / 980

也就是当前的initial-scale默认值应该是 0.ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解这样子。当你指定了initial-scale的值后，这个默认值就不起作用了。

总之记住这个结论就行了：在iphone和ipad上，无论你给viewport设的宽的是多少，如果没有指定默认的缩放值，则iphone和ipad会自动计算这个缩放值，以达到当前页面不会出现横向滚动条(或者说viewport的宽度就是屏幕的宽度)的目的。

ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解、动态改变meta viewport标签

第一种方法

可以使用document.write来动态输出meta viewport标签，例如：

document.write(&#ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解9;<meta name="viewport" content="width=device-width,initial-scale=ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解">&#ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解9;)

第二种方法

通过setAttribute来改变

<meta id="testViewport" name="viewport" content="width = ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解80"><script>var mvp = document.getElementById(&#ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解9;testViewport&#ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解9;);
mvp.setAttribute(&#ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解9;content&#ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解9;,&#ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解9;width=480&#ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解9;);</script>

安卓ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解.ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解自带浏览器上的一个bug

<meta name="viewport" content="width=device-width">

测试的手机ideal viewport 宽度为ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解0px，第一次弹出的值是ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解00,但这个值应该是第行meta标签的结果啊，然后第二次弹出的值是ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解0，这才是第一行meta标签所达到的效果啊，所以在安卓ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解.ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解(或许是所有ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解.x版本中)的自带浏览器中，对meta viewport标签进行覆盖或更改，会出现让人非常迷糊的结果。

七、结语

说了那么多废话，最后还是有必要总结一点有用的出来。

首先如果不设置meta viewport标签，那么移动设备上浏览器默认的宽度值为800px，980px，ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解0ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解4px等这些，总之是大于屏幕宽度的。这里的宽度所用的单位px都是指css中的px，它跟代表实际屏幕物理像素的px不是一回事。

第二、每个移动设备浏览器中都有一个理想的宽度，这个理想的宽度是指css中的宽度，跟设备的物理宽度没有关系，在css中，这个宽度就相当于ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解00%的所代表的那个宽度。我们可以用meta标签把viewport的宽度设为那个理想的宽度，如果不知道这个设备的理想宽度是多少，那么用device-width这个特殊值就行了，同时initial-scale=ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解也有把viewport的宽度设为理想宽度的作用。所以，我们可以使用

<meta name="viewport" content="width=device-width, initial-scale=ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解">

来得到一个理想的viewport（也就是前面说的ideal viewport）。

为什么需要有理想的viewport呢？比如一个分辨率为ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解0x480的手机理想viewport的宽度是ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解0px，而另一个屏幕尺寸相同但分辨率为ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解40x9ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解0的手机的理想viewport宽度也是为ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解0px，那为什么分辨率大的这个手机的理想宽度要跟分辨率小的那个手机的理想宽度一样呢？这是因为，只有这样才能保证同样的网站在不同分辨率的设备上看起来都是一样或差不多的。实际上，现在市面上虽然有那么多不同种类不同品牌不同分辨率的手机，但它们的理想viewport宽度归纳起来无非也就 ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解0、ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解0、ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解84、400等几种，都是非常接近的，理想宽度的相近也就意味着我们针对某个设备的理想viewport而做出的网站，在其他设备上的表现也不会相差非常多甚至是表现一样的。

【相关推荐】

ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解. 特别推荐：“php程序员工具箱”V0.ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解版本下载

ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解. 关于viewport兼容性问题的实例代码

ビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解. 分享viewport属性解决移动端竖屏切横屏字体被重置的问题实例

4. HTML5中Viewport的参数介绍以及使用方法

以上がビューポートの特別トピック: css-viewport でのレスポンシブ Web デザインの深い理解の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。