?物理像素（又称设备像素，device pixel） 设备上最小显示单位，即发光元件的数量
?CSS像素（css pixel） 网页中的大小单位，浏览器会根据屏幕像素密度，页面缩放等级进行换算 屏幕像素密度越大，页面缩放等级越大，css-px占据的device-px越多 如果开发中不用css-px，而是用device-px，就会出现在像素密集的设备上，元素特别小的问题 
?设备尺寸 设备对角线的尺寸，单位英寸（inch）
?设备分辨率 设备横向的物理像素 * 设备纵向的物理像素
?屏幕像素密度（dot per inch，简称dpi） 设备每英寸的平均像素数量
?设备独立像素（device independent pixel，简称dip或dp） 相对于屏幕像素密度的像素单位，屏幕像素密度越大，dp代表的device-px越多，但是1dp的实际英寸数是固定值不变 dp单位的出现，使得我们不用再考虑device-px实际大小问题，同样的dp，在不同设备中，可以显示出同样的大小
?设备像素比（device pixel ratio） 同一方向上，device-pixel / dp的比值
?布局视口（layout viewport） 在桌面端，布局视口就是指浏览器窗口大小 窗口空间不足，滚动条出现时，布局视口为网页minWidth/minHeight的大小 移动端由于屏幕太小，如果以窗口作为视口，内容就放不下了，为了保证页面效果一样，移动浏览器定义一个虚拟的布局视口，这个视口距离一般大于屏幕大小 
?视觉视口（visual viewport） 用户可见区域大小，即移动设备的宽度
?布局视口决定页面布局，视觉视口决定页面可视区域
?理想视口（ideal viewport） 当移动设备的布局视口=屏幕大小=视觉视口时，这时的视口称为理想视口
?css-pixel和dp的关系 css-pixel和dp的原理相似，但是css-pixel的大小会根据页面缩放来改变 移动设备在布局视口为理想视口，视觉视口等于布局视口时，1css-pixel和1dp的大小正好相等
?设置视口大小和页面缩放 移动浏览器，一般默认将布局视口设置为理想视口，然后将页面内容缩放至满屏 我们可以通过设置viewport元标签，来自定义视口大小和页面缩放等级
移动浏览器默认设置，布局视口宽度980css-px，内容缩放至满屏 
修改布局视口，视口变大后，移动浏览器会自动调节css-pixel的大小，尽量保证布局视口大小和屏幕等宽，但是当视口大小超出缩放上限时，视口就会超出屏幕 
修改页面缩放等级，移动浏览器仍会自动调节css-pixel的大小，尽量保证布局视口大小和屏幕等宽，直到超出缩放上限，视口就会超出屏幕 initial-scale是相对于理想视口进行缩放的，initial-scale变大一倍，css-pixel变大一倍，视口仍然和屏幕等宽，那么对应的css-pixel数量就要小一倍 用户手动去缩放页面时，实际改变的就是initial-scale的值 
?width和initial-scale的关系 width和initial-scale都是对布局视口进行控制，width直接设置视口大小，initial-scale以相当于理想视口的比例来设置视口大小 width=device-width和initial-scale=1都是将布局视口设置为理想视口大小 当width和initial-scale作用效果不一致时，哪个属性计算出的视口布局更大，就以哪个属性为准 当我们只设置width和initial-scale其中之一时，在一定范围内它们大小是负相关的，width变大，initial-scale变小，initial-scale变大，width变小
?完美视口 当我们希望页面内容超出视觉内容时就出现滚动条，而不是全部内容都缩小至屏幕内，我们可以这么设置 
我们把这时的视口叫做完美视口，此时布局视口和视觉视口仍然是相等的，超出的内容可以通过滚动条向右滑动查看 
?各种数值代码获取方法 布局视口：document.documentElement.clientWidth 视觉视口：window.innerWidth 理想视口：screen.width 设备像素比：window.devicePixelRatio
?用户缩放行为对页面的影响 在PC端，页面放大时，css-pixel的实际大小放大，视口大小对应的css-pixel变少，页面布局会发生改变，元素看起来放大了，页面感觉更加拥挤了 而在移动端，页面放大时，css-pixel的实际大小放大，但视口大小对应的css-pixel不变，页面布局不发生变化，元素和页面感觉是同步放大的
PC端缩放前后对比 
移动端缩放前后对比 
也可以直接在浏览器控制台打印视口大小来观察变化 
clientWidth对应的是css-pixel，虽然窗口大小不变，但是放大时对应的css-pixel数量变小了
总的来说，PC端缩放会尽量改变视口来利用空白空间，让元素尽量保持在窗口内而不溢出 移动端的缩放则不会改变视口，而是让视口和css-pixel同步缩放，最终视口对应的css-pixel是一样的，布局看起来没有变化
?布局区域并不总是大于可视区域 
如图，蓝色为body区域，当把布局视口的值很小时，布局视口区域最终会小于屏幕大小 但是由于单词和div无法自动换行，它们仍然会超出body区域显示 这时，布局区域小于可视区域 由于initial-scale和width是负相关的，我们也可以不断增大initial-scale，最终也会观察到一样效果
