手机英寸和厘米的换算 关于移动端适配，你必须要知道的

手机英寸和厘米的换算 关于移动端适配，你必须要知道的

来源：秘密花园代码

介绍

移动适配是我们的

开发中经常会遇到很多问题：

我们在开发中可能已经知道该如何解决上述问题，但是对于问题和解决方案的原理可能并不清楚。在解决这些问题的过程中，我们经常会遇到很多概念：像素、分辨率、PPI、DPI、DP、DIP、DPR、视口等等。你真的能分清这些概念的含义吗？

本文将从移动适配的基本概念出发，探讨移动适配各类问题的解决方案及实现原则。

1. 英寸

一般用英寸来描述屏幕的物理尺寸，比如电脑显示器是17、22，手机显示器是4.8、5.7等等。

请注意，以上尺寸是屏幕对角线的长度：

英寸（缩写为 in）原为荷兰语中的拇指。一英寸是普通人拇指指甲根部的宽度。

英寸与厘米的换算：1英寸=2.54厘米

2.分辨率：2.1像素

像素是具有特定位置和颜色的小方块。

图片、电子屏幕（手机、电脑）都是由无数个具有特定颜色、特定位置的小方块组成。

像素可以看作是一幅图像或者电子屏幕的最小单位。

我们打开一张图片：

放大这些图像可以看到这些像素：

通常我们谈论两种类型的分辨率：屏幕分辨率和图像分辨率。

2.2 屏幕分辨率

屏幕分辨率是指屏幕由多少个像素组成。

以下是苹果官网对该手机分辨率的描述：

XS Max 和 SE 的分辨率分别为和。这分别指的是手机垂直和水平方向上的像素数。

当然，分辨率高并不代表屏幕就清晰，屏幕的清晰度还和屏幕的大小有关。

2.3 图像分辨率

我们通常说的图像分辨率，其实就是指图像所含像素的数量，比如一幅图像的分辨率为，就是指图像纵向和横向的像素数量分别为800和400个。

对于同样大小的图片来说，分辨率越高，图片越清晰。

2.4 生产者价格指数

PPI()：每英寸的像素数。

PPI可以用来描述屏幕的清晰度和图像的质量。

当用PPI来描述图像时，PPI越高，画质越高；当用PPI来描述屏幕时，PPI越高，屏幕越清晰。

在上面这张描述手机分辨率的图片中，我们可以看到XSMax与SE的PPI分别为458、326，这足以证明前者的屏幕更加清晰。

由于手机的尺寸就是手机对角线的长度，所以我们通常采用以下方法来计算PPI：

$$ rac{sqrt{水平像素数^2+垂直像素数^2}}{size}$$

PPI为$rac{sqrt{1334^2+750^2}}{4.7}=325.6$，也就是说每英寸大约包含326个物理像素。

2.5 DPI

DPI()：每英寸的点数。

这里的点是一个抽象的单位，可以是屏幕的一个像素，也可以是图片的一个像素，还可以是打印机上的一个墨点。

你可能经常看到 DPI 被用来描述图像和屏幕。在这种情况下，DPI 应该相当于 PPI。DPI 最常用于描述打印机，表示打印机每英寸可以打印的点数。

当一幅图像显示在屏幕上时，它的像素是规则排列的，每个像素都有特定的位置和颜色。

使用打印机打印时，打印机可能并不会规律地打印这些点，而是每次只用一个打印点来呈现图像。这些打印点之间会有一定的间隙。这就是DPI描述的：打印点的密度。

在上图中我们可以清楚地看到打印机如何使用墨点来打印图像。

因此打印机的DPI越高，打印的图像就越精细，但同时也会消耗更多的墨水和时间。

设备独立像素

其实上面我们所描述的像素都是物理像素，也就是设备上真实存在的物理单元。

让我们看一下设备独立像素是如何生成的：

智能手机发展非常迅速，前几年我们还在用分辨率很低的手机，比如下面左边的这款白色手机，它的分辨率是，我们可以在上面浏览正常的文字，图片等。

但是随着科技的发展，低分辨率的手机已经不能满足我们的需求，很快更高分辨率的屏幕就诞生了，比如下面这款黑色手机，它的分辨率正好是白色手机的两倍。

理论上来说，白色手机上相同大小的图片和文字，在黑色手机上会因为分辨率增加一倍而缩小一倍，这样一来，以后随着分辨率更高的手机出现，页面元素不是会越来越小吗？

但事实并非如此，我们现在使用的智能手机无论分辨率有多高，其显示的界面比例基本都差不多。乔布斯在发布会上首次提出了（视网膜屏幕）的概念，解决了上述问题，也让它成为了一款跨时代的手机。

当使用视网膜屏幕时，2x2像素被当做1个像素，使得屏幕看起来更加细腻，但是元素的大小不会发生改变。

如果黑色手机采用视网膜屏幕技术，那么显示结果应该是这样的，比如列表的宽度是300像素，那么在一条水平线上，白色手机会用300个物理像素来渲染，而黑色手机实际会用600个物理像素来渲染。

