一、物理像素 / 物理像素比

移动端网页开发与 PC 端开发有很多不同之处 , 在图片处理方向需要采用二倍图 / 三倍图 / 多倍图方式进行图片处理 ;

图片处理的方式与如下的物理像素与物理像素比概念相关 ;

物理像素 : 物理像素就是设备上的分辨率 , 如 1920 x 1080 像素 , 就是宽度上有 1920 个像素 , 高度上有 1080 像素 ;

物理像素比 : 设置 1 像素在实际设备中 , 能显示的像素个数 , 就是物理像素比 ;

移动端中 1 像素 , 需要结合物理像素比进行设置 , 可能实际中对应 2 像素 , 也可能对应实际中的 0.5 像素 ;
物理像素比是移动端设备的固有属性 ;

电脑端设置 1 像素就是 1 像素大小 ; 移动端设置 1 像素 , 需要结合屏幕像素比进行设置 ;

不同手机的物理像素比 :

在这里插入图片描述

可参考【Android 屏幕适配】屏幕适配基础概念 ② ( 像素 px 与密度无关像素 dip | 像素 px 与密度无关像素 dip 在不同屏幕像素密度 dpi 下的换算关系 ) 博客 , Android 应用开发时 , 1 dip 屏幕像素无关密度 , 在不同的屏幕像素密度的手机中的换算关系 ;

px 与 dip 的换算关系 :

屏幕像素密度 ( DPI , Dots Per Inch ) 为 120 dpi 时 ( ldpi ) , 1 dip = 0.75 px ;
屏幕像素密度 ( DPI , Dots Per Inch ) 为 160 dpi 时 ( mdpi ) , 1 dip = 1 px ;
屏幕像素密度 ( DPI , Dots Per Inch ) 为 240 dpi 时 ( hdpi ) , 1 dip = 1.5 px ;
屏幕像素密度 ( DPI , Dots Per Inch ) 为 320 dpi 时 ( xhdpi ) , 1 dip = 2 px ;
屏幕像素密度 ( DPI , Dots Per Inch ) 为 480 dpi 时 ( xxhdpi ) , 1 dip = 3 px ;
屏幕像素密度 ( DPI , Dots Per Inch ) 为 640 dpi 时 ( xxxhdpi ) , 1 dip = 4 px ;

二、代码示例 - 100 像素在 PC浏览器 / 移动端浏览器显示效果

在下面的代码中 , 分别在 PC 端浏览器和移动端浏览器中显示 100x100 像素的盒子 , 对比二者的显示效果 ;

代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
    <title>meta 视口标签</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>