前言
上一章说到了移动Web开发的一些基础知识，不记得的同学可以返回我上一篇文章再看看
概述
现在我们来说一下视口(viewport)，视口就是浏览器显示页面内容的区域，可以看成是浏览器的窗口。
视口可以区分为三种
- 布局视口(layout viewport)
- 视觉视口(visual viewport)
- 理想视口(ideal viewport)
接下来就挨个说一下它们的区别
布局视口(layout viewport)
一般移动设备的浏览器都会默认设置一个布局视口，主要用于早期的PC端页面在手机浏览器上显示的问题。iOS和Android设备基本上都将这个视口的分辨率设置为980px，所以PC端的网页大多都能在手机上呈现，只不过看上去元素相比较PC端而言很小。一般默认可以手动进行网页的缩放。
视觉视口(visual viewport)
它是用户正在看到的网站区域，通常可以通过缩放操作视觉视口，但是不会影响到布局视口，布局视口仍然保持原来的尺寸。
理想视口(ideal viewport)
理想视口是指为了使网站在移动端有最理想的浏览和阅读宽度，对设备来讲，是最理想的视口尺寸。
我们需要通过标签，手动添加并通知浏览器操作。
标签的主要目的：**布局视口的宽度应该与理想视口的宽度一致。**简单的理解就是设备有多宽，布局视口就有多宽。
看一下具体的标签设置
<meta name=“viewport” content=“width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
这里说一下各个属性值的含义
- width：宽度设置的是viewport宽度，可以设置为device-width特殊值，含义是“宽度等于设备的宽度”
- initial-scale：初始缩放比，大于0的数字。一般设置为1.0，也就是不缩放
- maximum-scale：最大缩放比，大于0的数字
- minimum-scale：最小缩放比，大于0的数字
- user-scalable：用户是否可以进行缩放，yes或no
而标准的viewport参数设置遵循以下：
- 视口宽度与设备宽度保持一致
- 视口的默认比例为1.0
- 不允许用户进行缩放
- 最大缩放比1.0
- 最小缩放比1.0
以上就是视口的相关内容
