1.移动端基础知识

亮哥666
221 阅读6分钟

1. 移动端基础知识

在前面介绍 WebApp 的时候，我们有提到过开发移动端网页和传统 PC 端网页的区别：

  1. 系统

    • PC：Windows/Mac（区别不大）
    • 移动端：ios/Android/Windows（有区别）

  2. 浏览器

    • PC：区别很大
    • 移动端：区别不大

  3. 分辨率（尺寸）

    • PC：有区别
    • 移动端：区别很大

曾几何时，为了兼容 IE 低版本浏览器而头痛，以为到移动端时代可以跟这些麻烦说拜拜了。可没想到到了移动时代，更麻烦的事情等着我们的。

移动端 Web 页面的开发，由于手机屏幕尺寸、分辨率不同，或者需要考虑横竖屏问题，为了使得 Web 页面在不同移动设备上具有相适应的展示效果，需要在开发过程中使用合理的适配方案来解决这个问题。

因此在移动端页面开发中，适配是一个非常重要的问题。本章也将围绕整个移动端的适配来做讲解。

在具体介绍适配方案之前，我们先来学习一点关于移动端的基础知识。主要包含以下内容：

  • 设备像素（物理像素）
  • 屏幕尺寸和像素密度（PPI）
  • CSS 像素（设备独立像素、逻辑像素）
  • 像素比（DPR）

是不是看到这一堆新名词与概念就有点头晕了？没事儿，咱们由浅入深一个一个来看。

设备像素（物理像素）

首先要介绍的是“设备像素”，也被称之为“物理像素”。这是最好理解的一个名词，对于一般的显示设备来说，一个像素对应着屏幕上的一个发光点，这个点能够发出红、绿、蓝三种颜色的光，通过混合不同的 RGB 值，为我们创造了一个像素的颜色。

因此设备像素就是指实际存在的像素。

image-20220223135132119

平时我们在看一个设备屏幕的参数时，往往就有分辨率这么一个参数，例如 2340 × 1080，这代表什么含义呢？

image-20220223135207018

这表示在设备屏幕的水平方向上有 2340 个像素点，垂直方向上有 1080 个像素点。

有一个非常有趣的现象，那就是 PC 端的屏幕显示器分辨率是横纵比，而手机屏幕确实纵横比。

image-20220223135233028

这是为什么呢？

实际上在智能手机之前，大部分功能手机和黑莓屏幕都也还是横屏，下面则是按键区。后来屏幕慢慢扩大，才逐渐拉长的。再到了智能手机时代，因为不需要键盘区域了，而屏幕又越来越大，因此就将屏幕竖着放置。

image-20220223135250679

因此，分辨率的表示方式仍然是横纵比，只不过因为屏幕竖着放了，给人的感觉是纵横比。

屏幕尺寸和像素密度（PPI）

明白了设备像素后，接下来我们再来普及 2 个概念，屏幕尺寸和像素密度（PPI）。

大家在买手机的时候，一般在手机配置信息里面还会有屏幕尺寸这个信息，一般以英寸为单位。

image-20220223135320937

那么这个屏幕尺寸 6.67 英寸是指什么呢？难道是屏幕的面积么？

实际上并不是，首先英寸是一个长度单位，1 英寸（inch）等于 2.54 厘米（cm）。其次这里的 6.67 英寸指的是屏幕对角线的长度。

image-20220223135338581

有了屏幕分辨率和屏幕尺寸的信息，我们就可以计算像素密度（PPI）。所谓像素密度，就是指 1 英寸下的设备像素数量，计算公式如下：

image-20220223135410933

这里我们可以简单的计算一下 iPhone6 Plus 的 ppi：

// 屏幕斜边的像素
const margin = Math.sqrt(Math.pow(1080,2)+Math.pow(1920,2));
console.log(margin); // 2202.9071700822983
console.log(margin/5.5); // 400.52857637859967 PPI

可以看到正如官方所描述的每英寸有 401 个设备像素，也就是 ppi 值为 401。

在 www.sven.de/dpi/ 这里可以查看到一些常见设备的 ppi 值。

image-20220223135430637

CSS 像素（设备独立像素、逻辑像素）

接下来我们来看下一个概念，叫做“CSS 像素”。

上面我们已经介绍了 ppi 的概念，那么 ppi 越高，所包含的设备像素也就越多。

image-20220223135456332

但是这就会滋生出另外一个问题，如果我的 CSS 像素和设备像素是 1:1 的关系的话，随着设备像素的提升，图像就会越来越小。

image-20220223135513062

那么怎么解决这个问题呢？

其实也非常好办，之前我们 CSS 像素和设备像素是 1:1 的关系，现在只需要将这个比例稍作修改即可。

image-20220223135530944

正如上面的图片所示，以前 CSS 像素和设备像素 1:1 关系，1 个 CSS 像素对应 1 个设备像素，那么现在我修改这个比例，1 个 CSS 像素对应 2 个设备像素即可。

以前在做 PC 端网页开发的时候，由于 CSS 像素始终和设备像素是 1:1 的关系（不考虑缩放），所以给大家了一种错觉，以为 CSS 像素和设备像素就是 1:1 的对应关系，但是实际上 CSS 像素确是一个抽象的单位，具体含有多少个设备像素不是一定的。

像素比（DPR）

最后要介绍的概念就是像素比（DPR），英文全称为 device pixel ratio（设备像素比），计算公式为：DPR = 设备像素 / CSS 像素。

举个例子，如果 CSS 像素和设备像素 1:1 关系，那么 DPR 值就为 1。如果 1 个 CSS 像素对应 2 个设备像素，那么 DPR 值就为 2。

说简单点，就是一个 CSS 像素要用多少个设备像素来显示。如果 DPR 值为 1，表示用一个设备像素就够了，如果 DPR 值为 2，则表示一个 CSS 像素要用 2 个设备像素来表示。

可以通过 window.devicePixelRatio 获取一个设备的 DPR。

这里我们以 iPhone6 为例。

iPhone6 官方给出的分辨率为 1334 x 750，但是我们设置一个 div，宽度为 375 却能撑满整个手机。

<div></div>

*{
    margin:0;
    padding:0;
}
div{
    width: 375px;
    height: 100px;
    background-color: red;
}

由此我们可以推测，一个 CSS 像素和设备像素的对应关系为 1:2，那么 DPR 就应该是 2，通过查看 window.devicePixelRatio 的值发现也确实为 2。

console.log(window.devicePixelRatio);

在 www.paintcodeapp.com/news/ultima… 可以看到 iPhone 常见设备的 DPR 值。

image-20220223135620835

-EOF-

avatar
文章
阅读
粉丝