# 移动端开发核心基础必备知识

TIP

在学习移动 Web 开发之前，我们先来看下，移动 Web 开发需要学习哪些内容。我把需要学习的内容分成了以下 5 个版块：

移动端开发核心基础知识
移动端 5 种常见布局技术
移动端事件（目前阶段不讲）
移动端开发常见问题
移动 web 开发性能优化

接下来我们先来学习第一个版块的内容，移动端开发核心基础知识。

移动端开发核心基础知识，主要包括以下几个部分

什么是移动 Web、PC web 和 web App 开发？
移动 Web 与 PC Web 开发区别？
什么是像素、分辨率、物理像素、逻辑像素、设备像素比？
为什么要有物理像素和逻辑像素之分？
如何让相同尺寸屏幕下，不同分辨率，看同一图片效果差别不大？
什么是标清屏和高清屏？
为什么移动端要使用 2 倍图？
viewport 视口设置
真机查看
移动开发常用的单位

# 一、什么是移动 Web、PC web 和 web App 开发

TIP

要了解什么是移动 web 开发，PC web 开发，我们先来了解什么是 web 开发。

什么是 web 开发？

web 开发简单理解为网页开发，主要是用 HTML5+CSS3+Javascript 编写，然后代码在浏览器中运行。

什么是移动 web 开发和 PC web 开发？

不管是移动 web 开发还是 PCweb 开发，本质都是用 HTML+CSS+Javascript 来编写
只是移动 web 开发，代码是在手机、平板等浏览器中运行
PC web 开发，代码是在 PC 端（电脑）浏览器中运行。

我们这个课程要讲的就是移动 web 开发

什么是 App 开发？

APP 是 Application 的缩写，指应用程序，一般指安装在手机上的软件（比如手机上安装的抖音、微信、QQ）。

APP 开发分类	说明
Native APP	一般依托于操作系统，有很强的交互，是一个完整的 App，可拓展性强，需要用户下载安装使用。比如：基于操作系统的 IOS 开发和安卓开发
Web APP	应用程序在浏览器中运行，称为 Web APP
Hybrid APP(混合式 APP)	是 Native APP 和 Web APP 的混合体，同时具有两者的特点。

# 二、移动 Web 与 PC Web 开发区别

TIP

移动 Web 与 PC Web 最大的区别在于运行的终端设备不同。不同终端设备有不同特性，正是这些终端设备的不同特性，造成了移动 web 开发和 PC web 开发的不同。

具体的不同点有以下 4 个方面

屏幕大小不同
网络环境和设备性能不同
交互方式不同
兼容性不同

# 1、屏幕大小不同

TIP

我们都知道移动端的设备，如手机的屏幕大小相对 PC 端要小很多，所以针对 PC 端的那些布局在移动端肯定就不行了，我们需要专门针对移动端来做布局。

如果直接把 PC 端的网站在移动端打开，整个页面就会被压缩，压缩后就会看不清。如下

pc 端效果

移动端效果

常见的移动端的屏幕尺寸大小

不同手机屏幕尺寸大小。点击查看网址 (opens new window) 👆

# 2、交互方式不同

TIP

pc 端主要是用鼠标、键盘来实现交互
移动端主要是用手指来实现交互，所以我们在学移动端开发时，需要了解移动端的手指触摸事件。

# 3、网络环境和设备性能的不同

TIP

移动端的网络环境与 PC 端相比，无论是在网络下载速度还是在流量方面，都要比 PC 端差些。
PC 端的设备性能要比移动端的设备性能要强很多，所以我们在做移动端开发时，要更注重性能的优化，否则可能会带来较差的性能体验。

# 4、兼容性不同

TIP

移动端的兼容性要比 PC 端好的多，因为移动端相较 PC 端发展的要晚一些，所以国内的 UC、QQ、百度等手机浏览器都是根据 Webkit 修改过来的内核，所以 html5 的新特性在移动端我们可以放心大胆的使用。

PC 端常见浏览器	移动端常见浏览器
谷歌浏览器、火狐浏览器、Edge 浏览器、360 浏览器、QQ 浏览器、搜狗浏览器 ... 等	Safari 浏览器、UC 浏览器、QQ 浏览器、欧朋浏览器、百度手机浏览器、360 安全浏览器、谷歌浏览器、搜狗手机浏览器、猎豹浏览器 ... 等

# 三、像素、分辨率、物理像素、逻辑像素、设备像素比

TIP

接下来我们来了解下移动 web 开发中的一些基本概念：

什么是像素
什么是分辨率
什么是物理像素(dp)
什么是逻辑像素（CSS 像素）(dip)
什么是设备像素比（dpr)
标清屏和高清屏
图片缩放问题、PPI 与 DPI

# 1、什么是像素

TIP

要了解什么是像素，我们可以通过两张图片来对比理解

源始大小(32 * 32)	放大 24 倍查看该图(可以利用 PS 软件来放大图片 - 把图片的每个像素点放大了 24 倍)

注：

当我们把一张图片在 PS 放大 240 倍后，我们发现这张图其实是由许许多多的小方格拼凑起来。这一个个的小方格就被定义为一个单位，叫像素。只不过小方格本身很小，所以人肉眼看不出来。

1 个小方格为 1 像素大小，2 个小方格为 2 像素大小，那 n 个小方格就是 n 像素。

# 1.1、图标尺寸 n * m 像素

TIP

我们描述一个图片不能一个一个的去数小方格，图片是矩形的，因此常常描述一个图片尺寸时，我们说的是多少乘多少像素。

