【Html】【像素视口理论】网页中的像素，视口

?物理像素（又称设备像素，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，最终也会观察到一样效果