1.三种APP
①.NativeApp 原生App
原生APP就是利用Android、iOS平台官方的开发语言、开发类库、工具进行开发。比如安卓的java语言，iOS的object-c 语言。在操作系统上直接运行的App。
前端技术也是可以开发原生App的，比如 ReactNative、Weex、WeX5、uni-app、Cardova、PhoneGap、Flutter等框架； 而且前端技术开发原生App，可以一次开发然后打包成不同的平台App。
优点：
拥有手机的各种功能的权限，比如获取个人信息，摄像头以及重力加速器等等。
性能最高，运行速度最快；即便加载大量的图片和动画，也依旧不卡。
手机用户无法上网也可访问APP应用中以前下载的数据。
缺点：
开发成本高，周期长。
安卓和ios都需要单独开发，且支持设备有限。
APP应用更新新功能，涉及到每次要向各个应用商店进行提交审核，审核期长。
②.WebApp
以Web开发语言(HTML、CSS、JavaScript)开发的，在浏览器上运行的App。其本质是浏览器功能的叠加。
优点：
支持范围广，兼容多种设备。
跨平台开发，用户通过浏览器访问，开发者更新仅需要通过服务器更新即可
开发成本低，周期短，可以即时上线。
缺点：
和原生App相比，性能和体验都大打折扣，对动画和图片支持较差
并不能访问手机的所有功能，很多权限受到限制，比如摄像头和GPS，重力加速器等
假如没有联网，则不能使用
③.HybridApp 混合App
即利用了原生APP的开发技术还应用了HTML5开发技术，是原生和HTML5技术的混合应用。混合比例不限。性能介于WebApp和原生App之间。
绝不部分大厂的App都早已是混合App的模式。
优点：
比web版实现功能多。
App的更新比较方便。
可离线运行。
缺点：
用户体验不如本地应用。
性能稍慢（需要连接网络）。
技术还不是很成熟。
2.屏幕
①.屏幕尺寸
指屏幕的对角线的长度，单位是英寸，1英寸=2.54厘米。
常见的屏幕尺寸有2.4、2.8、3.5、3.7、4.2、5.0、5.5、6.0等。
②.屏幕分辨率
指屏幕在横纵方向上的像素点数，单位是 px，1px = 1个像素点。
一般以横向像素x纵向像素来表示一个手机的分辨率，如1920x1080。
Iphone6/7/8 手机屏幕的分辨率都是 750 x 1334
③.屏幕像素密度
屏幕上每英寸可以显示的像素点的数量，单位是ppi，即“pixels per inch”的缩写。
屏幕像素密度与屏幕尺寸和屏幕分辨率有关，在单一变化条件下，屏幕尺寸越小、分辨率越高，像素密度越大，反之越小。
比如 iphone 3GS 和 iphone4，屏幕尺寸一样，屏幕分辨率相差一倍，屏幕像素密度也相差一倍。
计算像素密度的公式：
ppi：pixels per inch，屏幕上每英寸可以显示的像素点的数量，即屏幕像素密度。
dpi：dots per inch，最初用于衡量打印物上每英寸的点数密度，就是打印机可以在一英寸内打多少个点。当dpi的概念用在计算机屏幕上时，就称之为ppi。ppi和dpi是同一个概念，Android比较喜欢使用dpi，IOS比较喜欢使用ppi。
3.像素
1.3.1 三种像素
①.设备像素
设备像素（Device Pixel）也被称为物理像素,他是显示设备中一个最微小的物理部件。
每个像素可以根据操作系统设置自己的颜色和亮度。
任何设备的物理像素的数量都是固定的。
②.CSS像素
CSS像素（CSS Pixel） 也被称为逻辑像素。
CSS像素是一个抽象的单位，主要使用在浏览器上，用来精确的度量（确定）Web页面上的内容。
它是为web开发者创造的，在css或者javascript中使用的一个抽象的层，指的是我们在样式代码中使用到的逻辑像素，是一个抽象概念，实际并不存在。
在一个标准的显示密度下(普通屏)，一个CSS像素对应着一个设备像素。
③.设备独立像素
设备独立像素（Device Independent Pixel）,也叫与设备无关像素。
代表可以通过程序控制使用的虚拟像素。
设备独立像素是一个总体概念，包括了CSS像素；CSS中使用的像素是设备独立像素。
三者之间的关系：
设备独立像素是包含了CSS像素。
在普通屏幕下 1个设备独立像素 = 1个设备像素。
在高分屏或视网膜屏幕上，根据 ppi 不同我们可以得到不同的换算关系，一个设备独立像素可能会等于2~3个设备像素。
设备像素 物理像素（屏幕上真实的像素点个数，硬件）
设备独立像素（布局使用的设备独立像素）
CSS像素 逻辑像素 （设备独立像素包含CSS像素）
1.3.2 设备像素比
设备像素比 （devicePixelRatio） 简称 DPR ，有些地方也会成为缩放因子; 它的官方的定义为：设备物理像素和设备独立像素的比例。
计算公式:
DPR = 设备像素 / 设备独立像素，最小值为1.
JavaScript中获取屏幕的DPR:
console.log(window.devicePixelRatio);可以得到屏幕像素比
当设备像素比为1:1时，使用1（1×1）个设备像素显示1个CSS像素；
当设备像素比为2:1时，使用4（2×2）个设备像素显示1个CSS像素；
当设备像素比为3:1时，使用9（3×3）个设备像素显示1个CSS像素。
1.3.3 Retina(视网膜)屏幕 或 高清屏幕
ios称为视网膜屏幕。
Android称为高清屏幕
通常，我们把 DPR 大于 1 的屏幕成为高清屏， 苹果称为 Retina屏幕
1.3.4 位图像素
图片由像素组成。
一个位图像素是栅格图像(如：png, jpg, gif等)最小的数据单元。
1 个位图像素对应于1个物理像素，图片才能得到完美清晰的展示。
位图放大失真，矢量图放大不失真。
1X图375，2X图750(用css设置成375去显示)
4.视口viewport
1.4.1 视口的概念
视口 (viewport) 是用户网页的可视区域。
在CSS标准文档中，视口 (viewport) 被称为初始包含块, 这个初始包含块是所有CSS百分比宽度推算的根源，它给CSS布局限制了一个最大宽度。
在PC端，视口的宽度和浏览器窗口的宽度一致。而在移动端，视口分为布局视口(layout viewport)、视觉视口(visual viewport)和理想视口(ideal viewport)。
1.4.2 PC端视口
pc端就一个视口，初始包含块。
在 PC 端，视口指的是浏览器的可视区域，其宽度和浏览器窗口的宽度保持一致。我们改变浏览器窗口的大小，视口也随之改变。
获取视口大小:
window.innerWidth; 浏览器视口（viewport）宽度（单位：像素），如果存在垂直滚动条则包括它。
window.innerHeight; 浏览器窗口的视口（viewport）高度（以像素为单位）；如果有水平滚动条，也包括滚动条高度。
document.documentElement.clientWidth; 浏览器视口（viewport）宽度（单位：像素），不包含垂直滚动条。
document.documentElement.clientHeihgt 浏览器视口（viewport）高度（单位：像素），不包含水平滚动条
window.screen.width； 屏幕的宽度 (设备独立像素)。
window.scroll.height； 屏幕的高度 (设备独立像素)
1.4.3 移动端视口
①.布局视口 Layout Viewport
页面布局按照布局视口。
布局视口是在html元素之上的容器(包含块)，我们的页面就“装”在布局视口中。
获取布局视口的大小
document.documentElement.clientWidth;
document.documentElement.clientHeiht;
手机上，为了容纳为桌面浏览器设计的网站，默认的布局视口的宽度远大于屏幕的宽度。移动端浏览器默认布局视口大小是980px，980px是针对没做移动端的网页。没设meta，才可以测试出布局视口是980px。
②.视觉视口 Visual Viewport
不影响布局，大部分情况下与布局视口大小一致，用户缩放的时候，会变化。
视觉视口是指用户通过设备屏幕看到的区域，可以通过缩放来改变视觉视口的大小。
计算视觉视口的大小:
window.innerWidth;
window.inenrHeight;
移动端可以双指缩放，缩放改变的是CSS像素的大小，放大时CSS像素增大，则一个CSS像素可以跨越更多的设备像素，视觉视口会变小。
放大会使视觉视口变小：因为视觉视口也是通过CSS像素度量，而放大就是使CSS像素放大，假设屏幕上本来需要200个CSS像素才能占满屏幕，由于放大，现在只需要100个CSS像素就能占满，所以视觉视口的宽就变成100px。
③.理想视口 Ideal Viewport
理想视口是一种状态，当布局视口宽度等于设备屏幕宽度，此时就是理想视口。
理想视口是指网站在移动设备中的理想大小，这个大小就是设备的屏幕大小。
对于进行了移动适配的网页，我们希望让布局视口跟设备屏幕宽度一样大，这就就是理想的布局视口
设置布局视口等于理想视口：
<meta name=“viewport” content=“width=device-width”>
5.缩放
1.5.1 用户缩放
window.onresize视口尺寸发生变化的时候触发。
测试时改变的是缩放，不是视口大小。
①.PC端
用户缩放，会引起视口大小变化，影响布局
用户放大，视口变小（度量变小）
②.移动端
缩放会改变视觉视口的尺寸，用户放大，视觉视口变小。不会改变布局视口的尺寸，不影响布局。
1.5.2 系统缩放
只有移动端才有系统缩放。
系统缩放会影响布局视口和视觉视口，所以影响布局。
放大，布局视口变小。
通过<meta>标签设置 initial-scale 设置系统缩放比例。
<meta name=“viewport” content=“initial-scale=1.0” />
initial-scale是基于理性视口进行计算的, 值在 0.0 ~ 10.0 之间。
initial-scale 如果设置为 2.0， 布局视口会变为屏幕宽度的 1/2， 视觉视口也会变为屏幕宽度的 1/2。
6.Meta&Viewport
①.ViewPort 相关属性
width 正整数或device-width 定义视口的宽度，单位为像素。只能改变布局视口，不能改变视觉视口。
height 正整数或device-height 定义视口的高度，单位为像素，一般不用
initial-scale [0.0-10.0] 定义初始缩放值，与设备宽度比。可以改变布局视口和视觉视口。
maximum-scale [1.0-10.0] 定义放大最大比例
minimum-scale [0.0-1.0] 定义缩小最小比例
user-scalable yes / no 定义是否允许用户手动缩放页面，默认值 yes
viewport-fit auto/contain/cover 全面屏(刘海屏)设置
<meta name=“viewport” content=“initial-scale=1.0”>
注意：maximum-scale,minimum-scale,user-scalable对ios，sarfir没用，对Android，ios微信有用。
viewport 标签只对移动端浏览器有效，对 PC 端浏览器是无效的。
即使设置了 user-scalable = no，在 Android Chrome 浏览器中也可以强制启用手动缩放；ios上的Safari浏览器也是无效的。
②.width 与 initial-scale 都可以设置布局视口宽度，所以冲突。
会选择他们中计算的视口比较大的那一个。
③. 完美视口
布局视口和设备视口一样。
<meta name=“viewport” content=“width=device-width,inital-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,viewport-fit=cover”>
7.移动端基础知识总结
四个像素： 设备像素（物理像素）、设备独立像素、CSS像素、位图像素
三个视口： 布局视口、视觉视口、理想视口
两个操作： 放大 缩小
一个比例： 设备像素比 DPR
