设备分辨率和px的关系？

Question

我的电脑是15寸的，看了下分辨率是2560 X 1440，这也是系统推荐设置的分辨率。但是比如我用chrome打开网页，console打印screen.width,输出1280， 这个1280代表什么？还有2560 X 1440这是以px为单位的？谁能帮忙详细解释一下，搜了好久的资料，什么ppi，px，dpi，设备像素之类感觉看完之后还是云里雾里的。。。

Answer 1

screen.width 是浏览器宽度、如果没有确定浏览器是全屏最大化的话、是无法确定他代表的是你的屏幕宽度的、web浏览通常都是PX为单位，移动端单位不同

Answer 2

var w = screen.width; // 屏幕宽度
var h = screen.height; // 屏幕高度

var ratio = window.devicePixelRatio || 1;
var w = screen.width * ratio; // 屏幕分辨率之宽度
var h = screen.height * ratio; // 屏幕分辨率之高度

你的设备像素比是2，属于高清屏。

Answer 3

在浏览器里，通过js代码获取到的都属于css像素，题主看到的电脑参数里提到的分辨率属于设备像素。这两个数值是不同的，它们之间存在特定的转换关系（比如题主的例子里，相当于1 css像素 = 2 设备像素）。

有关px、ppi、dpi的详细解释会比较长，可以看下以前写过的这篇像素与浏览器视口的细节。