就比如图片大小是200 * 300像素，也就是说该图片的宽有200个小方格，高有300个小方格，那该图片一共占 200 *300=60000个小格子。

# 1.2、1 像素（1 个小方格）多大？

TIP

1 个小方格代表 1 像素，那 1 像素到底多大，肯定不能用多少厘米或毫米来表示，因为小格子是矩形的，要论大小也是要多少平方厘米或平方毫米。

但是小方格的大小就是 1 像素，像素就像是厘米或毫米一样被定义好的单位，专门用于电子屏幕上描述图形尺寸的单位。

但像素不像厘米等长度单位一样有固定大小，像素没有固定大小，1 像素就是一个小方格。不同的分辨率下，1 像素（小方格）大小不一样。

# 2、什么是分辨率

TIP

要了解屏幕分辨率，就们先从设备的屏幕尺寸开始说起。各种设备的屏幕尺寸是以英寸为单位的。

英寸： 是一个长度单位，是有固定大小的， 1 英寸=2.54 厘米。

我们知道屏幕也是一个矩形，按正常我们应该也是用 长度 * 宽度 的形式来描述，为什么会用一个长度单位英寸来描述呢？是因为显示屏幕不是胡乱设计比例的，他是有固定的设计比例，如 16：9、4：3 等，因此屏幕给出斜对角线的大小，具体屏幕宽高就可以根据屏幕的设计比例计算出来。

所以屏幕尺寸大小为 15.6 英寸，指的是屏幕斜对角线的大小

1. 笔记本电脑

尺寸（对角线）	常见分辨率	比例	适用场景
11.6 英寸	1366×768 (HD)	16:9	超便携本、上网本
13.3 英寸	1920×1080 (FHD)	16:9	轻薄本（如 MacBook Air）
14 英寸	1920×1080 (FHD)	16:9	商务本、全能本
15.6 英寸	1920×1080 (FHD)	16:9	主流游戏本、办公本
16 英寸	2560×1600 (QHD+)	16:10	高性能本（如 MacBook Pro）

2. 台式机显示器

尺寸	常见分辨率	比例	备注
21.5 英寸	1920×1080 (FHD)	16:9	基础办公
24 英寸	1920×1080 (FHD)	16:9	主流选择
27 英寸	2560×1440 (QHD)	16:9	设计/游戏
32 英寸	3840×2160 (4K UHD)	16:9	专业设计/影音
34 英寸	3440×1440 (UWQHD)	21:9	超宽屏（曲面屏常见）

3. 安卓手机

尺寸（英寸）	常见分辨率	比例	示例机型
5.0-5.5	1280×720 (HD)	16:9	旧款入门机
5.5-6.2	1920×1080 (FHD)	16:9	主流中端机
6.3-6.8	2340×1080 (FHD+)	19.5:9	全面屏（如三星 S23）
6.7-7.0	3200×1440 (QHD+)	20:9	高端旗舰（如一加 11）

4. iPhone

尺寸（英寸）	分辨率	比例	示例机型
4.7	1334×750	16:9	iPhone 8/SE (2nd/3rd gen)
5.4	2340×1080	19.5:9	iPhone 13 mini
6.1	2532×1170	19.5:9	iPhone 14/15
6.7	2778×1284	19.5:9	iPhone 14 Pro Max

5. 折叠屏手机

类型	展开尺寸	折叠尺寸	分辨率示例
横向折叠	7.6 英寸	6.2 英寸	2208×1768 (三星 Z Fold5)
竖向折叠	6.7 英寸	3.4 英寸	2640×1080 (三星 Z Flip5)

# 2.1、分辨率与屏幕的关系

TIP

我们将屏幕划分成许许多多的小方格子，我们知道 1 个小方格就代表 1 像素。比如屏幕宽有 n 个小方格，高有 m 个小方格，那屏幕的分辨率就是 n * m （屏幕分辨率= 水平像素数 × 垂直像素数 的形式表示）

所以我们常说的电脑屏幕分辨率为1920 *1080 ，其实就是电脑屏幕被划分成：宽有 1920 个小方格，高有 1080 个小方格。

屏幕是如何划分小方格？

屏幕划分小方格就好比我们画表格一样，横着、竖着加线条，就划分成了一排排的小格子。如下图：

px2022-08-02

思考：如何计算此时电脑划分出来的小格子的大小？

通过屏幕给出的英寸大小，可以计算出屏幕的宽和高的大小
再通过宽和高及分辨率，就可以计算划出来的小方格的长和宽的大小
知道小方格的长和宽，就能计算出一个小格子的（面积）大小。

总结：分辨率相同的情况下，屏幕越大，1px 对应的小方格就越大。

# 2.2、分辨率大小影响什么？

分辨率影响了什么？分辨率影响图片清淅度，最终影响了我们的视觉

比如：在 15.6 英寸的显示屏

如果分辨率为100 *100像素，那么一个小方格（1 个物理像素）占据的空间很大，肉眼就能看到小格子的轮廓了，那体验就非常不好，像是把一个图片放大 N 倍一样来看，很模糊。
如果分辨率为1000*1000像素，那一个小方格（1 个物理像素）占据的空间就很小，内眼是看不到小格子的轮廓的，那体验就会非常好。
如下图，同样大小的屏幕，左边分辨率是24 * 16 像素，右边分辨率为48 * 32像素。由此可见，相同尺寸的图片，分辨率越高，图片显示的越清淅。

分辨率 24 *16 像素	分辨率 84 *32 像素


