这个视频我们去手工的配置一下 viewport ... 这是一个简单的页面，上面只有一张图片，还有一点文字 ... 图片的宽度是 300px ...
页面的整体的宽度就是这个 .container 类上设置的 980px ...
我们使用 iOS 模拟器打开了这个页面 ... 页面的内容会使用默认的 viewport 设置 .... 适当地显示在屏幕上 ...
手工配置
下面我们可以手工去配置一下 viewport ...
在页面的 <head> 标签上 .... 添加一个 <meta> 标签 .... 在里面加上一个 name 属性 ... 属性的值设置为 viewport ...
然后可以再添加一个 content 属性 .... 这个属性的值，可以是 viewport 的相关的设置 ....
initial-scale
我们先来看一下 initial-scale ... 它可以控制 viewport 的初始的缩放级别 .... 等号后面，输入想要使用的缩放级别 ... 这里我们设置成 1.0 ...
回到模拟器上看一下 ....
现在，你会发现页面的显示有一些变化了 ... 内容不会再缩小显示 .... 因为我们把初始的缩放级别设置成了 1 倍 ...
设备会自动去计算 viewport 的宽度 ... 在设备垂直方向的时候 ... viewport 的宽度会是设备的宽度 ... 也就是 320px ....
而在水平方向的时候 ... viewport 的宽度会变成设备的高度 .... 是 480px ....
width
下面我们再去试一下可视窗口的宽度 ... 可以使用 width 去设置 ...
默认这个 width 的值是 980像素 .... 对于那些在这个范围以内页面，这个可视窗口的宽度还是比较合适的 ... 不过如果你的页面很窄，这个默认的宽度就不合适了 ...
比如我们可以页面的宽度设置成 320 像素 ... 修改一下这个 container 类上面定义的 width 的值 ....
回到模拟器 ... 刷新一下 ... 你会看到，页面会出现很大的空白 ...
下面我们可以去重新定义一下可视窗口的宽度 ... 使用 width .... 等号 .... 后面加上要设置的宽度值 .... 320
回到模拟器 ... 刷新 ...
现在页面的显示就比较合适了 .... 这里要注意的是 .... 虽然我们只设置了这个可视窗口的宽度 .... 但是我们的设备会去自动计算一些其它的值 ...
比如初始状态的缩放级别 .... 现在，应该会被自动设置为 1 倍 ... 这个缩放的倍数在其它的设备上可能会有变化 ....
所以，一般来说，我们不直接设置一个固定的宽度 ... 而是根据设备的宽度去动态的设置 .... 可以把 width 设置为 device-width ...
修改一下 ...
同时，我们还会把初始的缩放级别，也就是那个缩放的倍数设置成 1 ...
多个属性之间，可以使用逗号分隔开 ...
initial-scale=1.0
其它
另外，viewport 还有一些属性 ... 比如，你不想让用户可以缩放你的页面，我们可以把 user-scalable 设置成 no ....
你也可以使用 maximum-scale 还有 minimum-scale ，去设置允许的最大缩放的倍数，还有最小缩放的倍数 ...
不过一般，我们只需要使用这个 width ... 把它设置成动态的宽度 device-width .... 还有 initial-scale ... 页面初始的缩放级别... 把它设置成 1.0 。
