当你使用移动设备浏览网页时，你会发现有些网页在手机上显示十分正常，但有些网页却十分不适配，显示错位或者错位问题更严重和分辨率过高。这是为什么？实际上，这与网页的viewport有着重要的关系。那什么是viewport呢？viewport是什么，他的大小和参数又有什么关系呢？下面让我们一起来探讨一下。

1.什么是viewport？

Viewport是视口的意思，它是指的就是你所能看到的网页展示的区域。在桌面端，viewport指的是浏览器可视窗口的宽度。而在移动端，viewport是一个虚拟的浏览器窗口，使网页可以适用于不同的移动设备，viewport可以控制视口的大小，宽度、高度、缩放比例等等。

在移动设备上，viewport“屏幕宽度”与移动设备屏幕宽度是不同的，因为桌面端的网页是以px为单位来设计的的，但移动端采用的是以设备宽度为基准的弹性布局，也就是点击移动端网页的全屏，看到的就是viewport，类似于一个缩放视图。

2.为什么要用viewport？

如前所述，在不同的移动端设备上，浏览器的大小是不一样的，而viewport可以给设计人员一个方式，让他们可以控制浏览器窗口的大小，以实现网页的布局、排版等等。而且viewport还能够空出空白区域来，保持网页不被拖动或缩小，从而可以实现优秀的用户体验。

3.viewport有哪些参数？

viewport具有很多参数，下面以移动设备为例，介绍其中三个重要的参数。

①width

表示viewport的宽度属性，单位为px，一般情况下设计人员会将它设置为设备的宽度，如果你将这个值设置为固定值，那么网页将不能够适应不同的设备。

在标签中设置viewport的宽度属性，代码如下：

在上面的代码中，width=device-width设置了viewport的宽度，可以自动将viewport的宽度设置为设备的宽度，从而适应不同的设备。

②initial-scale

表示初始缩放比例的属性，这个属性的默认值是1.0，如果你把initial-scale设置为1.0，你将以原始比例来浏览网页，因为每个设备的屏幕、分辨率都不一样，所以有些网页就会被放大或者缩小，借助initial-scale设置viewport的大小，可以让浏览器放大网页。

在标签中，可以设置viewport的缩放大小，具体代码如下：

③user-scalable

表示用户能否缩放网页的属性，在某些情况下，为了保证用户体验的质量，我们有必要禁止用户缩放。在某些时候，像图片、排版错误之类的问题通常不能用缩放来解决，此时禁止用户缩放是一个比较好的方案。当user-scalable的值为no时，意味着用户不能缩放网页。

总结：

移动端自适应， viewport是一个非常重要的参数。在布局时我们要设置好viewport的相关参数，通过这些参数来适应不同设备，从而获得更好的用户体验。_viewport最重要的三个参数，width、initial-scale和user-scalable，通过调整这些参数，可以让网页呈现不同的效果，所以每个设计人员都应该了解viewport的相关知识。