理解设备像素比

图片 4

问:如何使自己的音频做到音质混响效果?

移动端的设备多种多样,不同的设备又有不同的分辨率,低一点的有 800 *
400,中等的有 1280 * 720,高的有 1920 * 1080,甚至还有更高的 4k
屏等。
我们在开发移动端页面时,将视口(viewport)设置为设备宽度(device-width)后,同一份页面在这些不同的设备上又怎样的表现呢?我们写一个测试页面,在
Chrome 中看看就知道了。

我觉得也许你需要一个些声卡设备。有设备比较简单,没设备后期加混音效果比较麻烦

同一份页面在不同设备上的表现

测试页面的代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            background:red;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

1.PC 浏览器下的表现
PC 浏览器中的表现如下:

图片 1

1-chrome.png

2.IPhone6 下的表现
IPhone6 下的表现如下:

图片 2

2-iphone6.png

3.Galaxy S5 下的表现:
Galaxy S5 下的表现如下:

图片 3

3-galaxy-s5.png

可见,虽然设备不一样,但同样一个元素,在这些设备上宽度都是一样的。
我们来看一下这些测试设备的分辨率:

  • Chrome(也就是我们的 PC 屏幕):1920*1080
  • IPhone6:1334*750
  • Galaxy S5:1280*720

为什么这些设备拥有不同的分辨率,而在渲染页面时表现都一样呢?其实这是由设备像素比造成的。
设备像素比是怎么发挥作用的呢?要理解这个问题,需要三块预备知识:

  • 设备独立像素
  • DPI/PPI
  • CSS 中的像素

下面依次来看一下这些内容。

设备独立像素

设备的独立像素是和设备的分辨率相关联的,比如 IPhone6 的分辨率为 1334 *
750,那么表示该手机的屏幕上有 1366 * 750 个物理像素,而 Galaxy S5
的屏幕上有 1280*720 个像素。

PPI/DPI

PPI/DPI 是像素密集度,表示屏幕每英寸拥有的像素个数,PPI/DPI
的计算方式如下(以 IPhone6 为例):

图片 4

image.png

最终计算出的 IPhone6 的 PPI 为:325.16。该结果表示在 IPhone6
上,每英寸有 325.16 个物理像素,四舍五入为 325 个物理像素。
可以发现:这个 PPI 的值近似等于 IPhone6
这个设备的水平物理像素的一半,也即:

750 / 325 = 2

这个由设备水平物理像素和设备 PPI/DPI 计算出来出来的比值就是设备像素比。

相关文章

Leave a Comment.