像素
Opened this issue · 0 comments
OPY-bbt commented
设备像素（device pixel）是固定不变的
css像素，受屏幕缩放和设备像素比影响
device pixel radio（window.devicePixelRatio） 是代表着一个css像素对应着几个设备像素 例如dpr = 2,则1个css像素由4个设备像素组成
- 注意zoom会改变window.devicePixelRatio的值，例如zoom为200%；则window.devicePixelRatio会翻倍。这里也很好理解视觉变大了，需要更多的设备像素来代表css像素点
window.innerWidth 与 window.outerWidth。outerWidth是代表了整个浏览器的宽度包括了标签栏，innerWidth则代表了网页内容展示区的尺寸，如果打开了dev tool，这部分将不会在innerWidth中。
移动端的viewport
layout viewport
layout viewport默认大小980px，可以通过meta标签改变 document.documentElement.clientWidth获得
visual viewport
可以通过 window.innerWidth获得
- 有意思的是在safari中，zoom的改变可以导致其值发生变化，但是在chrome中不能。chrome中值始终等于viewport的宽度