我们必须用一个单位来同时告诉不同分辨率的手机元素在界面上显示的大小，这个单位就是设备独立像素（简称DIP或者DP）。上面我们说列表的宽度是300像素，其实我们可以说：列表的宽度是300个设备独立像素。

打开开发者工具，我们可以模拟各种手机型号的显示，每种型号都会显示一个尺寸，比如X上显示的尺寸是，X的实际分辨率会比这个高很多，这里显示的是设备独立像素。

3.1 设备像素比

设备像素比简称DPR，是物理像素与设备独立像素的比例。

在网络上，浏览器为我们提供了帮助我们获得DPR。

在CSS中，您可以使用媒体查询min--pixel-ratio来区分DPR：

@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2){ }

在中，我们还可以使用.get()来获取DPR。

当然，上述规则也有例外，一加 7、7、8 Plus 的实际物理像素为 ，在开发者工具中我们可以看到，它的设备独立像素为 ，设备像素比为 3 ，设备独立像素与设备像素比的乘积并不等于 ，而是等于 。

其实手机会自动把像素放到1080*1920的物理像素里去渲染，这个过程我们不用关心，这个就叫屏幕的设计像素，我们在开发过程中也是以这个设计像素为标准。

其实，设备像素比这个概念是在苹果提出视网膜屏幕之后才出现的，因为在此之前，移动设备都是直接使用物理像素进行显示的。

接下来也用了其他技术方案来实现 DPR 大于 1 的屏幕，但是原理都差不多。因为屏幕尺寸很多，分辨率范围很广，不像苹果只有几种固定的设备和尺寸。所以为了保证各种设备的显示效果，根据设备的像素密度把设备分成几个范围：

当然，所有设备可能都不是严格遵循上述分辨率的，每种类型可能对应几种不同的分辨率，所以各个手机可以根据给出的范围来确定自己的DPR，从而有差不多的显示，当然只是差不多，由于各个设备尺寸大小、分辨率的差异，设备独立像素不会完全相等，所以各个设备在显示上还是无法完全相等。

3.2 移动开发

在 iOS 和开发中，样式单元实际上使用与设备无关的像素。

iOS的尺寸单位是pt，的尺寸单位是dp。 没有指定明确的单位，其实都是设备无关像素dp。

在开发APP的时候，UI给我们的原型图一般都是基于像素给出的。

为了适配所有机型，我们需要在编写样式时将物理像素转化为设备无关像素：比如给定一个元素的高度为200px（这里的px指的是物理像素，而不是CSS像素），设备像素比为2，那么我们应该给定200px/2=100dp。

当然最好的是你可以和设计师沟通，所有UI图像都是按照设备无关的像素制作的。

我们还可以在代码中转换px和dp（）：

import {PixelRatio } from 'react-native';

const dpr = PixelRatio.get();

/**
 * px转换为dp
 */
export function pxConvertTodp(px) {
  return px / dpr;
}

/**
 * dp转换为px
 */
export function dpConvertTopx(dp) {
  return PixelRatio.getPixelSizeForLayoutSize(dp);
}

3.3 WEB开发

在编写CSS时，我们用得最多的单位是px，即CSS像素，当页面缩放比例为100%时，一个CSS像素等于一个设备独立像素。

但是CSS像素很容易改变，当用户放大浏览器时，CSS像素也会被放大，一个CSS像素会跨越更多的物理像素。

页面的缩放系数 = CSS 像素 / 设备独立像素。

3.4 关于屏幕

让我在这里再多说几句关于屏幕的话，因为我在很多文章中看到了关于屏幕的误解。

屏幕只是苹果创造的一个营销术语：

在正常使用距离下，人眼无法区分单个像素。

为什么要强调正常使用距离呢？我们来看看它的计算公式：

$$ a=(h/2d) $$

a表示人眼的观看角度，h表示像素间距，d表示肉眼与屏幕的距离。满足以上条件的屏幕，可以让单个物理像素在肉眼无法看到。

它不能简单的表达分辨率和PPI，它只能表达视觉效果。

让多个物理像素渲染一个独立像素只是屏幕为了达到效果所采用的技术，并不是所有DPR>1的屏幕都是屏幕。

举个例子：如果给你一个超大的屏幕，哪怕它的PPI和DPR很高，但是你在近距离还是可以清晰的看到它的像素，那么它就不算是一个屏幕。

我们经常会看到用K和P单位来描述屏幕：

P代表屏幕垂直方向的像素个数，1080P就是说垂直方向有1080个像素，分辨率为的屏幕就是1080P的屏幕。

我们通常所说的高清屏，其实就是指屏幕物理分辨率达到或者超过高清屏的屏幕。

K代表的是屏幕水平方向1024个像素的数量，一般来说水平像素超过2048就是2K屏幕，水平像素超过4096就是4K屏幕。

4. 视口

