开发者学堂课程【移动 Web 前端开发：准备-viewport-定义】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/594/detail/8396
准备-viewport-定义
内容介绍
一、发现问题
二、视觉窗口（视口） viewportk
三、举例说明
一、发现问题
/*1. 百分比布局 百分比自适应布局*/
/*2. 流式布局 非固定像素布局，内容自适应，像液体一样向两侧填充，这样网页布局称 流式布局*/
Width:100%
Height:1200px
Background:red
Margin: 0 auto
流式布局可以根据网页宽度达到内容的自适应，此时如果将网页放到移动端观察：
按下F12，进入移动端浏览发现没有用，可以看到现在网页默认宽度是 980px ，网页并没有设置宽度，移动设备上面也没有说宽度是980，那么此时来探究以下980是从哪里来的。
在 pc 端浏览网页时，宽度是和浏览器一致的，在移动端浏览设备宽度为320，那么浏览器宽度也应该是320，网页和浏览器一样宽，但现在并没有。说明现在的网页并不是基于浏览器的宽度。
二、视觉窗口（视口） viewportk
1.问题：
（1）当把一个百分百的页面在移动设备浏览的时候网页的宽度没有和设备的宽度一致
（2）移动设备的网页是基于? ? ?来计算宽度的
原因是在移动设备当中 浏览器和网页之间还有一层虚拟的容器这个容器叫 viewport
2.解决：
Viewport 只在移动设备才有，虚拟的容器用来承载网页的，现在 viewport 宽度默认是980px，说明现在有一个980px的容器在承载网页，网页又是100%的宽度基于 viewport 来设置宽度的。
而且主流的设备当中的 viewport 宽度默认是 980px,可以缩放，可以设置尺寸，是否运行用户自行缩放。
说明 viewport 具备了放大缩小的功能。
三、举例说明
有一个相框和一张照片，相框相当于浏览器窗口，此时把相片放在浏览器窗口里里但是放不下，照片可以分为两层：
1.图像
2.相片纸。
如果相片纸变的和浏览器窗口一样大，图像再冲洗在相片纸上，相当于照片整体随着相片纸进行了缩放。
比如浏览器现在是在屏幕区里，但是网页很大，这时候屏幕区不仅仅承载了一个网页，还有 Viewport。
Viewport 默认宽度为980px，里面还有一些文字为网页内容，这时候有两层：
一层为 Viewport
一层为网页内容
做一个真实的相框必须得有相片和相框，相片最终是由图像冲洗在相片尺上呈现的。
如果冲洗了一张非常大的相片在相框里就放不下了，但如果相片尺变得和浏览器一样大，图像再次冲洗在相框纸上面，整体图片随着相框尺进行了缩放，相框尺可以裁剪成和页面一样大，那么相片就完全承载进去了。
比如一个手机，浏览器应该在屏幕区里，网页很大，这时候手机屏幕并不是直接承载的网页，而是还承载了一个 Viewport，默认宽度是980px，里面有些文字，网页内容也是980px，因为是设置100%。所以这时候有两层，Viewport才是真正承载在浏览器上的。
但是现在 Viewport 承载了一些网页，网页宽度和 Viewport 一样宽，看到的结果是被缩放的，因为 Viewport 具备缩放功能。
如果没有缩放功能，那么只能看到网页的一点点，需要借助滚动条。
所以将它们放在屏幕区上，看到的结果是被缩放的，因为 Viewport 有自适应缩放功能，如果没有 Viewport 那么只能看到一点点内容，需要拖动浏览。
既然有缩放功能，那么也有放大功能，当 Viewport 缩放比为1.0的时候说明它的大小和 pc 端一致。这时候浏览所有内容就需要拖动滚动条了。
不管缩放多少， Viewport 的宽度还是980px，因为只改变了 scale 没有改变尺寸。