图片看起来很大，但模糊	图片看起来小，但清淅

分辨率影响了什么？分辨率还影响图片展示效果，最终影响了我们的视觉

如果图片本身的大小是 300 *300像素，那在100 *100像素的屏幕分辨率上就只能显示1/3的图片了。
但是在1000 *1000像素的分辨率上，图片可以完全显示，并且大小占屏幕的1/3不到
这就是为什么同样的图片在不同分辨率的显示上大小不一样了，因为这个图片占的格子数是一定的，但是每个设备的像素（小格子）大小不一样，显示的图片大小就不一样

因此1 像素的具体大小在不同的设备上是不一样的，屏幕大小相同，同一张图片

分辨率越高，划分的小格子数越多，1 像素占据的空间就会越小，图片显示出来的大小就越小，但是会越清晰，
分辨率越低，划分的小格子数越少，1 像素占据的空间就会越大，图片显示出来的大小就越大，但很模糊。

# 3、什么是物理像素与逻辑像素、设备像素比

TIP

详细了解物理像素、逻辑像素、设备像素比三者的区别和关系，以及显示结果的影响

# 3.1、物理像素（设备像素 dp）

TIP

在设备一生产出来后就确定的像素称作设备物理像素，也叫设备像素（ device pixels )，简称dp。也就是我们前面讲到的显示屏幕划分出的物理小格子 ，1 个小格子就是一个物理像素。
如果电脑分辨率是1280 *1080，则屏幕划分成水平 1280 个格子，垂直划分 1080 个格子，整个屏幕划分出来 1280*1080=1382400个小格子，1 个小格子就是一个物理像素大小。
所以电脑尺寸大小一样，分辨率越大，格子越小，1 个物理像素就越小，图片显示就越清淅。
我们都知道一个手机的尺寸是固定的，分辨率通常也是固定的，所以物理像素的大小是生产出来后就确定的，其大小是不能改变的。

我们可以通过电脑中的显示设置调整电脑的显示的分辨率，实际改变的是输出分辨率。

物理分辨率（物理像素决定）	输出分辨率
由屏幕硬件像素数量决定（如 3840×2160）	由显卡输出的图像信号分辨率决定（如 1920×1080）
出厂后固定，无法改变	可通过系统设置自由调整
直接决定屏幕最高清晰度	需通过缩放算法适配物理分辨率

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

TIP

我们通常说的 CSS 像素（比如 100px 、200px等）指的就是逻辑像素，也叫设备独立像素（device independent pixels) ，简称 dip
我们在书写 CSS 样式时，常用 CSS 像素（逻辑像素）来表示一个元素或图片的尺寸。如 .box{width: 100px ; height: 100px ; }
逻辑像素（CSS 像素）的大小是不固定的，可时刻改变的像素。

为什么说逻辑像素是可以时刻改变的像素呢？

是因为 1px 在屏幕上的具体显示大小，是由其所在的设备的设备像素比来决定的。

# 3.3、设备像素比 (dpr)

TIP

设备像素比（devicePixelRatio)，简称 dpr，是指物理像素与逻辑像素的比例。

