01_移动端基础

基本概念：

屏幕尺寸：

屏幕对角线长度（英寸） 1英寸=2.54cm

屏幕分辨率：

横纵向上像素点数（物理像素）

屏幕密度：

每英寸上物理像素个数

高清屏：

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

视口尺寸：

代表横纵向上css像素个数

4个像素 3个视口 2个操作 1个比例

4个像素：

物理像素：
	(屏幕分辨率)设备成像最小单位，横纵向上像素点数
	 一个物理像素占据的实际屏幕尺寸，在不同设备上是不一样的。

css像素：
	浏览器的最小单位，抽象单位（css像素->物理像素）
	 一个css像素最终会转换成物理像素在屏幕成像。

	一个css像素到底占多少个物理像素，和谁有关？
	    屏幕特性 用户缩放行为
	    * 不考虑用户缩放：
	    	没有viewport：
	    		这块屏幕横向上占据多少个物理像素
	    		这块屏幕横向上占据多少个css像素
	    	有viewport：
	    		像素比=一个方向上占据一块屏幕所需要的物理像素的个数 /
	    		一个方向上占据一块屏幕所需要的css像素的个数
	    * 考虑用户缩放：
	    	放大：1个css像素占据更多的物理像素
	    	缩小：1个css像素占据更少的物理像素

设备独立像素：（也称密度无关像素）
	可认为计算机坐标系中的一个点，
	这个点代表一个可以由程序使用的虚拟像素，然后由相关系统转换为物理像素。
	设备对接css像素接口，一旦css像素与设备独立像素挂上钩（width=device-width）,
	此时像素比才能发挥作用。

位图像素：
	图像的最小单位
	位图像素与物理像素1：1时，屏幕才能清晰展示图像

3个视口

布局视口：
	（layout viewport）决定页面布局
	可以通过document.documentElement.clientWidth来获取

视觉视口：
	（visual viewport）决定用户能看到什么
	 一个css像素占据多少个物理像素和视觉视口有极大的关系
	 一个视觉视口包含的物理像素个数是确定的（分辨率）
	一个视觉视口包含的css像素个数是不确定的，和用户缩放行为有关
	视觉视口的宽度可以通过window.innerWidth 来获取，
	但在Android 2, Oprea mini 和 UC 8中无法正确获取。

理想视口：
	设备独立像素所代表的值（加meta标签之后）；
	只有是专门为移动设备开发的网站，才有理想视口这一说。
	而且只有当在页面中加入viewport的meta标签，理想视口才会生效。
    <meta name="viewport" content="width=device-width" />
	这一行代码告诉我们，布局视口的宽度应该与理想视口的宽度一致

2个操作(放大和缩小)

用户的：只影响视觉视口
系统的：影响视觉视口和布局视口

放大：
    放大一个css像素的面积，视觉视口尺寸变小，
    一个css像素包含的物理像素个数变多
缩小：
    缩小一个css像素的面积，视觉视口尺寸变大，
    一个css像素包含的物理像素个数变少

1个比例(像素比)

像素比：
    （DPR）(devicePixelRatio)     
    物理像素/设备独立像素
    可通过window.devicePixelRatio获取（兼容性问题严重）
    
    像素比 = 
        一个方向上占据一块屏幕所需要的物理像素的个数 /
		一个方向上占据一块屏幕所需要的设备独立像素的个数 ;
		
当写上<meta width='device-width'>时，
    css像素与设备独立像素连接起来。
即:
    像素比 = 一个方向上占据一块屏幕所需要的物理像素的个数 /
             一个方向上占据一块屏幕所需要的css像素的个数

3个意外

1.太大的元素
	使用完美视口解决太大的元素超过视觉视口后不出滚动条的问题
	完美视口：width=device-width initial-scale=1.0
2.width=device-width和initial-scale的冲突，谁大听谁的
3.等比问题：
	没有加name为viewport的meta标签
		一个相同css像素大小的区域在不同的设备是等比的,（像素比）
		在不同的设备上占据的实际物理大小（英寸）不一样
		页面展示太小，用户体验不好
	加name为viewport的meta标签
		一个相同css像素大小的区域在不同的设备是不等比的,
		在不同的设备上占据的实际物理大小（英寸）是一样的
	等比是不是一个必须的需要？
	    百分百还原设计图 
	        ---> 在不同设备上要等比（文字要完美清晰的展示）
			 ----> 必须加meta标签（不等比）
				 ---> 适配！！！！（加上meta标签后也得等比）

