【前端】【面试】【经典一道题】为啥移动端使用二倍图详解

患得患失949

于 2025-02-08 10:30:00 发布

阅读量1.2k

点赞数 33

分类专栏：面试考题专栏（前后端）文章标签：前端移动面试

本文链接：https://blog.csdn.net/qq_59344127/article/details/145493563

版权

面试考题专栏（前后端）专栏收录该内容

104 篇文章

订阅专栏

前端移动端二倍图的定义

在前端移动端开发中，二倍图是指图像的物理像素尺寸是其在页面中显示尺寸的两倍。例如，在代码里设定一个图片元素的显示尺寸为 100px * 100px，若使用二倍图，那么这张图片实际的物理像素尺寸就是 200px * 200px。以下是简单的 HTML 代码示例来直观体现这种尺寸关系：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        /* 设置图片显示尺寸 */
        img {
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <!-- 这里如果使用二倍图，图片实际尺寸应为 200px * 200px -->
    <img src="example@2x.png" alt="Example Image">
</body>
</html>

使用二倍图的原因

1. 适配高分辨率屏幕

1.1 设备像素比的概念

随着移动设备的发展，屏幕分辨率越来越高。为了衡量屏幕的像素密度，引入了设备像素比（Device Pixel Ratio，简称 DPR）的概念，它定义为物理像素和设备独立像素的比值，即 DPR = 物理像素 / 设备独立像素。比如，iPhone 6/7/8 的设备像素比是 2，这意味着在该设备上 1 个设备独立像素对应 2×2 个物理像素。我们可以通过 JavaScript 来获取设备的 DPR，代码如下：

const devicePixelRatio = window.devicePixelRatio;
console.log(`当前设备的像素比是: ${devicePixelRatio}`);

1.2 普通图片在高分辨率屏幕显示模糊

若在高 DPR 设备上使用普通的一倍图，由于屏幕的物理像素数量更多，而一倍图的像素不足以填充这些物理像素，就会导致图像被拉伸，出现模糊、锯齿等问题。例如，一张尺寸为 100px * 100px 的一倍图，在 DPR 为 2 的 iPhone 6 手机上显示时，该手机屏幕这 100 * 100 设备独立像素的区域实际对应 200 * 200 个物理像素。一倍图只有 100 * 100 个像素，要填充 200 * 200 个物理像素区域，就会被放大，图像细节丢失，变得模糊不清，像图片中的文字边缘会出现锯齿，图像的纹理也不再清晰。以下是 HTML 和 CSS 示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        /* 设置图片显示尺寸 */
        img {
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <!-- 这里使用一倍图，在高 DPR 设备上会模糊 -->
    <img src="example.png" alt="Example Image">
</body>
</html>

1.3 二倍图保证清晰显示

使用二倍图就能解决这个问题。还是以上面的例子来说，使用 200px * 200px 的二倍图，在 DPR 为 2 的 iPhone 6 上显示为 100px * 100px（这里的 px 是设备独立像素）时，正好一个设备独立像素对应一个物理像素，图像可以清晰、完整地显示，图片中的文字边缘光滑，图像纹理清晰，不会出现模糊的情况。以下是使用二倍图的代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        /* 设置图片显示尺寸 */
        img {
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <!-- 这里使用二倍图，在高 DPR 设备上能清晰显示 -->
    <img src="example@2x.png" alt="Example Image">
</body>
</html>

2. 提高视觉效果

2.1 呈现更多细节

二倍图包含了更多的像素信息，因此能够呈现出更丰富的细节。在高分辨率屏幕上，用户对于图像的清晰度和细节有更高的要求。比如展示一张美食图片，二倍图能清晰呈现食物的色泽、纹理，如蛋糕上细腻的奶油纹路、水果的新鲜表皮质感等，让图片看起来更加精致、细腻，提升整个页面的视觉质量和用户体验。以下是一个展示美食图片的 HTML 示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        /* 设置图片显示尺寸 */
        img {
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <!-- 使用二倍图展示美食，能呈现更多细节 -->
    <img src="cake@2x.png" alt="Delicious Cake">
</body>
</html>

2.2 符合设计预期

设计师在设计移动端界面时，通常会考虑到高分辨率屏幕的显示效果，会按照二倍甚至更高倍数的尺寸来设计图标和图片等元素。比如设计一个 APP 底部导航栏图标，设计师可能会按照二倍尺寸设计，开发人员使用二倍图可以更好地还原设计师的设计稿，使页面在各种设备上都能呈现出一致的视觉效果，避免出现设计稿和实际显示效果差异较大的情况。以下是一个简单的 APP 底部导航栏的 HTML 和 CSS 示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        /* 底部导航栏样式 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            display: flex;
            justify-content: space-around;
            background-color: #f8f8f8;
            border-top: 1px solid #ccc;
        }
        /* 导航栏图标样式 */
        .nav-icon {
            width: 40px;
            height: 40px;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <div class="bottom-nav">
        <!-- 使用二倍图作为导航栏图标 -->
        <img class="nav-icon" src="home@2x.png" alt="Home">
        <img class="nav-icon" src="search@2x.png" alt="Search">
        <img class="nav-icon" src="profile@2x.png" alt="Profile">
    </div>
</body>
</html>

3. 兼容不同 DPR 的设备

3.1 一套代码适配多种设备

在实际开发中，我们无法确定用户会使用哪种 DPR 的设备来访问页面。使用二倍图可以在一定程度上兼容不同 DPR 的设备。对于 DPR 为 1 的设备，浏览器会自动对二倍图进行缩放显示；对于 DPR 为 2 或更高的设备，二倍图可以清晰显示。例如一个电商 APP，用户可能使用 DPR 为 1 的老款手机，也可能使用 DPR 为 3 的新款旗舰手机访问。通过使用二倍图，开发人员只需一套代码和二倍图资源，就可以在多种设备上实现较好的显示效果，减少了为不同 DPR 设备单独准备图片资源的工作量。以下是一个简单的电商商品图片展示的 HTML 示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        /* 设置商品图片显示尺寸 */
        .product-img {
            width: 150px;
            height: 150px;
        }
    </style>
</head>
<body>
    <!-- 使用二倍图展示商品图片，兼容不同 DPR 设备 -->
    <img class="product-img" src="product@2x.png" alt="Product Image">
</body>
</html>