开发者学堂课程【移动 Web 前端开发：准备 -viewport- 标准化设置】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/594/detail/8398
准备-viewport-标准化设置
内容介绍
一、标准化设置
二、总结
一、标准化设置
1.Width 设置视口的宽度
单位默认是 px 但是有一个特殊的值 device-width 代表当前设备的宽度
initial -scale：设置视口的默认的縮放比
大于0小于1 缩小 大于1放大
user-scalable：设置视口是否允许用户自行缩放
0 代表否 1代表可以 no yes
minimum-scale 最小允许缩放比
maximum-scale 最大允许缩放比
2.参数用法：
先把网页内容和样式复制进来。
设置宽度和缩放比：
当前浏览器设备宽度是 320，意思是 viewport 宽度为320，网页是百分比。
这时候网页和浏览器发生一致，当前设备网页宽度为320，所以只需要把 Width 设置为320 默认是px：
”/ >
当前网页宽度和浏览器宽度一样时，缩放比默认变为了1.0
这样网页内容没有滚动条和浏览器保持一致了，缩放比也和 pc 端保持一致了。
切换设备刷新发现变大了，因为缩放比变了没有达到适配要求，网页变大了，html 还是320
Html 是根据 viewport 宽度设置的所以没有达到适配。
如果更换设备只需要让 viewport 宽度和浏览器宽度保持一致就能达到适配。
设置 viewport 中的 width 和设备一样，就能达到适配了。
这里有一个特殊的值：
device-width 代表当前设备的宽度
所以在设置 width 时设置为
width=device-width
就可以每种设备都能达到适配。
3.设置视口默认缩放比：
当没有设置默认缩放比时，缩放比与 viewport 本身有关系，所以写入：
name=" viewport" content="initial-scale=1.0"/>
默认缩放比为1.0与 pc 端保持一致，宽度与浏览器保持一致，达到适配要求。
这时缩放比也是1.0，并且没有滚动条。
切换到其他设备刷新也没有问题。
4.设置视口不允许运行用户自行缩放：
写入：
=0"/>
这时候放大缩小比例没有反应。
当设置完视口不允许运行用户自行缩放，最大最小允许缩放比就没有意义了。
接下来把三个函数组合在一起：
"viewport" contenta"width=device -width, initial-
scale=1.O,user-scalable=0"/>
这里还有快捷方式：
mtea：vp+tab 键
直接把常用的属性写出来，但最好还是手写，加深印象。
这时候网页就变成了标准化适配移动端页面。
使用 viewport 和流式布局达到移动端的适配
二、总结
====标准化适配要求:=====
1.网页的宽度和浏览器一致 网页的宽度和视口宽度一样然后视口的宽度和浏览的一样（和设备的一样)
设置 width 和设备一样﹑这里有一个特殊的值 width=device-width
缩放比例和 pc 一样 initial-scale=1.0
2.保证网页内容的缩放比和PC端保持一样视口的缩放比是1.0
设置 width 和设备一样这里有一个特殊的值 idth=device-width
缩放比例和 pc 一样 initial-scale=1.0
3.不允许用户自行缩放视口禁止缩放
user-scalable
