前端 viewport 学习笔记

本文是在阅读关于 viewport 的两篇文章后，对于这些常常忘记和混淆的的知识有了一定的理解，为了方便以后查询和使用，以此文记录。如果你在看完此文后还是一知半解，可以至 http://weizhifeng.net/viewports.html 查看原文。

1 设备像素和 css 像素

设备像素：对于pc来说，设备像素就是屏幕的分辨率，比如1366*768，就是将屏幕横向分为1366个像素，纵向分为768个像素。一般来说，这个参数是固定不变的，但是你可以通过pc的显示设置去调节它，但没有人会去把分辨率调整到让自己不舒适的状态。这个属性可以通过JavaScript的属性得到。css像素：当你对某个 div 块设置并设置背景颜色时，在浏览器中这个颜色的区域宽度就是 100px 的 css 像素。css 像素的大小可以通过浏览器的缩放进行调节的。假设你的浏览器页面缩放为100%，此时一个 css 像素就对应1个设备像素；如果你将页面放大至200%，那么一个css像素就对应4个设备像素，因为宽和高都被拉伸了1倍。通过几张图片应该能够更好的理解它。这是100%缩放时，css 像素和设备像素完全重合缩小页面比例，css 像素变小，一个设备像素覆盖了多个 css 像素：放大页面比例，css 像素变大，一个 css 像素覆盖多个设备像素：

2 属性

2.1 screen.width、screen.height屏幕的分辨率，一般是不变的，度量单位为设备像素。

2.2 window.innerWidth、window.innerHeight浏览器的内部尺寸，包括了滚动条，度量单位为 css 像素。调整浏览器大小会改变值，改变页面的缩放比例也会改变值，因为它是用 css 度量的。

2.3 window.pageXOffset、window.pageYOffset页面横向滚动距离和纵向滚动距离，可以理解为当前视口顶部与页面顶部的距离，度量单位为css像素。当页面上下或者左右滚动时，相应的值会发生变化。

2.4 document.documentElement.clientWidth / Heightviewport 尺寸，用 css 像素度量，不包括滚动条。即页面目前的可视窗口，调整浏览器大小和进行页面缩放会改变它的大小

2.5 document.documentElement.offsetWidth / Height元素的尺寸，用 css 像素度量。是整个页面的大小，如果你对 html 元素设置了固定的 width 和 height，那么调整浏览器大小和进行页面的缩放不会改变它的大小。

3 viewport

首先要明确一点关系，屏幕显示器包含了浏览器，浏览器包含了 viewport，viewport 中包含了元素，并且：

指向 viewport 的大小

指向 html 元素的大小

虽然 viewport 包含了html元素，实际上 html 元素是可以比 viewport 大的（你需要手动设置这个值）。通常开发者都不会去设定 html 元素的大小，那么此时 html 元素的大小时就是 viewport 的大小,你可以打开控制台，输入下面这条语句，结果一定是返回 true。

console.log(document.documentElement.clientWidth===document.documentElement.offsetWidth)

现在你可以打开编辑器，设置 html 的宽度为1000px或者其他，只要不等于 viewport 的宽度就行，再在控制台输入这条语句，结果一定是返回false。

4 事件中的坐标

3.1 pageX、pageY表示相对于元素的以 css 像素度量的事件坐标。3.2 clientX、clientY表示相对于viewport的以 css 像素度量的事件坐标。3.3 screenX、screenY表示相对于屏幕的以设备像素度量的事件坐标，一般是不会用到的。

5 媒体查询

在媒体查询中，width 和 height 查询的是 viewport 的宽高，以 css 像素度量

和` 查询的是屏幕的宽高，是以设备像素作为度量的，这个参数一般是不变的，因此这个参数对于响应式的开发者来说是没有用处的。

6 移动浏览器的viewport

在移动web的开发中，常常可以看到这个标签，要了解这个各个参数的含义，首先要明白两个移动浏览器中的两个viewport，layout viewport和visual viewport。6.1 layout viewport这是 stack overflow上的 George Cummins 解释：把 layout viewport 想像成为一张不会变更大小或者形状的大图。现在想像你有一个小一些的框架，你通过它来看这张大图。（译者：可以理解为「管中窥豹」）这个小框架的周围被不透明的材料所环绕，这掩盖了你所有的视线，只留这张大图的一部分给你。你通过这个框架所能看到的大图的部分就是visual viewport。当你保持框架（缩小）来看整个图片的时候，你可以不用管大图，或者你可以靠近一些（放大）只看局部。你也可以改变框架的方向，但是大图（layout viewport）的大小和形状永远不会变。6.2 visual viewport手机屏幕的大小就是 visual viewport，即手机屏幕能显示的大小。看看Chris给出的解释：visual viewport是页面当前显示在屏幕上的部分。用户可以通过滚动来改变他所看到的页面的部分，或者通过缩放来改变visual viewport的大小。本人的理解是：想象你在高空中俯瞰大地，投入你视野的便是visual viewport，可以通过调整你的高度来调整你的visual viewport大小，高度越低，看到的范围越小（放大），高度越高，看到的范围越大（缩小）；而整个大地，即layout viewport的大小和形状是不会变的。　　假设用css单位来衡量的话，那么layout viewport大小不变，即它的css像素大小不变，在手机屏幕上可以通过缩放来调节visual viewport的大小，当放大时，单位css像素所占的屏幕像素变大，因此整个屏幕的所占有的css像素变少，于是visual viewport变小；同理，当缩小时，visual viewport会变大。两个viewport的关系：通常来说，pc的显示器都远远大于手机，因此能显示的内容更多，可以认为在桌面浏览器中的html元素的大小即是整个layout viewport的大小。而在移动设备上，如果不对页面进行缩小，那么屏幕上只能看到layout viewport的一部分，就像这样

想要看到更多的layout viewport，那么就只能进行缩小。当layout viewport完全缩小在手机屏幕中时，此时两个viewport的大小时相等的。

6.3 度量layout viewport同桌面浏览器一样，可以用，这个属性指向了layout viewport的尺寸6.4 度量visual viewport可以用来度量visual viewport的尺寸，当用户缩小或者放大的时候，度量的尺寸会发生变化，因为屏幕上的CSS像素会增加或者减少。这和上面关于css的关于visual viewport的假设一致。6.5 媒体查询width和height使用layout viewport作为参照物，device-width和device-height仍然以设备像素作为参照，换句话说，width和height以为参照device-width和device-height以为参照6.6 meta标签

现在可以对meta标签来进行解释了

width=device-width：表示layout viewport大小为设备像素大小

initial-scale=1.0：表示初始缩放为1

minimum-scale=1.0：表示最小缩放为1

maximum-scale=1.0：表示最大缩放为1

user-scalable=no：表示不允许用户缩放

对于不同的手机浏览器，其规定的 layout viewport 大小不一，Safari iPhone 为980px，Opera为850px，Android WebKit 为 800px，最后 IE 为 974px。可以通过来重置其大小。假设你在一台iPad设备（设备像素为768*1024）上运行如下标签：

那么其layout viewport即为768，就算缩放也不会改变大小；而其visual viewport :则会随着缩放而改变大小。因此，当设置layout viewport为设备像素大小且禁止缩放时，就能使两个 viewport 的大小相等，从而使设置了媒体查询样式的页面适应手机屏幕。本文由零熊技术团队前端开发 Nate 同学投稿。