viewport 中文直译为视窗，是浏览器端开发工作中会接触到的概念。对于桌面端浏览器来说，viewport 指的是当前浏览器的可视内容范围，用户可以通过拖拽浏览器的边框来改变视窗的大小。在这个过程中，如果页面有自适应设计，那么页面布局也会随着视窗宽高的变化而作出相应，排列成更适合当前视窗的布局。可以通过window.innerWidth / innerHeight来查看当前 viewport 大小。而在移动端，因为浏览器尺寸是固定的，viewport 的概念和桌面端又存在不同之处。下面是几个应用案例。
自适应宽度布局
在桌面端，可以通过 media query 查询当前视窗尺寸实现自适应设计。比如对于 grid 栅栏布局，可以根据窗口宽度的不同，展示不同的布局。当窗口窄的时候，显示若干列，而当窗口更宽的时候展示更多的列。也就是指定这样的 CSS
@media (max-width: xxpx)
layout within this width
这里的宽度查询的就是视窗的宽度，对不同的当前窗口作出相应。
元素跟随鼠标移动位置
如果我们想要实现一个DOM 元素跟随光标（cursor）移动的效果，也会用到viewport。要实现这个效果我们需要做两件事，首先实时获取当前光标的位置，其次把需要把跟随移动的元素放置到相应位置。
光标位置可以通过添加鼠标移动事件（event listener）来获取，对于这个事件（event），我们可以取 clinentX/clientY，这个值指的是相对于当前窗口的定位。接下来放置跟随元素的时候，可以通过 css 属性 position fixed 来定位，fixed 的位置也是对于视窗的位置，这样配合起来就可以实现这个鼠标跟随的效果了。
移动端适应
在智能手机刚兴起的时候，大部分页面并没有适配移动端设备。如果用移动端设备直接浏览为桌面端设计的页面，虽然整个页面都渲染出来了，但是为了看清楚内容，每次只能看到页面的一部分，然后拖拽移动当前窗口来浏览其他内容。
渲染出的整个页面叫做 layout viewport，当前设备能看到的这个小窗口叫做 visual viewport。一般认为在移动端设备上，频繁通过左右滑动来浏览内容的体验很馋，而上下滑动是可以接受的。于是产生了限制视窗宽度等于设备宽度的方案，这样就不用左右滑动了。通过这一行可以指定这个效果：
<meta name="viewport" content="width = device-width, initial-scale = 1> "
同时这个设置也有一个副作用。在没有设置窗口宽度的时候，连点（double tap）的第一次点击并不会立即生效，因为需要判断时候还有连续第二次点击，和一次点击 click／touch 区别。设置了宽度限制之后，因为不存在 double tap to zoom，所以在第一次点击的时候，就可以判断当前用户的操作是 click 而不是想要放大页面。