dpr = (在一个方向上）设备(物理）像素 / 逻辑像素 （没有缩放时）

逻辑像素与物理像素的显示关系

当 dpr=1 时，说明物理像素和逻辑像素是 1：1，此时一个物理像素显示一个逻辑像素 1px --->一个小方格显示
当 dpr=2 时，说明物理像素是逻辑像素的 2 倍，此时 2*2=4 个物理像素显示 1 个逻辑像素 1px -->4 个物理像素

显示示例 1

假设，以下两个手机的屏幕大小一样，分辨率都为4*8 像素，但dpr 值分别为 1 和 2。

现在1px * 1px的图片，在两台设备上显示效果如下：

显示示例 2

假设，以下两个手机的屏幕大小一样

dpr=1 的手机分辨率是2*4像素 1px ---1 个物理
dpr=2 的手机分辨率是4*8像素 1px --- 4 个物

现在1*1px的图片，在两台设备上显示效果如下：

在 dpr=1 的设备上，则 1 个物理像素显示一个逻辑像素
在 dpr=2 的设备上，则 4 个物理像素显示一个逻辑像素

注：

在一般的电脑上，设备像素是等于逻辑像素的，也就是 dpr=1.0
高分辨率的电脑上，二者不一定相等，浏览器提供一个接口可以查看二者的关系。
在 console 控制台输入 window.devicePixelRatio 属性查看

dpr 值，厂商在设备出厂时就已经进行设置，并且禁止用户进行更改

# 3.4、图片缩放，是在改变什么？

TIP

一般情况下点开图片查看时是将图片的一个小格子(逻辑像素）对应到一个显示屏幕的小格子（物理像素）。

但图片在被放大或者缩小后，图片的像素小格子便不再是一一对应于显示屏幕的分辨率划分出的物理小格子了。

图片放大 3 倍，其逻辑像素点也增为原来了3倍，此时 1 个逻辑像素占一个物理像素，但是因为逻辑像素为原来的 3 倍，那对应占的物理像素点也是原来的3倍。
此时相当于原来的一个图片小格子就占据3个物理小格子大小显示，因此图片就看起来放大了，甚至超出屏幕大小。

图片缩小到 0.5，则一个图片小格子就占据半个物理小格子，看起来就缩小了。

图片原始尺寸`3232`px，其占的格子数`32 32`

图片放大两倍后尺寸大小`64 * 64`px ，其占的格子数 `64 *64`

结论：

图片的缩放是在改变图片的逻辑像素。

# 4、为什么要有物理像素和逻辑像素之分

TIP

按常理来说，直接用物理像素表示一个图片的大小就好了？但实际上如果将图片的尺寸用物理像来表示，那么会带来很大的问题。

相同图片，在不同分辨率下的效果

如果两台电脑的屏幕尺寸完全一样，一个分辨率是1920 *1080, 一个是960 *540,那么二者同时放一个 300* 300的物理像素大小的图片，结果会怎么样？
在高分辨率 1920 *1080下 1 像素（小方格）要比低分辨率960 *540 1 像素（小方格）要小很多，所以在 1920 *1080下看到的图片会很小，在960 *540 下看到的图片会很大。
也就是说两个电脑尺寸完全一样，但分辨率不一样，看到的图片大小差别很大，这个体验非常不好。
再加上现在无论手机端，pc 端，厂家生产显示器时都会往死里提高分辨率，这样就会造成看到的图片会越来越小。

# 5、如何让相同尺寸下不同分辨率，看同一图片效果差别不大？

TIP

实现的方法就是提高那些分辨率很高但是屏幕尺寸很小的设备的 dpr
分辨率很高，如果屏幕尺寸很小，则 1 个物理像素点会很小，那图片显示就会很小，提高 dpr 后，则 1px 逻辑像素会占用更多的设备像素点，这样图片看起来会更大些

例如 300 * 300 逻辑像素大小的图片，有屏幕尺寸相同的两个设备 A / B

A 的分辨率为 1920 * 1080，设置 A 的 dpr =2，从而得到 4 个物理像素显示 1 个逻辑像素
B 的分辨率是 960 * 540 ，设置 B 的dpr =1，从而得到 1 个物理像素显示 1 个逻辑像素

这样同一个图片在 B 设备中一个像素小格子占一个物理格子，在 A 设备中，因为 A 的物理小格子小，那就 4 个物理小格子显示 1 个逻辑像素，这样呈现的两个图片大小就看起来就一样大的了。

这就是为什么相同尺寸的屏幕，其分辨率越高，对应的 dpr 往往会越大。

# 6、什么是标清屏和高清屏

TIP

当设备的 dpr=1 时，这个设备可以称为是标清屏
当设备的 dpr>1 时，这个设备可以称为是高清屏
目前高清屏的 dpr 通常为 2，3 等。

这就是我们通常说的相同的屏幕尺寸，分别率越高，图像越高清，当然也就是我们说的高清屏喽！

# 7、移动开发为什么要使用 2 倍或 3 倍图

TIP

要了解移动开发为什么要使用 2 倍或 3 倍图，我可以先来思考下面这个问题

思考：

标清屏中，1 个逻辑像素用一个物理像素显示，图片设计的效果正好和展示效果一样，在高清屏 dpr=2 中，1 个逻辑像素用 4 个物理像素显示，图片到底是更清淅了，还是更模糊了？

我们前面说分辨率影响的是我们的视觉，分辨率越高，代表一个物理像素点就越小，图片就显示的越清淅。
咱之前这样说，并没有考虑设备像素比（dpr），默认 dpr=1 的角度来思考的，1 个逻辑像素有 1 个物理像素显示
如果现在手机的 dpr=2，哪到底图片显示的是更清楚还是更模糊呢？

我们现在做个实验：我设计了 2 个图片

1 倍图图片尺寸（32 * 38）	2 倍图图片尺寸（64 *76）

现在我把两张图，以相同大小 32 * 38px 的大小插入到网页中，代码如下：

<style>
  img {
    /* 图片宽 */
    width: 32px;
  }
</style>
<body>
  <!-- 1倍图 -->
  <img src="images/f-@1x.png" alt="" />
  <!-- 2倍图 -->
  <img src="images/f-@2x.png" alt="" />
</body>

现在我在 iphoneXR（dpr=2）上来查看下效果，其效果截图如上：

从效果图中

可以看到 1 倍图看起来要模糊些，2 倍图看起来才是高清的。为什么是这样的呢？

那咱们就来分析一下，iPhoneXR 的dpr=2，即1px要用4个位理像素来显示。

你可能是这样来理解的(错误)	实际要这样来理解(正确)
标清屏下的一个点，分到高清屏下占 4 个点，如下图所示	在高清屏中 1 个 CSS 像素点实际上有 4 个物理像素展示，1 分成 4，显然不够分，只能颜色近似选取，如下图所示

这样看起来是会更清淅，但是这样理解是不对的，图片实际测试的结果不是高清，而是模糊了。	于时，图片感觉就会变的模糊了。

TIP

我们来看一设计小图，尺寸 28px * 24px

fish-2022-8-22

在 PS 中放大来看，我们能看到如下的一个个小格子，1 个格子代表 1CSS 像素
整个图由横 28 个格子和竖 24 个格子组成。

放大拉伸后的效果

现在我把这个图片拉伸，放大 2 倍，尺寸为：56 * 48px

此时图片会变的模糊，原因就是因为 1 个像素点要分成 4 个的时候，颜色不够分，就会近似取色。
单把鱼眼睛拿出来对比，就能看出放大后的颜色是如何取色的。

为了让移动端能够显示高清图效果，所以我们在设计的时候

针对 dpr = 2 的高清屏，专门设计 2 倍图来开发
针对 dpr = 3 的高清屏，专门设计 3 倍图来开发

比如: iPhone SE 的分辨率 750 * 1334，dpr = 2，在水平方向上能显示的 CSS 像素为 375px

我们在设计稿时，就需要设计 2 倍图，即设计稿的宽为 750px，然后在实际开发时，按 750/2 = 375px 大小来开发。

# 三、viewport 视口

TIP

在学习 viewport 视口前，我们先来回答 3 个问题：

# 1、在 pc 端和移动端，网页中 html,body 的默认宽是多少？

TIP

pc 端（分辨率为 1920 * 1080）下
- html 的默认宽为浏览器宽 1920px
- body 为块级元素，在设置 margin: 0; 时，body 的宽等于 html 宽 1920px
移动端
- 大部分手机浏览器的宽为 980px
- 手机端网页中 html 的默认宽等于浏览器宽为 980px
- body 为块级元素，在设置 margin: 0;时，body 的宽等于 html 宽等于 980px

在 PC 端，通常一个物理像素就等于 1 个 px 逻辑像素

验证方案

新建一个网页，啥也不写，注释掉 viewport 适配代码：

<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0" /> -->

把 body 的默认外边距去掉，即添加如下 css 样式

body {
  margin: 0;
}

在 PC 端，浏览器中右击审查元素，点击 body 或 html 来查看对应的盒模型，即宽默认为 1920px（因为我电脑分辨是 1920 *1080），浏览器不要缩放。

点击控制台右上角的手机按扭，把浏览模式切换到手机端，然后查看 body 的默认宽度

你可能会有一个疑问？为什么移动端 body 的默认宽要设置为 980px 呢？先不急，后面我会给出答案

# 2、如果把一个 PC 端的网站，在手机端显示打开，会看到什么样的效果？

TIP

当我们把 PC 端布局的页面（内容宽为 980px)，直接放在移动端来显示，会发现整体被压缩变小。具体如下图

pc 端显示效果

移动端 iPhone SE 下显示效果

为什么 PC 端 980px 的内容，放在移动端的 iPhone SE 下显示时，会被压缩变小呢？

因为移动端的浏览器默认宽为 980px，而要把浏览器整个显示在 iPhone SE 的屏幕下，而 iPhone SE 的可视宽只有 375px，所以整个浏览器就会被压缩（缩放）到 375px 大小。则浏览器中的内容也要等比例压缩到到宽为 375px 的屏幕里。

如果电脑端网站的宽 > 980px ，则在移动端会出现水平滚动条，拖动滚动条可查看全部内容
如果电脑端网站的宽 < 980px ，则在移动端并不能全屏展示，会在水平上留有空白

很多时候，要在真机上测试，才能看到效果

div 宽 680px 在 iPhone SE 下效果	div 宽 1280px 在 iPhone SE 下效果

# 3、为什么移动端 body 的默认宽为 980px

TIP

很早之前，电脑的分辨率比较低，写一个电脑端的网站基本都是在980px以内。

为了让980px的网站可以在手机完美显示出来，浏览器开发商把浏览器的默认宽设置为了980px，也就是我们后面要提到的布局视口宽。

移动端是在这个布局视口来布局网页，所以移动端网页的 html 默认宽为980px，body 是块级元素，在设置margin: 0;时，其宽会等于 html 的宽980px。

但是 PC 端的网页在移动那么小的屏幕里看时，会被压缩，所以需要通过双指来放大网页才能看得更清楚，本质上体验还是没有达到最佳状态。

那如何才能让手机端看到的网页是最佳的状态呢？

那肯定要专门针对移动端的尺寸大小来设计和布局网页。但是移动端尺寸五花八门，没有办法把浏览器的大小固定到某个尺寸，这就有了接下来提出的 viewport 视口的概念。

# 4、视口分类

TIP

在 PC 端，视口指的是浏览器的可视区域，其宽度和浏览器窗口的宽度保持一致。

移动端涉及三个视口：布局视口(Layout Viewport)、视觉视口(Visual Viewport)、理想视口(Ideal Viewport)

# 4.1、布局视口(Layout Viewport)

TIP

布局视口可以简单理解为移动端网页的宽度（浏览器宽），也就是我们在上面提到的 html、body 的默认宽为 980px。
默认我们是在这宽为 980px 的容器中来布局网页。

20200910162534756

# 4.2、视觉视口（visual layout）

TIP

用户在默认情况下能看到的网站的区域
默认情况下浏览器大小会被压缩来适应视觉视口大小，所以默认情况下看到的内容大小要比实际小很多

20200910162647164

# 4.3、理想视口（ideal layout）

TIP

当布局视口 = 视觉视口时，就是我们期待的理想视口。
理想视口下，浏览器大小与视觉视口大小相等，内容不会被压缩）

20200910162708498

# 4.4、案例演示

在页面新建一个 div，代码和样式如下：

<style>
  body {
    margin: 0;
  }
  .box {
    width: 375px;
    height: 200px;
    background: linear-gradient(to right, pink, skyblue);
  }
</style>
<body>
  <div class="box"></div>
</body>

在未设置 viewport 适配时的大小如下：

375px的盒子，是在布局视口980px上绘制，然后980px的布局视口会被压缩到375px大小的屏幕里显示，所以整个内容都会被同比例压缩

添加如下 viewport 适配代码，效果如下

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

注：

width=device-width 表示布局视口=设备视口（视觉视口）
所以这个时候 布局视口 = 视觉视口 = 375px ，内容是在375px的布局视口中显示
而布局视口正好和视觉视口相等，所以不会被压缩，正好全屏显示正常大小。

# 5、viewport 的设置

TIP

为了让移动端能正常的显示网页，我们通常会在网页的<head>标签中添加如下代码

<meta
  name="viewport"
  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>

<!-- 推荐写法 - 不要禁止用户缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

属性	值
width	设置布局视口的宽当 width=device-width 时，即布局视口=视觉视口，也就达到了我们想要的理想视口
initial-scale	设置页面的初始缩放值，为一个数字，可以带小数，值为 1，表示不缩放
minimum-scale	允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale	允许用户的最大缩放值，为一个数字，可以带小数
height	设置 layout viewport 的高度，这个属性对我们并不重要，很少使用
user-scalable	是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes 代表允许

/*JS 获取视口宽 */
document.documentElement.clientWidth
/* 获取屏幕尺寸 */
screen.width

# 四、真机查看

TIP

深入浅出真机查看完整步骤

# 1、创建本地服务器

TIP

通过 VSCode 来创建本地服务器，在 VSCode 通过 Open with Live Server 打开网页，在地址栏中就能看到类似以下的地址：http://127.0.0.1:5500/demo.html

# 2、查看本机 IP 地址

TIP

在电脑的右下击输入 cmd,然后回车，就可以进到电脑的命令黑窗口

在命令黑窗口，输入 ipconfig ，然后回车，就能看到 IPv4 地址

注：

我们将本地服务地址：http://127.0.0.1:5500/demo.html 中的 127.0.0.1 替换成 192.168.0.19

修改完成后的最终地址：http://192.168.0.19:5500/demo.html ，然后回车看在电脑端是否能正常访问到。

如果能正常访问，这一步就 ok 了 ! 如果不能访问，则还需要以下两步操作：

关闭电脑的防火墙
确保手机与电脑在同一网络

# 3、关闭电脑防火墙

TIP

在电脑左下角，搜索 “ 控制面板 ” ，点击控制面板进入

点击系统和安全，进入

点击 windows Defender 防火墙

点击左边的启用或关闭 Windows Defender 防火墙

按下图要求，关闭防火墙

# 4、手机端访问地址

TIP

防火墙关闭后，要确保手机和电脑是在同一网络中

方法一：电脑开热点，手机连电脑热点
方法二：电脑手机连同一无线网

网络环境设置好了后，接下来只需在在手机端防问 http://192.168.0.19:5500/demo.html 就可以正常访问了。

也可以把地址在草料网生成对应的二维码，手机直接扫二维码访问。

# 五、移动开发中常用的单位

TIP

开发中常用的单位有：px、%、em、rem、vw/vh/vmax/vmin

移动开发中，这些单位的应用场景

单位	说明
px	绝对单位，当需要设置固定宽高时可用，也可用于设置字体大小
%	相对单位，可用来设置元素宽度，流体布局中会用到
em	相对单位设置字体大小时，1em=父元素字体大小设置其它，比如宽、高等，1em=自身字体的大小一般用来控制首行缩进，通常不用来布局
rem	rem（root element) 是相对于 html 的 font-size 的字体大小。 1rem=根元素（html）的字体大小 rem 主要是用来做移动端布局
vw/vh	相对单位，是视口单位，用来移动端布局，vw 用的多，vh 基本不用 1vw=视口宽度的 1% 1vh=视口高度的 1%
vmax	当前 vw 和 vh 中较大的一个值（竖屏时，100vmax=100vh）
vmin	当前 vw 和 vh 中较小的一个值（竖屏时，100vmax=100vw）

# 1、em 相对单位

TIP

设置字体大小时，1em=父元素字体大小
设置其它，比如宽、高等，1em=自身字体的大小

<style>
  .box {
    font-size: 20px;
  }
  .item {
    /* em相对于父元素font-size大小，所以2em=2*20=40px */
    font-size: 2em;
    /* em相对自身字体大小，即em=40px，所以6em=240px */
    width: 6em;
    height: 6em;
    background-color: khaki;
  }
</style>
<body>
  <div class="box">
    <div class="item">字体大小为2em=40px</div>
  </div>
</body>

# 2、rem 相对单位

TIP

rem（root element) 是相对于 html 的 font-size 的字体大小。
1rem = 根元素（html）的字体大小
rem 主要是用来做移动端布局（后面移动端项目会讲到）

