web前端知识学习笔记-HTML篇(2)

移动端的适配离不开meta标签的viewport设置，比较常见的设置

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

属性：

1. width表示将document内容宽度设为width制定的数值，可填具体数值，如640，或device-width（表示device indepent pixel,简称DIP）
2. intial-scale, minimum-scale, maximum-scale，表示将可视窗口或者简单理解window.innerWidth，设为DIP / scale，例如当width设为640，而intial-scale设为2.0，那么window.innerWidth === 320，那么窗口内只能看到所有内容的一半。

3. 关于刘海屏的适配，最开始由ios提出增加一个叫做viewport-fit的属性，一般可用contain 和 cover两个值，
   具体效果可以看下面的示意图:

   1. contain

   

   2. cover

   

   图片来源