视口（ ）表示计算机图形当前可见的区域。在 Web 浏览器术语中，它通常与浏览器窗口相同，但不包括浏览器的 UI、菜单栏等 - 即您正在查看的文档部分。

一般来说，视口有三种类型：布局视口、视觉视口、理想视口，这三种类型在屏幕适配中起着非常重要的作用。

4.1 布局视口

布局视口：当我们以百分比形式指定元素的大小时，其计算值是根据元素的包含块来计算的。当元素是顶级元素时，它是根据布局视口来计算的。

因此布局视口是网页布局的基准窗口，在PC浏览器上，布局视口等于当前浏览器的窗口大小（不包括 、 和滚动条）。

在移动端，布局视口都给了一个默认值，多是980px，这个值保证了PC网页能够在手机浏览器上呈现，但是非常小，用户可以手动放大网页。

我们可以通过调用../来获取布局视口大小。

4.2 视觉视口

视觉视口（）：用户实际透过屏幕看到的区域。

默认情况下，视觉视口等于当前浏览器窗口大小（包括滚动条宽度）。

当用户放大和缩小浏览器时，布局视口的大小不会改变，因此页面布局保持不变，但放大和缩小会改变视觉视口的大小。

例如：用户将浏​​览器窗口放大200%，那么浏览器窗口中的CSS像素也会随着视觉视口的扩大而扩大，一个CSS像素将跨越更多的物理像素。

因此，布局视口限制了您的 CSS 布局，而视觉视口决定了用户看到的内容。

我们可以通过调用./来获取视觉视口大小。

4.3 理想视口

布局视口在移动端显示的效果并不是一个理想的效果，所以理想视口（ideal）诞生了：网站页面在移动端显示的理想尺寸。

如上图，我们在描述设备独立像素的时候用过这张图，在调试移动浏览器的时候，页面上给出的像素大小就是理想视口大小，它的单位就是设备独立像素。

上面介绍CSS像素的时候提到了页面缩放倍数=CSS像素/设备独立像素，其实更准确的说法是页面缩放倍数=理想视口宽度/视觉视口宽度。

所以，当页面缩放比例为100%时，CSS像素=设备独立像素，理想视口=视觉视口。

我们可以通过调用.width/来获取理想的视口大小。

4.4 元

该元素表示任何无法由其他 HTML 元相关元素表示的元数据信息，它可以告诉浏览器如何解析页面。

我们可以利用元素来帮助我们设置视口，缩放等，从而让移动端得到更好的显示效果。

 name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1; minimum-scale=1; user-scalable=no;">

上面是一个配置，我们来看一下它们具体的含义：

值| 可能的值| 描述 -|-|- width| 一个正整数或 -width | 以像素为单位定义布局视口的宽度。 | 一个正整数或 - | 以像素为单位定义布局视口的高度。 -scale| 0.0-10.0| 定义页面的初始缩放比例。 -scale| 0.0-10.0| 定义最小缩放值；必须小于或等于 -scale 的值。 -scale| 0.0-10.0| 定义最大缩放值；必须大于或等于 -scale 的值。 user-| 一个布尔值（是或否）| 如果设置为否，用户将无法放大或缩小网页。默认值为是。

4.5 移动端适配

为了在移动设备上达到更好的显示效果，我们必须尽量让布局视口和视觉视口与理想视口相等。

-width 等于理想视口的宽度，所以设置 width=-width 相当于让布局视口等于理想视口。

由于-scale = 理想视口宽度/视觉视口宽度，我们设置-scale = 1;这相当于使视觉视口等于理想视口。

此时1个CSS像素就等于1个设备无关像素，而且我们也是基于理想视口来进行布局的，所以呈现出来的页面布局在各个设备上可以大致相似。

4.6 扩展

上面提到了width可以决定布局视口的宽度，其实它并不是布局视口的唯一决定因素，设置-scale也可能会影响布局视口，因为布局视口宽度是width和视觉视口宽度的最大值。

例如：某手机理想视口宽度为400px，设置width=-width，-scale=2。则视觉视口宽度=理想视口宽度/-scale，即200px。布局视口取两者最大值，即-width 400px。

如果设置了width=-width，-scale=0.5，则视觉视口宽度=理想视口宽度/-scale，即800px，布局视口取两者的最大值，即800px。

4.7 获取浏览器大小

浏览器提供给我们很多获取窗口大小的API，下面我们来比较一下：

5. 1px 问题

为了适配各种屏幕，我们在编写代码时一般都采用设备无关像素来布局页面。

在设备像素比大于1的屏幕上，我们写的1px实际上是由多个物理像素渲染出来的，这就导致1px在某些屏幕上看起来很粗。

5.1 图像

根据媒体查询，确定不同的设备像素比并给出不同的图像：

       .border_1px{
          border-bottom: 1px solid #000;
        }
        @media only screen and (-webkit-min-device-pixel-ratio:2){
            .border_1px本文链接：https://xkyczp.com/detail/id/164413.html