<style>
  html {
    font-size: 20px;
  }
  .box {
    /* rem相对于html根元素font-size大小，即1rem=20px，所以10rem=200px */
    width: 10rem;
    /* 5rem=5*20=100px */
    height: 5rem;
    background-color: skyblue;
  }
</style>
<body>
  <div class="box"></div>
</body>

# 3、vw/vh 相对单位

TIP

1vw = 视口宽度的 1%
1vh = 视口高度的 1%

<style>
  body {
    margin: 0;
  }
  .box {
    /* 100vw 等于当前视口宽 */
    width: 100vw;
    /* 100vh 等于当前视口高  */
    height: 100vh;
    background-color: khaki;
  }
</style>
<body>
  <div class="box"></div>
</body>

# 4、vmax 和 vmin

TIP

vmax 当前 vw 和 vh 中较大的一个值（竖屏时，100vmax = 100vh）
vmin 当前 vw 和 vh 中较小的一个值（竖屏时，100vmin = 100vw ）

<style>
  body {
    margin: 0;
  }
  .box {
    /* 
            假设现在手机浏览器视口大小为：375 * 667px
            50vmin=50 * 375px=187.5px
            50vmax=20 * 667px=333.5px
        */
    width: 50vmin;
    height: 50vmax;
    background-color: skyblue;
  }
