移动端常识

一. 常识单位

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

参考

viewport：https://segmentfault.com/a/1190000004403496