AI 摘要

文章系统梳理移动 Web 开发核心要点：先剖析多终端、多浏览器、性能瓶颈等行业现状，对比 PC 与移动在分辨率、视口、交互上的差异；继而详解英寸、像素、DPI、PPI、CSS 像素、设备像素比等基础概念，厘清布局视口、视觉视口、理想视口三者关系与 meta viewport 设置；最后给出移动优先、理想视口匹配、相对单位 em/rem 等实战原则，为响应式与 Bootstrap 框架实践奠定扎实基础。

此摘要根据文章内容自动生成，仅用于文章内容的解释与总结

移动前端概述

移动行业现状

移动前端前景明朗，但仍有很多问题需要解决：

  • 浏览器种类繁多，参差不齐，对网页的渲染和交互效果各有不同。
  • 网速仍然是性能瓶颈。
  • 前端开发框架很多，学习难度大，门槛高。

移动前端开发有的趋势和特点：

  • 响应式设计：为了适应不同尺寸的移动设备屏幕，响应式设计成为了常见的选择，确保网站或应用在各种设备上都能提供良好的用户体验。
  • Progressive Web Apps (PWA)：PWA 结合了 Web 技术和原生应用的优势，提供了更流畅、更类似原生应用的体验。
  • 前端框架和库：像 React、Vue.js、Angular 等前端框架和库在移动端开发中广泛使用，它们提供了高效的开发方式和丰富的功能。
  • 跨平台开发：通过使用跨平台开发技术，如 React Native 或 Flutter，可以用一套代码构建适用于多个移动平台的应用。
  • 性能优化：移动设备上的网络连接和硬件资源有限，因此性能优化对于提供快速加载和流畅的用户体验至关重要。
  • 移动优先策略：许多开发团队现在采用移动优先的方法，首先关注移动端的设计和功能，然后再考虑桌面端。
  • 混合应用开发：一些项目可能结合了原生和 Web 技术，以充分利用两者的优势。

移动网页开发与 PC 网页开发的区别

移动网页开发与 PC 网页开发的区别：

  • 终端设备和浏览器各不相同。
  • 分辨率不同：PC 端常见的分辨率如 1920*1080 等，而不同品牌的移动端设备有不同的分辨率。
  • 视口不同：PC 端视口只有一个浏览器窗口，而移动端中有布局视口、视觉视口、理想视口。
  • 输入特性不同：PC 端可以通过键盘和鼠标来响应用户操作，而移动端中以触摸事件为主来响应用户操作。

移动端开发环境

移动端浏览器的类型

移动端常见的浏览器类型：

  • 内置浏览器，如 Safiar、Chrome、Firefox、Opera mini、UC Mini 等。
  • 可下载浏览器，如 UC 浏览器、夸克浏览器等。
  • 代理浏览器：如世界之窗浏览器等。
  • WebView：如微信内置浏览器等。

移动端开发测试环境

使用 Chrome 内核浏览器（如 Edge 浏览器等）作为移动开发测试浏览器的原因：

  • 很多的手机浏览器都用 Webkit 作为渲染引擎，调试效果好。
  • 学习成本较低。

在 Edge 浏览器中，可以单击右键 - 检查，进行代码调试。

移动端布局基础

英寸

一般用英寸描述屏幕的物理大小，英寸即屏幕对角线的长度。

1 英寸 = 2.54 厘米。

像素和分辨率

像素是构成数字图像的基础单元。每个像素能够显示一种颜色，整个图像由许多这样的像素组成。像素越高，画面就越精细。

分辨率描述了图像或屏幕中像素的数量和密度，通常用来表示图像的清晰度。如 1920*1080 分辨率，这意味着图像的宽度方向有 1920 个像素，高度方向有 1080 个像素。

DPI 和 PPI

DPI（Dots Per Inch）是打印领域中使用的术语，表示每英寸打印点数，用来衡量打印机打印分辨率和打印质量。更高的 DPI 表示打印出的图像有更高的清晰度和更细腻的细节。