</style>
<body>
  <div class="box"></div>
</body>

# 六、移动开发常见问题

TIP

深入浅出移动端项目开发的常见问题

# 1、去掉图片下方空白间隙

TIP

默认情况下，图片会与其下方的元素产生一段空白的间隙，我们可以通过给图片添加以下样式来消除此空隙。

img {
  vertical-align: top; /* */
}

完整示例

<style>
  .box img {
    width: 200px;
    border: 1px solid red;
    vertical-align: top;
  }
  .box p {
    margin: 0;
    height: 20px;
    background-color: khaki;
  }
</style>

<div class="box">
  <img src="./images/pic1.png" alt="" />
  <p></p>
</div>

未加 vertical-align: top; 前	加 vertical-align: top; 后

# 2、元素宽高等比缩放

GIF2025-7-816-26-47

以下代码实现了元素按 宽：高=16：9 的比例等比缩放

常用于实现 PC 端响应式开发 + 移动端百分比布局时

<style>
  .box {
    width: 25%;
    /* border: 1px solid red; */
  }
  .box .bl16-9 {
    --bl: calc(9 / 16 * 100%);
    /* 利用 padding-top 来撑开元素的高，
        padding-top 百分比是相对于当前元素的父元素宽而言，而当前元素宽与父元素宽一样，则相当于元素的高是相对于当前元素的宽而言。
        */
    padding-top: var(--bl);
    background-color: khaki;
    position: relative;
  }
  .box .content {
    position: absolute;
    inset: 0;
  }
