過小評価されている小さな巨人

ビューポートの紹介

Web 開発者なら誰でも、この魔法のようなメタ タグ ヘッダーを見たり使ったりしたことがある、あるいは理解せずに、または半分意識せずに使ったことがあると思います。

最初にいくつかの疑問を解消しましょう。上の写真の Chrome ハンドヘルド デバイス シミュレータは皆さんよくご存知だと思います

では、左上隅にある 320*480 は Shenma ですか?多くの人はすでに答えを頭の中に持っているはずです。この疑問を解決する前に、概念を導入する必要があります:

ピクセルはピクセルではないピクセルはピクセルではない

W3cplus での文の引用 このピクセルはそのピクセルではありません

はい、これが私が望むものです説明すると、320*480 は CSS のピクセルではなく、デバイスの dpx を指します

違いは何ですか?もちろん違いはあります！ :

デバイスのピクセルとは、デバイスのサイズを測定する単位を指し、Web アプリケーションでよく使用されるピクセルは、Web アプリケーション開発においてアプリケーション内の要素の相対的なサイズを測定するために使用されます。抽象的な概念。以前のデバイスのピクセルは相互に互換性がありません。

それでは、なぜ CSS で px を使用してページをデザインするときに、デバイスと同じ幅を使用すると優れた視覚効果が得られるのか、ゆっくり説明しましょう。

まず見てみましょう

ビューポートに関する関連するステートメント構文

<meta name="viewport" content="name=value,name=value">

まず ppk 記事の英語の説明を引用します (インターネット上の

ソースのほとんどはここから来ています):

DirectivesEvery name/value pair is a directive. (The word is my own invention.) There are six of them in total:width         Sets the width of the layout viewport.initial-scale           Sets the initial zoom of the page AND the width of the layout viewport.minimum-scale    Sets the minimum zoom level (i.e. how much the user can zoom out).maximum-scale    Sets the maximum zoom level (i.e. how much the user can zoom in).height    Is supposed to set the height of the layout viewport. It is not supported anywhere.user-scalable    When set to no prevents the user from zooming. This is an abomination that MUST NOT be used.

理解できません?さて、翻訳者にお願いしました (翻訳が少し難しくても驚かないでください):

rreee

これを見ると、また混乱してしまうかもしれません。レイアウト ビューポートとは何ですか?

ppk マスターが意味するのは、ビューポートを設定した後、ブラウザーが

ビジュアル ビューポート、レイアウト ビューポート、理想的なビューポート に対応する 3 種類のビューポートを生成できることを想像することです。

ここであまり多くの理論を混ぜるつもりはありません。単純かつ明確な方法でビューポートを使用すると何が起こるかを説明したいだけです。ppk マスターのこれらの理論に興味がある場合は、ここにアクセスしてください。

1. 2 つのビューポートの物語 — パート 1

2. 2 つのビューポートの物語 — パート 2

3. メタ ビューポート

viewport の構文を大まかに理解したら、次のステップはケースを説明することです

ビューポートを使用しない場合 PC 用に設計された Web サイトはハンドヘルド デバイスではどのように表示されますか?

PC バージョンの Baidu を例に挙げてみましょう (PC バージョンにはビューポートがないため)。非シミュレーター状態からシミュレーター状態に切り替える

ここでわかるのは、PC バージョンのページ全体が幅わずか 320 ピクセル (非 CSS 単位) のデバイスに圧縮されていることです。通常の人には圧縮できません。それを使いますよね？では、このときのこのページの幅（css px）はどれくらいでしょうか？

HTML 要素を選択し、右下隅のボックス スタイルを見ると、現在のページの幅が 980 ピクセル (CSS ピクセル) であることがはっきりとわかります

つまり、ブラウザーには 980 ピクセルのページが表示されます。 320dpx のみ (明らかに、ここでの dpx と px の関係は 1:1 ではないことがわかります)

しかし、左下隅のスタイルシートから html の幅が見えないので、980 px はどこにあるのでしょうか?この HTML の幅はどこから来ていますか?

答え それはビューポートから来ています! 上記のビューポート構文を忘れないでください。これは、ビューポートが 980 ピクセルの幅に設定されていることを意味しますが、この例ではビューポートなしで Baidu の PC ページを使用していることを前に言いませんでしたか?

ビューポート設定の幅はどこから来たのでしょうか? これを見た人はすでに答えを持っていると思います。ビューポートを設定しないと、ブラウザは自動的にデフォルト値を使用します。

これが ppk テストです

これはどういう意味ですか? 実際、これはデフォルトで (ハンドヘルド デバイスの場合)、ビューポートを設定していない場合、ブラウザは次の値に基づいてビューポートの幅を使用することを意味します。自分のデバイスはいくつありますか。

これだけでは十分ではないので、ビューポートの幅を設定した後、HTML がその幅を採用するのはなぜですか:

幅が設定されていない場合、ビューポートは HTML 要素を超越した存在であることが理解できます。 html に設定されている場合、html の幅は viewport で設定された幅から継承されます

w3cplus を例に挙げます。

デフォルトでは View HTML と幅はありません。確かに980pxです

次に、HTML要素を設定します。幅は50%で、効果がわかります。幅の値は490pxです

