移动开发相关知识-CSDN博客

本文链接：https://blog.csdn.net/qzw752890913/article/details/123696380

本文介绍了移动设备中的物理像素、设备独立像素和设备像素比三个关键概念，并通过实例解释了如何进行移动适配，特别是在网页设计中如何通过设置viewport实现不同设备上的良好显示。移动适配的核心是确保网页在不同设备上能正确缩放，以适应不同屏幕尺寸的设备独立像素。

摘要由CSDN通过智能技术生成

文章目录

- 3个概念
- 移动适配

3个概念

在这里插入图片描述

物理像素
物理像素，也叫设备像素（DP，Device Pixel），是真实像素。
举例来讲，iPhone 6的屏幕在宽度方向有750个像素点，在高度方向有1334个像素点，所以iPhone 6总共有750x1334个物理像素点。通常使用屏幕分辨率来描述物理像素，如1334x750。
设备独立像素
设备独立像素（DIP，Device Independent Pixel），是虚拟像素，可以理解为CSS像素。
设备像素比
设备像素比（DPR，Device Pixel Rate）。
设备像素比 = 物理像素 / 设备独立像素

以下是从手机屏幕尺寸大全网站上截取下来的一张图片，它描述了iPhone各款手机的物理像素、设备独立像素和像素比。
在这里插入图片描述

移动适配

iPhone 5/SE的设备独立像素为320pxx568px。
手机浏览器的默认视口宽度可通过如下方式得知，为980px。
在这里插入图片描述

看个例子吧。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>test</title>
    <style>
        .phone{
            width: 320px;
            height: 568px;
            background: gray;
            text-align: center;
            writing-mode: vertical-lr;
            font-size: 100px;
        }
    </style>
</head>
<body>
    <div class="phone">我是手机</div>
</body>
</html>

在这里插入图片描述
“我是手机”所在的较深颜色区域，其尺寸大小为320pxx548px，模拟了iPhone 5/SE的设备独立像素大小。

在这里插入图片描述
很明显，手机320px这个小宽度是容纳不了浏览器980px这个大宽度的。

怎么办？让 浏览器的视口宽度 等于 手机在宽度上的设备独立像素。
只需要这么一句：<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
    <style>
        .phone{
            width: 320px;
            height: 568px;
            background: gray;
            text-align: center;
            writing-mode: vertical-lr;
            font-size: 100px;
        }
    </style>
</head>
<body>
    <div class="phone">我是手机</div>
</body>
</html>