meta 和 viewport

meta viewport 是做什么用的？

将视口大小设置为可视区域的大小。

什么是视口

视口简单理解就是可视区域大小。

在PC端，视口大小就是浏览器窗口可视区域的大小

在移动端, 视口大小并不等于窗口大小, 移动端视口宽度被人为定义为了980

为什么移动端视口宽度是980而不是其他的值

因为过去网页的版心都是980的，为了能够让网页在移动端完美的展示, 所以将手机视口的大小定义为了980。

移动端自动将视口宽度设置为980带来的问题

虽然移动端自动将视口宽度设置为980之后让我们可以很完美的看到整个网页，但是由于移动端的物理尺寸(设备宽度)是远远小于视口宽度的，所以为了能够在较小的范围内看到视口中所有的内容, 那么就必须将内容缩小。

但是缩小后用户看到的是一个缩小版的整个页面，字体、图标和内容等等都非常小，想要点击或者查看都需要去放大页面进行操作，放大页面之后就会出现横向滚动条，这对用户体验来说是非常不好的。

如何保证在移动端不自动缩放网页的尺寸

通过meta设置视口大小

viewport 是指 web 页面上用户的可视区域。

meta标签的属性:

width=device-width 设置视口宽度等于设备的宽度
initial-scale=1.0 初始缩放比例, 1不缩放
maximum-scale：允许用户缩放到的最大比例
minimum-scale：允许用户缩放到的最小比例
user-scalable：用户是否可以手动缩放