深入浅出viewport(一)

来源：互联网发布：鸟哥的linux私房菜chm 编辑：程序博客网时间：2024/05/21 17:43

viewport对于移动浏览器上的网页展示比较重要，那么我们为什么需要设置viewport呢？viewport到底是个什么东东？让我们一起来抽丝剥茧，一点点的揭露它的真相。这里是翻译的文章，没有逐字翻译。

什么是viewport?

viewport的作用是限制页面顶级的包含元素<html>，这听起来可能有点模糊不清。举个例子，假设你有一个流体布局，你的侧边栏宽10%。这个侧边栏会随着浏览器窗口大小的变化增大或缩小。一般来说，所有块级元素会占据他们父元素100%的宽度（我们暂时忽略那些例外的情况）。因此这个侧边栏的父母body的宽度和html元素一致， 10%会占据整个浏览器窗口的10%。所有web开发者直觉上都知道和在使用这个事实。

但你可能不太清楚这背后的原理。实际上，<html>元素的宽度是由viewport限制的，<html>元素占据viewport的100%宽度而viewport事实上又等于浏览器窗口的大小（它就是这样子定义的）。视口不是一个html概念，因此你别想用CSS来影响它。在桌面浏览器上，它就等于浏览器的宽高。在移动浏览器上，事情就变的复杂了。

影响

这种状况产生了一些有意思的结果。你可以在本站上看见他们。请一直滚动到页面顶部，然后放大直到站点的内容超出了浏览器窗口。现在滚到右边，你就会看到顶部的蓝色条不再排列整齐的。

这种行为是viewport带来的结果。我设置顶部的蓝色条宽度是100%。<html>和viewport一样宽，而viewport等于浏览器窗口大小。关键在于，缩放100%的时候这工作的很好，但当我们放大的时候，viewport变得比网页内容宽度更小。这本身没有什么关系，内容会超出<html>元素。html元素的overflow属性是visible，意味着溢出的内容在这种情况下会显示出来。但是蓝色条没有溢出，因为我设置它的宽度是100%。浏览器会设置它的宽度是viewport的宽度，它们才不会关心这个宽度是不是太窄了。