移动端常识
2020-04-09 本文已影响0人
LOVE小狼
一. 常识单位
1. 物理像素：
显示设备上物理硬件上的一个最小的范围单位
2. 设备独立像素
所谓独立是指该像素的值不会因设备的改变而改变，它是一个人为定义的单位，用户设定像素数字大小时就是这个单位(例如css单位)
3. 设备像素比dpr
设备像素比 = 物理像素 / 设备独立像素
一开始没有retina屏，物理像素和设备独立像素的概念没有突出出来，随着苹果推出retina后两者的概念才被人们所意识到，进而引出来dpr这个概念
4. css像素
设备独立像素的子类，用在网页上
5. 图片尺寸是物理像素还是独立像素
！！！！物理像素！！！！
问题
1. 为什么dpr为1设备上的图片放在dpr大于1的设备上会模糊
比如说我们要在页面上显示200x200的图片，然后拿到了一张200x200的图片，因为redina屏上一个独立像素需要四个物理像素，而独立像素200x200实际上需要400x400的物理像素，而拿到的图片实际上物理像素是200x200的，这样就导致屏幕上一个独立像素只有一个物理像素，和周边一个独立像素有四个物理像素的区域相比就显得模糊
二. viewport
pc端：
- 浏览器大小：document.documentElement.clientWidth
- 可见视口大小：window.innerWidth
移动端：
- ideal viewport： viewport中的device-width，也可以用document.documentElement.getBoundingClientRect().width;
- layout viewport：document.documentElement.clientWidth .
- visual viewport：window.innerWidth
- 布局视口大小：ios980px，android800px
- 每次进入手机页面时虚拟视口自动缩放为布局视口
visual viewport = ideal viewport / scale
参考
