视口的简介
视口就是浏览器显示页面内容的屏幕区域
- 下方作为一个定义完整视口标签属性的方式，适配用户设备宽度，并禁止用户缩放
HTML
<meta name="viewport" content="width=device-width,
initial-scale=1.0,maximun-scale=1.0,minimun-scale=1.0">标准的 viewport 设置
- 视口宽度和设备保持一致
- 视口默认缩放比例1.0
- 不允许用户自行缩放
- 最大允许的缩放比例1.0
- 最小允许的缩放比例1.0
meta标签的属性定义了与文档相关联的名称/值对
定义和用法
<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
<meta> 标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对
| 属性 | 解释说明 |
|---|---|
| width | 宽度设置的是viewport宽度,可以设置device-width特殊值 （device-width 理想视口：文档的宽度=设备的宽度） |
| initial-scale | 初始化缩放比，大于0的数字 |
| maximum-scale | 最大缩放比，大于0的数字 |
| minimum-scale | 最小缩放比，大于0的数字 |
| user-scalable | 规定了页面是否允许用户缩放 user-scalable=no (不允许,值为0同样实现效果) |
// <meta> 标签在移动端开发时常会用到。目的是为了让用户不允许缩放界面和显示视觉上舒适的的界面尺寸
物理像素比
物理像素&物理像素比
物理像素指的是手机实际的像素块数量，物理像素比指的是针对物理像素的比例
- PC端和早期的手机屏幕/普通手机屏幕 1CSS像素 = 1物理像素
- Retina(视网膜屏幕)是一种显示技术，可以将更多的物理像素点压缩至一块屏幕，
从而达到更高的分辨率，并提高屏幕显示的细腻程度
多倍图
- 对于一张 50px*50px 的图片，在手机 Retina屏中打开，按照刚才的物理像素比会放大倍数，这样会造成图片模糊
- 在标注拿到 viewport 设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题
- 通常使用二倍图，因为 iPhone6/7/8..等影响，还存在3倍图4倍图的情况，这个看实际的开发公司需求
- 背景图片 注意缩放问题