这是我参与「第五届青训营」伴学笔记创作活动的第 14 天

二、移动端基础概念

1. 背景介绍

1）时代发展

随着移动互联网的快速发展，加之移动智能设备的迅速普及，传统 PC 端网站已逐渐向移动端转移和扩展

用户每天在移动端上网的时间已经远远超过了PC端，并且随着用户纷纷转向移动互联网，作为H5全栈工程师，掌握移动端Web开发技术的也显得尤为重要

2）移动端产品

三种主要形式：Native App、Hybird App、Web App

3）移动端APP分类与区别

Native App（原生APP：苹果IOS、安卓Android）
- 技术：JAVA、C++、Object-C等；基于本地操作系统运行
- 优点：能够调用原生API，性能更好
- 缺点：开发周期较长，发布APP流程繁琐，更新体验较差，不跨平台
Hybird App
- 技术：结合了Native开发和Web技术，能够轻松使用跨平台Web技术，在需要时直接访问原生API，但性能稍慢
Web App
- 技术：HTML+CSS+JavaScript；基于移动终端浏览器运行
- 优点：开发成本较低，升级较轻松，维护比较简单，能够跨平台
- 缺点：不能调用原生API

2. 移动设备

1）屏幕

移动端设备与 PC 设备最大的差异在于屏幕，这主要体现在屏幕尺寸和屏幕分辨率两个方面，通常我们所指的屏幕尺寸，实际上指的是屏幕对角线的长度（一般用英寸来衡量）如下图所示，而分辨率则一般用像素px来衡量，表示屏幕水平和垂直方向的像素数

2）屏幕尺寸

平时我们通常提到手机的尺寸，比如 iPhone6 是 4.7 英寸的，手机的屏幕是以英寸为单位的。我们平时使用最多的单位是：毫米、厘米、米。对于英寸并不熟悉，首先我们先来换算一下单位：1英寸（inch）= 2.54 厘米（cm）

屏幕尺寸：手机屏幕对角线的长度，单位是英寸(1英寸 = 2.54 厘米)

常见的尺寸有：2.4，2.8，3.5，3.7，4.2，5.0，5.5，6.0

3）屏幕分辨率

屏幕分辨率：指横纵方向上的像素点数，单位为 px, 1px = 1 个像素点

一般以纵向像素 * 横向像素表示一个手机的屏幕分辨率。如：1960 * 1080

这里的一个像素是指物理设备的一个像素点

在同一个设备上，它的像素个数是固定的，这是厂商在出厂时就设置好了的。只有不同的设备之间，才有像素大小的区别

4）屏幕像素密度

屏幕像素密度也叫像素密度或屏幕密度

屏幕像素密度：屏幕上每英寸可以显示像素点的数量，单位是ppi（pixels per inch）

屏幕像素密度与屏幕尺寸和屏幕分辨率有关。他们之间有一个公式：

中文：ppi = 开方（横向平方 + 纵向平方） / 屏幕尺寸

js：ppi = Math.sqrt(Math.pow(w,2)+Math.pow(h,2))/屏幕尺寸(英寸)

Math.sqrt()

Math.pow()

PPI 表示每英寸所拥有的像素数目，数值越高，代表屏幕是以更高的密度显示图像。

PPI 值越大说明单位尺寸里所能容纳的像素数量越多，所能展现画面的品质越高，反之越粗糙 PPI > 320 屏幕分辨率越清晰

5）高清屏

高清屏（Retina）的概念，主要是从乔布斯发布的 Retina 设备开始的，Retina 显示屏又叫做视网膜屏，事实上，Retnia 这个词更接近于一个营销名词而非技术名次。因为从某种意义上来说，这是苹果为宣传自己的产品所创造出的名词。苹果也的确为这个名词申请了专利

主要功能：

把更多的像素点压缩至一块屏幕上，具备足够高的物理像素密度从而使人体肉眼无法分辨其中单独像素点的液晶屏。

特点：

一种具备超高像素密度的液晶屏
同样大小屏幕上显示的像素点由一个变成多个
高清屏和普通屏的区别
高清屏（Retain）和普通屏相比，相同区域的物理像素点数，高清屏是普通屏的4倍

苹果手机分辨率

注：屏幕大小和分辨率是没有关系的，屏幕大的分辨率不一定高

组件库项目文档库的移动端知识2 | 青训营笔记