像素 - Githubissues

OPY-bbt / OPY-bbt.github.io

my webpage

https://opy-bbt.github.io/

0 stars 0 forks source link

像素 #3

Open OPY-bbt opened 5 years ago

OPY-bbt commented 5 years ago

设备像素（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的宽度