设备像素和CSS像素——web端

寒水寺一禅
English

设备像素 给出了您正在使用的任何设备的屏幕分辨率,可以通过 screen.width/height 获取。
但并不是不可更改的。比如可以通过 鼠标右键"显示设置"——"缩放与布局"改变。如果缩放100%是19201080,那么缩放150%就是1280720

css像素 就是你给某一个dom元素在css中设置的像素值,比如 width:100px; line-height:20px;

在js中,通过window.devicePixelRatio 来获取 占用物理像素分辨率与本身CSS像素分辨率之比。

正常情况下(网页没有缩放,或者缩放为100%),一个css像素会占用一个设备像素。
但是如果你缩放网页(ctrl+滚轮)到200%。那么css像素也会同等缩放200%,会占用设备像素2倍的宽度,2倍的高度。整体面积也就是4倍。

网页没有任何缩放时,1px CSS像素等于1px设备像素

网页开始缩小,一个设备像素(深色部分)与好几个css像素重叠(浅色部分)

网页开始放大,刚好相反,一个css像素与好几个设备像素重叠

在这里注意一点,我们的关注点,始终是css像素,因为它才是与我们html中style部分息息相关的。
这里缩小和放大时。我们的css像素大小始终没变(原来style中是多少,现在还是多少)。只是布局被浏览器自动拉伸或挤压了。

屏幕大小
我们的屏幕通常是这样的

screen的大小就是电脑显示器屏幕的大小

在js中可以通过

screen.width
screen.height

访问得到。 由设备像素测量得到。

窗口大小
就是浏览器中除过标题栏,工具栏,收藏夹等等部分,最后留给网页展示的可用空间(包括滚动条的大小)。

在js中可以通过

window.innerWidth
window.innerHeight

访问得到。由css像素测量测到,放大缩小网页,会改变其值。

那有人会问,如果包含浏览器标题栏,工具栏,收藏夹时。高度怎么获取。别急,是下面

window.outerWidth
window.outerHeight

由于window.innerWidth是通过css像素来测量的。当浏览器放大是,window.innerWidth / window.innerHeight减少,表现出来的是窗口中可以放置的内容变少。即1px css像素拉伸变大
当浏览器缩小是,window.innerWidth / window.innerHeight会增大,表现出来的是窗口中可以放置的内容变多。即1px css像素压缩减少。

而window.outerWidth确是由设备像素测量得到,放大缩小网页,对其值没有任何影响。所以window.innerWidth和window.outerWidth差一个单词,但内部处理却差了十万八千里。

滚动偏移量
表示滚动条距离初始位置的距离。

水平和垂直偏移量分别可以通过以下js获取,由css像素测量得到

window.pageXOffset 
window.pageYOffset

如果放大或者缩小浏览器,则滚动偏移量也会变化

视口大小
指html元素的大小,不包含滚动条。比window.innerWidth / window.innerHeight少个滚动条的大小。与网页里面内容的大小无关。通过下面获取

document.documentElement.clientWidth   //document.documentElement指向 html元素
document.documentElement.clientHeight

也是由css像素测量得到

如果还想获取包含被滚动条隐藏掉的那一部分页面大小。则可以使用下面

document.documentElement.scrollWidth
document.documentElement.scrollHeight

由css像素测量得到

本文参考A tale of two viewports — part one

阅读 597

小李子的前端
热爱前端的菜鸟,怀揣梦想的小白

人生短短急个球!

2k 声望
64 粉丝
0 条评论
你知道吗?

人生短短急个球!

2k 声望
64 粉丝
宣传栏