屏幕的尺寸

4.7英寸屏幕指屏幕对角线的长度 1英寸=2.54厘米 1寸=3.333厘米

屏幕像素密度PPI (Pixel per inch)

每英寸物理像素个数 大于320称为高清屏 如 iPhone7 4.7英寸 1334x750 Math.sqrt(1334x1334+750x750)/4.7 = 326ppi

物理像素(屏幕分辨率)

指横向和纵向上物理像素的个数 ,不同设备单个物理像素实际大小是不一致的

设备独立像素(逻辑分辨率)

用设备独立像素定义的尺寸，不管屏幕的参数如何，都能以合适的大小显示
对于像素密度高的屏幕，会将多个物理像素划分为一个设备独立像素。
至于将多少物理像素划分为一个设备独立像素，由设备厂商根据最利于观看的比例决定

像素比(devicePixelRatio)

物理像素/设备独立像素
一个方向上所占据的物理像素的个数/一个方向上所占据的独立像素的个数

css像素

指的是我们在css js代码中使用到的逻辑像素，是一个抽象单位，与物理像素的关系由浏览器厂商维护
PC端在缩放比例为100%的情况下，一个css像素大小等于一个设备独立像素。

位图像素

是图片的最小数据单元 1个位图像素对应一个物理像素才能使图片完美清晰的展示

布局视口

布局视口决定了 网页的布局 ,元素到底要不要换行 到底能放下多大的网页

视觉视口

视觉视口决定了用户能看到多少css像素 既而决定了css像素和物理像素的比例
视觉视口占据的物理像素个数 永远不变

理想视口

加上width = device-width后 在没有缩放的情况下 布局视口和视觉视口的css像素是一致的(布局视口和理想视口一样大 也可以理解为理想视口等于独立像素) 此时称为理想视口

获取视口的宽度

布局视口 : document.documentElement.clientWidth 没有兼容问题
          HTML根标签的宽度(不包括垂直滚动条 边框 外边距)就是布局视口 
视觉视口 : window.innerWidth 几乎全都支持
理想视口 : window.screen.width 
          PC端返回分辨率 移动端返回理想视口 
          一半浏览器认为是理想视口的宽度 一半认为是逻辑分辨率的宽度 可能有兼容性问题

放大缩小操作

//在移动端缩放影响的是视觉视口的尺寸,不会影响布局视口 所以元素不会重新排版
//PC端只有一个视口(布局视口) 缩放会导致元素重新排版
放大:
      一个css像素的面积变大,视觉视口内可以看到的css像素的个数变少
缩小:
      一个css像素的面积变小,视觉视口内可以看到的css像素的个数变多
系统缩放: initial-scale
      根据理想视口进行缩放 改变的是 布局视口和视觉视口
用户缩放
      只影响视觉视口的尺寸

太大的元素

当只写了 width=device-width时 如果出现一个大于布局视口宽度的元素, 理论上应该出现横向滚动条 ,
但实际上视觉视口会进行缩放以完整显示页面
比如iPhone7 此时 布局视口375 视觉视口大于375的值 理想视口375
<meta name="viewport" content="width=device-width"/>

完美视口

<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
比如iPhone7 此时 布局视口375 视觉视口375 理想视口375
出现大于布局视口宽度的元素, 视觉视口不会再进行缩放以完整显示页面,而是出现横向滚动条 ,
此时就是完美视口

width和initial-scale

width=device-width 根据理想视口(既独立像素的大小)改变布局视口
initial-scale      根据理想视口(既独立像素的大小)改变布局视口和视觉视口
//布局视口大小冲突
<meta name="viewport" content="width=device-width,initial-scale=0.5"/>
width认为是375  initial-scale认为是750 
此时谁的值大 布局视口就等于谁

mete viewport

<meta name="viewport" content=" " />
    width= [device-width || 具体px值但是很多低版本android手机不支持], 
    initial-scale= 缩放比
    //默认只能缩放到20%-500% 设置最大最小缩放比后范围 10%-1000%
    //Android的webkit不支持 minimum-scale默认缩放范围 25%-400%
    //ios10以下不支持user-scale  最大最小缩放比设置为1时可以兼容ios10以下
    maximum-scale 
    minimum-scale
    user-scale