px: 缩放因子和分辨率

sycamore1115
1,307 阅读6分钟

以下内容仅供参考，作者并不能保证正确性。。。

缩放因子

先让我们以电脑为例，看看我们电脑现在的缩放因子是多少，我们可以在电脑的设置中找到： image.png 这个选项其实就是缩放因子的值，我们可以通过 window.devicePixelRatio 在控制台获取它的值： image.png 尝试去改变它， window.devicePixelRatio 的值也会随之改变。让我们先把这个设置调回 100% ，再接下去看下面的内容。

分辨率

屏幕尺寸

屏幕尺寸就是你的设备的物理大小，当前我这个电脑的物理尺寸就是15.6英寸（这个尺寸表示的是电脑对角线的物理长度）。

设备像素

我们平常在电脑手机上看到的图像都是一个一个的点拼成的，这个点我们就称为像素点，像素是一个抽象的单位，不同设备的像素点表示的大小是不同的。就拿我现在使用的电脑为例，横向上显示了1920个像素点，纵向上显示了1080个像素点，这里的像素我们先称为 设备像素： image.png 我们可以通过 screen.width 获取屏幕宽度，screen.height 获取屏幕高度： image.png 这里获取得到的宽高，在我们写代码的时候，单位都会默认是 px 值，为了区分，我们称之为 开发像素。虽然在这里，他们的值看起来是一致的，但实际上不是，所以我们用名称加以区分，更好理解。

分辨率计算

这里显示的 1920 * 1080 并不能表示分辨率，分辨率也叫做ppi(pixels per inch)，就是每英寸所包含的像素数目。ppi的计算公式是：

const width = 1920
const height = 1080
// 长宽像素点的平方相加再开根号，也就是对角线上的像素点个数，再除以对角线的物理尺寸
const ppi = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2)) / 15.6

得出我目前这个电脑的分辨率大约在141.21左右。

作为测试，接下来的操作都是在我的电脑上进行的，所以可以保证电脑的物理尺寸不变，改变的只是设备像素和缩放因子，所以我们接下来不再考虑分辨率，只谈设备像素。

改变设备像素

尝试一下，去改变这个设备像素 image.png image.png 我们发现通过 js 获取的屏幕宽度和高度一起改变了，所以我们开发时设置的开发像素和设备像素有关。

改变缩放因子

以上，我们都是在缩放因子为 100% 的基础上看的，现在尝试一下，去改变这个缩放因子 image.png image.png 这下好了，通过 js 获取的屏幕宽度和高度也改变了，所以我们开发时设置的开发像素和缩放因子也有关。

关于 px 的猜想

总结一下，我们开发时使用的这个 px 值也就是开发像素不仅和设备的设备像素相关，也和缩放因子相关。

1个开发像素 = 1个设备像素 * 缩放因子

缩放因子表示在一个开发像素中可以放几个设备像素。当我们的缩放因子是 1.25 时，表示我们开始所写的 1 个开发像素等于 1.25 个设备像素的大小。

我们在开发时获取的屏幕宽度为 1920 / 1.25 = 1536 个开发像素，屏幕高度为 1080 / 1.25 = 864 个开发像素，结果挺正确的，可能在实际计算的时候并不是按照这个公式来的，但是这可以让我们大致了解其中的关系。

  1. 当分辨率是 1920 * 1080 ， 缩放因子是 100% 时： image.png
  2. 当分辨率是 1920 * 1080 ， 缩放因子是 125% 时： image.png 我们可以看到同样是 vue 官网的页面，当缩放因子为 1 的时候，会显得字体太小，而且留白太多了。这是因为当我们进行开发的时候，我们都是根据设计师的设计稿进行 px 也就是开发像素设置的。我们的字体设置为 16px ，虽然开发像素一样，但是缩放因子越大，占据的设备像素就越多，那么在电脑物理尺寸相同的情况下，肉眼看起来自然会显得更大一些。

ui设计

问了一下 ui 设计师，他说他设计的时候基本是以宽度 1440 的标准出的设计稿，所以在我们按照他的设计稿进行还原的时候，在 1920 * 1080 的屏幕上显示的就会显得留白多，字体小。我估计这也是为什么操作系统给我们默认的缩放因子是 1.25，因为 1920 / 1440 = 1.33 ，比较接近 1.25，所以当我们按照设计师的设计进行开发后，操作系统进行了放大，使我们在电脑上看的网页能尽可能的还原设计稿。

手机浏览器

铺垫了这么多，其实在 web 开发的时候，我们基本不会在意电脑的缩放因子，更多需要注意的是在我们的手机上。下面这个图是在网上找的关于不同苹果手机的 设备像素 和 缩放因子 介绍： image.png 我写了以下的代码，在我的iphone12上跑了一下：

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <div id="app">
    <div>{{width}}</div>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
  new Vue({
    el:'#app',
    data: {
      width: document.documentElement.clientWidth,
    }
  })
</script>

注意：请设置 content="width=device-width, initial-scale=1.0"，否则在手机上显示的都是默认的 980 px，而不会适应屏幕宽度。

在开发时获取到的屏幕宽度并不会是 1170，而是 390，这正是因为它的缩放因子是 3。这一点困扰了我很久，现在终于能明白了。操作系统在返回或者读取开发像素的时候，结合了设备像素和缩放因子进行计算。

手机和电脑为什么要弄一个缩放因子出来，要解释起来也很方便。

一开始我们的手机的设备像素和开发像素是相同的，也就是没有缩放因子一说。但随着手机的屏幕越来越清晰，设备像素越来越高。那么我们开发的系统在老旧的手机上是适配的，但到了设备像素高的手机上，我们设置的固定px就会变得很小，很难看。所以手机厂商弄了个缩放因子，这样就能让我们开发的系统，在不同设备像素的机型上，他们呈现的高度大小是相同，也就是说更接近物理呈现。

pt 和 dp

pt 在 iOS 开发中的像素单位。dp 就是 Android 开发中的像素单位。对于我们 js 开发好像用处并不大。

参考

new.qq.com/rain/a/2022… juejin.cn/post/684490… www.jianshu.com/p/ee3b2b75b… blog.csdn.net/iOS15011015… juejin.cn/post/691832…

avatar
文章
阅读
粉丝