ここで要約を描画できます:

ビューポートは実際にCSSの数を設定します。 px の Web コンテンツを現在のデバイスの幅の下に表示します

例として、HTML ドキュメントの幅がビューポートの幅より小さい場合にどのような効果が生じるかを説明しました。 HTML の幅がビューポートの幅よりも大きく設定されている場合

ここでは HTML の幅が 2000px に設定されており、ページにスクロール効果があることがわかります。

这里又得出一个总结：

当 html 文档的宽度小于 viewport 的宽度时已文档的实际宽度为准，文档少于 viewport 宽度的部分不显示内容，当 html文档的宽度大于 viewport 的时候，你能看到的区域依然是 viewport 的大小区域，不过你可以通过滑动或滚动页面来查看大于viewport 区域的内容

至此我们已经知道了设备宽度与 viewport 的宽度以及实际文档的宽度之间的关系。

通过上述的例子我们知道基本上 viewport 的默认宽度是980px，且浏览器会将者 viewport 大小的 html 文档塞进有限的设备宽度内（浏览器会动态计算文档的布局及内容），所以我们看到的东西都很小。

那么我们想要清除的看清文档内的内容怎么办 ，没错，缩小 viewport 的大小，什么原理？

当我们缩小 viewport 的宽度的时候文档的宽度也对应的被缩小，即一样的设备宽度，我显示的东西少了（这时候浏览器重新计算文档布局及内容）可以看到的结果是字体被放大了，内容都被放大了！

这里还是拿W3CPlus的网站做例子：一样的拿 pc 版的无 viewport 的文档放入手持设备内，没办法看清内容

这时候我在控制台输入这么一段代码：

document.head.insertAdjacentHTML('afterbegin','<meta name="viewport" content="width=320">');

这时候是不是清晰很多呢~。

知道了这个原理，那我们要把 viewport 的大小缩小到多小比较合适呢 ？答案是和你的设备宽度一样宽。但是并不是每个手持设备都是320dpx宽啊，这时候我们可以这样写 viewport 头：

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

这样就会自动计算你的设备宽度了，此处应该有掌声~

但是这个时候并未结束，是的 ，当你把你原先的980宽的页面重置成了320宽 那页面布局当然就发生变化了，惨的，无法入目，这时候就得考验大家的 css 功底了，如何避免不在此文章讨论范围内。

扩展思考

1.当我们在手持设备上放大缩小页面的时候，发生了什么？2.设备的宽度与分辨率的关系？为什么我们在做 iphone 图的时候640但到了页面只能为320？

解释：

1.

当我们在手持设备上放大的时候，设备的大小不变（废话），viewport 的大小不变， html 的大小不变，那变的是什么？

我们知道当我们设置了 f6e92b1c046015d70b7adcb8cc775d35 页面的宽度是与设备的宽度一致的达到1：1的关系

其实变得是你的可视区域 也就是 ppk 大神说的visual viewport，抛开他的理论，简单的理解就是你当你触发放大的是个动作时，页面的每一 css px宽度对应了多个设备的像素宽度（这里暂时不谈分辨率），所以你能看到元素被放大了，但是由于设备的宽度有限，所以你看到的内容也就少了，而viewport在我们一旦设置好后没有手动修改的话是不会发生变化的包括这里。

故 缩小引发的原理一样。

2.

设备的宽度的 px 和分辨率的关系？

在没有视网膜屏幕出现前 除了些高清屏幕外，大部分的手持设备的宽度与分辨率像素是一对一的关系，直到视网膜屏幕的出现打破了这个格局 出现一个设备宽度对应2个或很多的分辨率像素，引发什么结果？当然是更清晰了，因为用了更多的像素去表达相同的一个设备宽度像素的内容。更多细节探讨可以自行

度娘

更多。

了解了设备宽度与分辨率的关系之后 解释下图片与分辨率的关系，通常图片的像素是与分辨率对应的，故设计师在 ps 上用640分辨率设计图片的时候起始也是对应我们的设备宽度320（前面解释到视网膜屏幕一个设备像素会对应2个到多个分辨率像素），设计出来的图片同理。当然你把设计出来的640分辨率像素的图片放在一样是320宽度像素下的视网膜设备和非视网膜设备下的效果看起来差不多其实仔细看还是有差别的即是否更高清的差别（可以拿安卓和 ios对比）。

弄清楚了viewport 这个小巨人后我们还得知道如何通过 js 代码来获取设备的宽度、viewport 的宽度以及 html 文档的宽度

总结如下（不包括 IE 及其他特殊情况）：

/**1.获取包含滚动条尺寸的浏览器完整内部尺寸*2.获取用户实际的看到的视口大小（即发送缩放后的可视区域大小|visual viewport 大小）默认等于viewport大小*/window.innerHeightwindow.innerWidth /**1.设置的viewport大小*/document.documentElement.clientHeightdocument.documentElement.clientWidth/**1.HTML 文档大小*/document.documentElement.offsetHeightdocument.documentElement.offsetWidth/**1.设备大小*/screen.Heightscreen.width

网上有大量的关于 viewport 的讨论，不乏各种大神的讲解，各有千秋。

以上只为个人多日查阅实践及总结，仅作参考！

多谢！