</style>

<!-- 元素宽高比为 16：9 等比缩放 -->
<div class="box">
  <div class="bl16-9">
    <div class="content">元素宽高比为 16：9 等比缩放</div>
  </div>
</div>

# 3、图片等比缩放

GIF2025-7-816-24-32

素材下载：

处理这个问题的意义

在实际的网站上线后，数据都是从后台读取的，用户在上传图片尺寸时，并不一定会按照设计师设计的比例来上传，这样就会造成图片上传后，大小不一样。

图片高度过小，会在下面留下空白，
图片高度过大，会有一部分下面的内容看不到
我们实际在设计一张图时，重要的内容会在中间显示，所以最理想的效果是让图片能水平垂直居中于容器中

要实现图片按一定的宽高比等比缩放，可以先将图片的直接父元素实现宽高等比缩放，然后再给图片添加如下代码

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

完整示例

<style>
  .box {
    width: 25%;
  }
  .box .bl16-9 {
    --bl: calc(9 / 16 * 100%);
    padding-top: var(--bl);
    background-color: khaki;
    position: relative;
  }
  .box .content {
    position: absolute;
    inset: 0;
  }
  .box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
</style>

<!-- 元素宽高比为 16：9 等比缩放 -->
<div class="box">
  <div class="bl16-9">
    <div class="content">
      <img src="./images/pic1.png" alt="" />
    </div>
  </div>
</div>

GIF2025-7-816-24-32

# 4、背景图等比缩放

TIP

当背景图片的宽高比与容器的宽高比不一样时
我们希望不管容器宽高如何缩放，图片一直填充整个容器，然后水平垂直居中显示

GIF 2022-8-16 18-50-31

素材下载：

要实现背景图片宽高等比缩放到容器中，只需要添加以下 css 即可

/* 背景图填充整个容器 */
background-size: cover;

完整示例

<style>
  body {
    margin: 0;
  }
  .box {
    width: 100vw;
    height: 31.467vw;
    /* 背景图片  不重复  水平垂直居中显示 */
    background: url(./images/banner1-@2x.png) no-repeat center;
    /* 背景图填充整个容器 */
    background-size: cover;
  }
</style>
<body>
  <div class="box"></div>
</body>

# 5、2 倍精灵图使用

TIP

精灵图采用的是 2 倍图
所以在处理精灵图时，我们需要通过 background-size: 50%; ，来将背景图片大小缩小一半
测量尺寸时，也需要按一半的大小来测量

比如下面这种图就是一个二倍精灵图，整个图大小 401 * 123px

素材下载：

测量尺寸：

s_sprite

现在我们要在页面插入第二排第二个精灵图，同时实现等比缩放效果

先按正常 px 单位来实现，代码如下：

<style>
  .icon-play {
    width: 26px;
    height: 26px;
    border: 1px solid red;
    background-image: url(images/sprite.png);
    background-position: -36px -29px;
    background-size: 200px;
  }
</style>
<body>
  <div class="icon-play"></div>
</body>

最后转换成对应 vw 单位，如下：

<style>
  .icon-play {
    width: 3.467vw;
    height: 3.467vw;
    border: 0.133vw solid red;
    background-image: url(images/sprite.png);
    background-position: -4.8vw -3.867vw;
    background-size: 26.667vw;
  }
</style>
<body>
  <div class="icon-play"></div>
</body>

# 6、经典的 1 像素问题

TIP

在面试中，经常会问到移动端 1px 的处理问题，那到底 1px 问题，是个什么问题呢？

# 6.1、何为 1 像素问题

TIP

为了更好的理解 1 像素问题，我们从两个方面来展开讲解

PSD 设计稿
1px 实际显示的大小

PSD 设计稿