理解

css像素能不能代表一个设备的大小？如果能代表，这个值确不确定?

能 不确定
屏幕大小之间的比较应该使用绝对单位:屏幕尺寸（对角线长度）

物理像素与css像素比例的维护是谁在维护？维护规则是什么？

视觉视口(1.决定用户能看到什么；2.包住整个布局视口)

物理像素:屏幕的分辨率
css像素: 布局视口尺寸

加name为viewport的meta标签
像素比
没有加name为viewport的meta标签
布局视口尺寸 / 屏幕的分辨率

四个像素之间的关系

设备独立像素
物理/设备像素
css像素
位图像素

* 物理像素和设备独立像素:
    像素比: 一个方向上占据一块屏幕所需要的物理像素的个数 /
            一个方向上占据一块屏幕所需要的设备独立像素的个数  =2;
* 物理像素和位图像素:1:1的时候才能完美清晰的展示
* 物理像素和css像素
    普通屏:1比1
    高清屏:

加name为viewport的meta标签
    像素比

没有加name为viewport的meta标签
    布局视口尺寸 / 屏幕的分辨率
    
* css像素和设备独立像素
    没有加name为viewport的meta标签:没有关系
    加name为viewport的meta标签:可以认为css像素就是设备独立像素
* 注意@2x 和 @3x图的使用

像素比 到底是什么

* 像素比: 一个方向上占据一块屏幕所需要的物理像素的个数 /
        一个方向上占据一块屏幕所需要的设备独立像素的个数 ;
* 当写上<meta width='device-width'>时，
  css像素与设备独立像素连接起来。即
    像素比=一个方向上占据一块屏幕所需要的物理像素的个数 /
           一个方向上占据一块屏幕所需要的css像素的个数

理想视口什么时候出现？ 像素比什么时候有用？

加name为viewport的meta标签

理想视口与设备之间的关系

理想视口的尺寸：设备独立像素所代表的值
不同浏览器在同一设备上理想视口的尺寸可能会不一样
一款浏览器在不同设备上理想视口的尺寸可能会不一样

思考视口的主线

本质上三个视口的物理尺寸就是屏幕尺寸
在不一样的情况下，各个视口所包含的css像素的个数是不一样的
布局视口包含的css像素的个数
980 1024 （浏览器不一样）
视觉视口包含的css像素的个数
默认情况（css像素和物理像素1:1）---> 屏幕的分辨率
移动端浏览器初始化的时候（视觉视口必须要包住布局视口）  
---> 布局视口包含的css像素的个数就是视觉视口所包含的
用户缩放（只影响视觉视口）
放大---> 视觉视口包含的css像素的个数变少
缩小---> 视觉视口包含的css像素的个数变多
理想视口包含的css像素的个数
设备独立像素所代表的值

缩放

* pc端的缩放:会改变元素的布局（布局视口）
* 移动端（缩放只改变视觉视口内css像素的个数）
* 放大
    使css像素变大，一个css像素所包含的物理像素的个数变多，元素变的更大
    视觉视口内，css像素的个数变少
* 缩小
    使css像素变小，一个css像素所包含的物理像素的个数变少，元素变的更小
    视觉视口内，css像素的个数变多

怎么获取三个视口的值

* 布局视口：(基本没有兼容性问题)
    document.documentElement.clientWidth
* 视觉视口：（有一点兼容性问题）
    window.innerWidth
* 理想视口：（兼容性问题极大）
    screen.width

完美视口以及meta标签

过大的元素--->完美视口
<meta name="viewport" content="width=device-width,initial-scale=1.0" />

哪些操作会影响布局视口

width=device-width
initial-scale
重力感应（横竖屏切换）

等比问题

没有加name为viewport的meta标签
一个相同css像素大小的区域在不同的设备是等比的,
在不同的设备上占据的实际物理大小（英寸）不一样
加name为viewport的meta标签
一个相同css像素大小的区域在不同的设备是不等比的,
在不同的设备上占据的实际物理大小（英寸）是一样的
等比是不是一个必须的需要？
百分百还原设计图 ---> 在不同设备上要等比（文字要完美清晰的展示）
----> 必须加meta标签（不等比）
---> 适配！！！！（加上meta标签后也得等比）

meta标签

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