Hello World

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

TIP

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

  • 移动端开发核心基础知识
  • Swiper 插件应用
  • 移动端 5 种常见布局技术
  • 移动端事件
  • 移动端开发常见问题
  • 移动 web 开发性能优化

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

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

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

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

TIP

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

什么是 web 开发？

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

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

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

什么是 App 开发？

APP 是 Application 的缩写，指应用程序，一般指手机软件。

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 端效果

image-20220905165631840

移动端效果

image-20220905165821830

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

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

image-20220810144430174

# 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 倍)和我们说的把一个图片放在 24 倍是不一样的。
fish image-20220810153311772

注：

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

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

# （1） 图标尺寸 n * m 像素

TIP

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

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

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

TIP

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

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

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

# 2、什么是分辨率

TIP

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

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

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

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

image-20220621163650943

# （1）、分辨率与屏幕的关系

TIP

我们将屏幕划分成许许多多的小方格子，我们知道 1 个小方格就代表 1 像素。比如屏幕宽有 n 个小方格，高有 m 个小方格，那屏幕的分辨率就是 n * m像素 。

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

屏幕是如何划分小方格？

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

px2022-08-02

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

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

# （2）、分辨率大小影响什么？

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

比如：在 15.6 英寸的显示屏

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

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

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

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

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

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

详细了解三者之间的差异

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

TIP

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

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

TIP

  • 用于表示图片尺寸等，可时刻改变的像素称作逻辑像素，也叫设备独立像素（device independent pixels) ，简称 dip
  • 也就是我们通常说的 CSS 像素，比如100px 、200px等
  • 浏览器内的一切长度都是以 CSS 像素（逻辑像素）px 为单位的。

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

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

# （3）、设备像素比 (dpr)

TIP

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

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

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

  • 当 dpr=1 时，说明物理像素和逻辑像素是 1：1，此时一个物理像素显示一个逻辑像素
  • 当 dpr=2 时，说明物理像素是逻辑像素的 2 倍，此时 2*2=4 个物理像素显示 1 个逻辑像素

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

  • dpr=1 的手机分辨率是2*4像素
  • dpr=2 的手机分辨率是4*8像素

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

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

image-20220801225004710

注：

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

image-20220621151918319

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

# （4） 图片缩放，是在改变什么？

TIP

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

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

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

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

图片原始尺寸32*32px，其占的格子数32* 32
image-20220810153311772
图片放大两倍后尺寸大小64 * 64px ，其占的格子数 64 *64
image-20220810161832777

结论：

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

# 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）
f f2

现在我把两张图，以相同大小 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）上来查看下效果，其效果截图如上：

image-20220810164949593

从效果图中

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

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

你可能是这样来理解的(错误) 实际要这样来理解(正确)
标清屏下的一个点，分到高清屏下占 4 个点，如下图所示 在高清屏中 1 个 CSS 像素点实际上有 4 个逻辑像素展示，1 分成 4，显然不够分，只能颜色近似选取，如下图所示
20220802161942 20220802162256
这样看起来是会更清淅，但是这样理解是不对的，图片实际测试的结果不是高清，而是模糊了。 于时，图片感觉就会变的模糊了。

TIP

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

fish-2022-8-22

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

image-20220802164804505

放大拉伸后的效果

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

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

image-20220802165928330

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

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

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

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

# 三、viewprot 视口

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），浏览器不要缩放。

image-20220802132023399

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

image-20220802132355074

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

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

TIP

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

pc 端显示效果
image-20220802143746136
移动端 iPhone SE 下显示效果
image-20220802143807765

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

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

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

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

div 宽 680px 在 iPhone SE 下效果 div 宽 1280px 在 iPhone SE 下效果
image-20220802145823386 GIF 2022-8-2 14-59-03

# 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)

# （1）布局视口(Layout Viewport)

TIP

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

20200910162534756

# （2）视觉视口（visual layout)

TIP

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

20200910162647164

# （3）理想视口（ideal layout)

TIP

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

20200910162708498

# （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 适配时的大小如下：

image-20220802154310777

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

  • 添加如下 viewport 适配代码，效果如下
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

image-20220802154420033

注：

  • 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"
/>
属性 值
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

# 四、真机查看

# 1、创建本地服务器

TIP

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

# 2、查看本机 IP 地址

TIP

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

image-20220802201045013

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

image-20220802201246684

注：

我们将本地服务地址：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

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

image-20220802202235915

点击系统和安全，进入

image-20220802202329704

点击 windows Defender 防火墙

image-20220802202408758

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

image-20220802202547810

按下图要求，关闭防火墙

image-20220802202704692

# 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>

image-20220823193520469

# 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>

image-20220823194034474

# 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>

image-20220823194341007

# 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
            20vmax=20 * 667px=133.39px
        */
    width: 50vmin;
    height: 20vmax;
    background-color: skyblue;
  }
</style>
<body>
  <div class="box"></div>
</body>

image-20220823195514953

上次更新时间: 6/8/2023, 9:23:17 PM

← 移动 WebApp 项目开发常用技术及标准、规范和最佳实践 →

大厂最新技术学习分享群

大厂最新技术学习分享群

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

X