我们的设计稿是以 750px 宽来设计的，而我们实际开发时，代码是按 375px 来的。
在 750px 设计稿中的 1px，按我们实际的开发代码来说，要折半，折成 0.5px 才对。
但是不同手机上，不同浏览器对小数的处理是不一样的
0.5px 在一些老的 IOS 和 Android 设备上不支持，他会把低于 0.5px 当成 0 来处理，>= 0.5px 当成 1px 来显示。
IOS 上会把>= 0.75px 的当作 1px 来处理，< 0.75 当成 0.5px 来处理 < 0.5px 当成 0 来处理
而且 IOS 上，用 height: 1px 来代替 border-bottom: 1px solid red;测出的效果不同
不同的手机上，效果不一样，具体以真机测试为主
所以直接把代码折半，设置成 0.5px 显然是达不到目的。

如何解决这个问题，我们讲完下面这个问题再来解答。

1px 实际显示的大小

TIP

我们都知道 1px 在 dpr 不同时，其显示的大小不同，如下

dpr=1	dpr=2	dpr=3

1px 就用一个物理像素显示	1px 就用 4 个物理像素来显示	1px 就用 9 个物理像素来显示

而在设计师眼中，他设计的 1px，就是当前设备能显示的最小方格（最细的那个线），也就是物理像素中的 1 像素。

所以在不同 dpr 下，显示的 1px 的线的宽度是下面图标出的蓝色的高度大小（1 物理像素大小）

dpr=1	dpr=2	dpr=3

因此， 1px 像素问题，本质上不是问题，如果公司觉得没有必要，也就不用处理。
如果公司认为就是要用设备能显示的最细的那个小方格显示，那我们就要处理这个问题。

# 6.2、1px 像素解决方案

TIP

关于 1px 像素的处理方案有很多，这里我们提供一个最优的解决方案给到大家 transform+伪元素来实现

实现原理：

利用伪元素来绘制 1px 的线条,然后利用定位，把线条放在对应位置
利用 media 查询判断不同的设备像素比对线条进行缩放

<style>
  .box {
    height: 50px;
    margin: 0 auto;
    position: relative;
  }
  .border-1px::before {
    position: absolute;
    content: "";
    height: 1px;
    width: 100%;
    background-color: red;
    bottom: 0;
    /* transform: scaleY(0.5); */
    /* 变换原点 */
    transform-origin: 50% 0%;
  }
  /* dpr=2，需要缩放一半，即0.5 */
  @media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .border-1px:before {
      transform: scaleY(0.5);
    }
  }
  /* dpr=3，需要缩放到1/3，即0.33 */
  @media only screen and (-webkit-min-device-pixel-ratio: 3) {
    .border-1px:before {
      transform: scaleY(0.33);
    }
  }
</style>
<body>
  <div class="box border-1px"></div>
</body>

当然，也可以通过 js 来判断 dpr,然后给元素添加对应的 Class 名字，来实现

if (window.devicePixelRatio && devicePixelRatio >= 2) {
  document.querySelector(".box").className = "border-1px";
}

你可以电脑端，打开头条的移动端或腾讯新闻 (opens new window)，查看头条的 1px 解决方案，和我们这里讲到的是一个逻辑

← filter 滤镜 + mask 遮罩+backdrop-filter + backface-visibility 移动 WebApp 项目开发常用技术及标准、规范和最佳实践 →

大厂最新技术学习分享群

微信扫一扫进群，获取资料

# 移动端开发核心基础必备知识

# 一、什么是移动 Web、PC web 和 web App 开发

# 二、移动 Web 与 PC Web 开发区别

# 1、屏幕大小不同

# 2、交互方式不同

# 3、网络环境和设备性能的不同

# 4、兼容性不同

# 三、像素、分辨率、物理像素、逻辑像素、设备像素比

# 1、什么是像素

# 1.1、 图标尺寸 n * m 像素

# 1.2、1 像素（1 个小方格）多大？

# 2、什么是分辨率

# 2.1、分辨率与屏幕的关系

# 2.2、分辨率大小影响什么？

# 3、什么是物理像素与逻辑像素、设备像素比

# 3.1、物理像素（设备像素 dp）

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

# 3.3、设备像素比 (dpr)

# 3.4、 图片缩放，是在改变什么？

# 4、为什么要有物理像素和逻辑像素之分

# 5、如何让相同尺寸下不同分辨率，看同一图片效果差别不大？

# 6、什么是标清屏和高清屏

# 7、移动开发为什么要使用 2 倍或 3 倍图

# 三、viewport 视口

# 1、在 pc 端和移动端，网页中 html,body 的默认宽是多少 ？

# 2、如果把一个 PC 端的网站，在手机端显示打开，会看到什么样的效果？

# 3、为什么移动端 body 的默认宽为 980px

# 4、视口分类

# 4.1、布局视口(Layout Viewport)

# 4.2、视觉视口（visual layout）

# 4.3、理想视口（ideal layout）

# 4.4、案例演示

# 5、viewport 的设置

# 四、真机查看

# 1、创建本地服务器

# 2、查看本机 IP 地址

# 3、关闭电脑防火墙

# 4、手机端访问地址

# 五、移动开发中常用的单位

# 1、em 相对单位

# 2、rem 相对单位

# 3、vw/vh 相对单位

# 4、vmax 和 vmin

# 六、移动开发常见问题

# 1、去掉图片下方空白间隙

# 2、元素宽高等比缩放

# 3、图片等比缩放

# 4、背景图等比缩放

# 5、2 倍精灵图使用

# 6、经典的 1 像素问题

# 6.1、何为 1 像素问题

# 6.2、1px 像素解决方案

# 1.1、图标尺寸 n * m 像素

# 3.4、图片缩放，是在改变什么？

# 1、在 pc 端和移动端，网页中 html,body 的默认宽是多少？