移动端布局三种视口_移动端开发必备技能，viewport视口概念理解

在理解viewport前，先来了解下移动端设备出现后，传统网站在移动设备上的境况。桌面电脑的分辨率一般很大，传统网站的设计宽度也都比较大，适配PC端很好，通常情况下，我们在浏览器的可视范围内可以完整的看到网页内容的区域。有时候页面可能会比浏览器的视口还大，在这种情况下，浏览器为用户提供滚动条用来滚动并访问所有内容。这些发生在桌面电脑端，一切都是表现良好的。这个时候，我们在移动设备上看看这些为桌面端设计的网站。我们发现页面被缩小了，页面中的内容也被缩小了，甚至缩小到我们的肉眼已经看不清了。

为什么会出现这种情况呢？是因为移动设备中浏览器也是在视口中显示页面，但这个视口被限定了宽度，一般为980像素宽。比如移动设备屏幕宽度是640像素，移动端设备在渲染页面时，以980像素的视口渲染页面，然后缩小页面以适应640像素的空间。这种渲染策略，传统网站在移动设备上的显示注定是不正常的，幸好移动设备提供了平移和缩放功能，用户可以通过在屏幕中手动操作平移和缩放查看页面的不同区域。

上边提到的视口，就是我们需要了解的视口概念。桌面电脑端的视口概念很好理解，就是浏览器的可视范围，浏览器窗口的可视区域即我们肉眼可以直观看的到的区域。使用下面的方法就可以获取(注：不考虑IE8及以下浏览器)：window.innerWidth ，浏览器窗口的内部宽度； window.innerHeight ，浏览器窗口的内部高度。

移动设备端的视口比桌面电脑端的概念稍微复杂些。在上面我们使用移动设备访问传统网站时，页面显示不是很不友好。但并不是说所有的网站都是这样，有一些网站会使用媒体查询针对一些比较窄的屏幕做优化，如果视口宽 980像素，那么在 640像素或 480像素或更小宽度要起作用的媒体查询就不会触发了，浪费了这些响应式设计。所以再一次说明移动端默认的渲染策略是极其不合理的。为了缓解这个问题，Apple在 iOS Safari中引入了“viewport元标记”，让Web开发人员可以控制视口的大小和比例。许多其他移动浏览器现在支持此标记，但它不是任何Web标准的一部分。

这里提到的viewport，就是针对移动端设备的视口概念。移动端设备视口分为三种情形：布局视口(layout viewport)、虚拟视口(visual viewport)、完美视口(ideal viewport)。

1、布局视口(layout viewport)

移动设备上的浏览器首先保证的是能让所有的网站都正常显示，包括那些不是为移动设备设计的网站。上面提到了浏览器的可视区域就是我们肉眼直观看到的部分，如果以浏览器的可视区域作为viewport的话，因为移动设备的屏幕都不是很宽，所以那些为桌面浏览器设计的网站放到移动设备上显示时，必然会因为移动设备的viewport太窄，页面中的内容就会挤成一团，惨不忍睹。所以移动设备不会拿浏览器的可视区域作为viewport，而是在默认情况下给了viewport一个比较宽的值，目的就是为了那些为桌面电脑端设计的网站也能在移动设备上正常显示。这个viewport视口就叫做布局视口，宽度可以通过document.documentElement.clientWidth来获取。

浏览器默认布局视口宽度

2、虚拟视口(visual viewport)

布局视口的宽度是大于浏览器可视区域的宽度的，所以我们还需要一个viewport来代表浏览器可视区域的大小。这个viewport视口就叫做虚拟视口，宽度可以通过window.innerWidth来获取。

3、完美视口(ideal viewport)

上面的两个视口已经满足了开发需求，但浏览器觉得这还不够，因为现在越来越多的网站都会为移动设备进行单独的设计，所以必须还要有一个能完美适配移动设备的viewport。所谓的完美适配是指，页面在任何移动端的屏幕上显示都是正常的，内容不会被挤成一团，用户不需要通过缩放或平移来查看页面的内容，即页面打开就能正常浏览，不需要用户做额外的操作。

这样的一个视口就是移动设备理想的viewport，叫做完美视口。完美视口没有固定的尺寸，不同设备拥有不同的完美视口，也就是说完美视口的理想宽度就是屏幕的宽度，等于虚拟视口的宽度。页面渲染到完美视口就能在虚拟视口中完美显示。

完美视口存在的意义在于，无论在何种分辨率的屏幕下，那些针对完美视口而设计的网站，不需要用户手动缩放，也不需要出现横向滚动条，都可以完美的呈现给用户。

viewport的概念理解对于我们的在移动端的开发起着至关重要的作用，开发必备，必须了解的技能点。看完上面的这些知识，相信你已经对移动端viewport的知识有了一个整体的认知。后面我会继续分享总结一些前端知识，喜欢的小伙伴可以互相关注！