PPI（Pixels Per Inch）是指每英寸像素数，用来描述屏幕显示密度。PPI 越高，屏幕能够显示的像素就越密集，因此图像细节越清晰，PPI 是衡量屏幕分辨率的重要指标。

CSS 像素和物理像素

CSS 像素又称独立像素，是 Web 设计中的逻辑像素，它是一个抽象单位，用于在 CSS 中定义样式，如元素宽度、字体大小等。

物理像素（Device Pixels）又称设备像素，是指屏幕显示中的实际像素点，也就是组成屏幕显示的最小物理单元。物理像素的数量是固定的，由显示设备的硬件特性决定，比如一个 1080P 的显示屏幕，其物理像素是 1920*1080。

一个 CSS 像素可能会跨越多个物理像素。

在 iPhone4 使用的视网膜屏幕中，把 2x2 个物理像素当 1 个 CSS 像素使用，这样让屏幕看起来更精致，但是元素的大小却不会改变。

设备像素比

设备像素比（Device Pixel Ratio，DPR）是一个描述屏幕显示密度的数字指标，它表示 CSS 像素和物理像素之间的比例关系。

DPR = 物理像素 / CSS 像素。

移动端视口

视口简介

浏览器显示网页页面内容的屏幕区域被称为视口（viewport）。

视口分为：布局适口（layout viewport）、视觉视口（visual viewport）、理想视口（ideal viewport）。

布局视口

布局视口是网页布局的基准窗口。

在 PC 浏览器上，布局视口就等于当前浏览器窗口中显示的内容大小。

在移动端，布局视口被赋予一个默认值，大部分为 980px，布局视口机械地将 PC 端网页在手机端上呈现。

视觉视口

视觉视口是用户通过屏幕真实看到的区域。

视觉视口默认等于当前浏览器的窗口大小。

当用户对浏览器进行缩放时，不会改变布局视口的大小，所以页面布局是不变的，但是缩放会改变视觉视口的大小。

理想视口

理想视口是移动设备上为了最佳用户体验而定义的视口大小。

理想视口的目标是使网页在不同设备上看起来都是正好合适的，即不需要用户进行缩放就能以最佳格式查看内容。

理想视口的大小取决于网页的内容和布局，通常应该与布局视口的大小相同。

视口标签的使用

在 HTML 中，可以 meta 标签来指定视口大小和缩放比例。

视口标签的基本用法：

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

视口标签的基本属性：

名称描述
width定义视口的宽度，单位为像素
width=device-width 相当于让布局视口等于理想视口
user-scaleable定义是否允许用户手动缩放页面，默认值为 yes
initial-scale定义初始缩放值，取值范围为 0.0~10.0
initial-scale=1 相当于让视觉视口等于理想视口
maximum-scale定义最大的缩放程度，取值范围为 0.0~10.0
minimum-scale定义最小的缩放程度，取值范围为 0.0~10.0

示例：视口标签

入口页面（index.html）：

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p>这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本</p>
</body>
</html>

示例效果：

入口页面（index.html）：

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

示例效果：

移动网页开发

移动端网页开发原则

为了在移动端让页面获得更好的显示效果，我们必须让布局视口、视觉视口尽可能等于理想视口。

为了在移动端让页面获得更好的显示效果，我们必须选择合理的尺寸单位。

  • 相对单位：如 em、rem、vw、vh 等。
  • 绝对单位：如 cm、pt、px 等。

使用 em 布局网页内容

em 是相对长度单位，会相对于父级的字体大小而发生变化。

示例：使用 em 布局网页内容

入口页面（index.html）：

<div style="font-size: 32px;">
    <p style="font-size: 2em">这是一段文本</p>
</div>
<div>
    <p>这是一段文本</p>
</div>

示例效果：

使用 rem 布局网页内容

rem 是相对长度单位，会相对于 html 元素（根元素）的字体大小而发生变化。

html 元素的字体大小默认为 16px。

示例：使用 rem 布局网页内容

入口页面（index.html）：

<p style="font-size: 2rem;">这是一段文本</p>

示例效果：