前端基础之 viewport

是什么

viewport 指的是网页上的用户可视区域。移动设备上的可视区域相较于 pc 要小得多。这样一来，在 pc 屏幕上可以正常显示的网页，在移动设备上就必须缩小后才能放得下。这就造成了下面这个问题。

如何设置

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-width 设置可视区域宽度为设备屏幕宽度
initial-scale=1.0 设置首次载入时的缩放比例为 1:1

加上后的效果

Tips

对于移动端用户来说，水平方向的滚动条是非常不好的体验，所以，要尽量阻止水平滚动条的产生。而设置 viewport 并不能完全做到这一点。为什么呢？因为 viewport只是设置页面宽度为屏幕宽度，但是对于宽度非常大的元素，比如一个设置了宽度的图片，就无能为力。

下面是一些经验，可以避免上面的问题。

• 不要使用固定的大宽度的元素
• 不要基于特定的 viewport 布局
• 善用媒体查询

参考

*Responsive Web Design - The Viewport