something about css viewport
page 1
1.jpg我还用尺子量了，宽度≈400mm，高度≈250mm；最佳分辨率1440*900；点距≈0.2778mm。然后，设置不同的分辨率，用GetDeviceCaps获得了令人费解的宽度以及高度，单位肯定不是mm了。不知道Windows操作系统搞得什么鬼？（显示器很老了，系统是XP，别打我）
page 2
2.jpg使用 400mm×250mm，1400×900，我们可以计算出 91.44 Pixels Per Inch。但是Windows有一个 LOGPIXELSX=96，LOGPIXELSY=96，也就是96px/Inch，继续使用400mm×250mm，可以计算出屏幕为1512×945。
如果我们认定 400mm×250mm，那么
- 1Pixel = 1dd(dot distance)=0.2778mm，1400Pixel × 900 Pixel
- 1px = (1/96)Inch=0.2646mm，1512px × 945 px
page 3
3.jpg假定 400mm×250mm，那么
- 1Pixel1 = 1dd(dot distance)=0.2778mm，1400 Pixel1 × 900 Pixel1
- 1Pixel2 = 0.3125mm，1280Pixel2 × 800 Pixel2
- 1px = (1/96)Inch=0.2646mm，1512px × 945 px
单位真是乱的一比，能不带单位尽量不带了。真是不知道叫啥了，Pixel不提，我们直接给Pixel1，Pixel2长度值。起名字，确实是个难题。
page 4
4.jpg一些网上弄到的数据。
x1 Pixel1 / y1 Pixel1 Per Inch = x2 Pixel2 / y2 Pixel2 Per Inch
page 5
5.jpg我们自己再算几下
假定 1chuizi = 0.614mm，锤子嘛，我觉得锤子做单位就不错
- 4.7”
- 1Pixel4.7” = 0.078mm，1334 Pixel4.7” × 750 Pixel4.7”
- 169chuizi × 95chuizi
- 5.5”
- 1Pixel5.5” = 0.0634mm，1920 Pixel5.5” × 1080 Pixel5.5”
- 198chuizi × 112chuizi
- 5”
- 1Pixel5” = 0.0865mm，1280 Pixel5” × 720 Pixel5”
- 180chuizi × 101chuizi
page 6
6.jpgdevice-independent-pixel，系统给应用提供的单位，但是算一下，1dip4.7”、1dip5.5”、1dip5”并不是完全相等。dip实际值也是设备相关的。
- iOS UIScreen获取
- Android DisplayMetrics获取
相关联的参数还有不少，我们只要“宽”，“高”
page 7
7.jpg如何确定合理的dip？
Android 1dip = (1/160)Inch = 0.15875mm, 也就是说 160PPI 的时候，1dip = 1Pixel160ppi(我这里Pixel都用长度值了，不说多少个像素)
直接用 1dip = (1/160)Inch 来计算，
- 1dip = 2Pixel320ppi
- 1dip = 1.84Pixel294ppi（RedMi3S）（好尴尬 1.84）
所以，Android给PPI定了区间，294按照DENSITY_XHIGH(320)计算。density = 2（设备像素比）
1dipRedMi3S = 2Pixel294ppi，也就是说 1dipRedMi3S = (1/147)Inch
- 1280 Pixel294ppi × 720 Pixel294ppi
- 697 dip × 392 dip
- 640 dipRedMi3S × 360 dipRedMi3S
page 8
8.jpgiOS的dip叫point。通过UIScreen，能获得 Wdip × Hdip，DPR(设备像素比)。
没事可以算算具体数值，但是6SP还搞事情了（假装2208 × 1242？）。
说白了，就是在同一个坐标系中，用不同的单位度量；你也可以认为是不同的坐标系，然后映射一下。
page 9
9.jpg只是一个思路而已，这里说得也不是很清楚。当然也有错误，FF screen.width，Chrome screen.width获得的值，指的就是不同的对象。FF s.w指的是dip（随着缩放，dpr改变，而疯狂改变，当然dpr有上下限）；Chrome s.w指的是Pixel，也就是分辨率中的w。
PC端缩放，dpr都会变。而手机端即使缩放，dpr固定不变。（并未验证所有浏览器。不过我自己手头的模型都是这样。不排除其他模型存在。）
page 10
10.jpgviewport ☞ ICB ☞ canvas ☞ viewport
这就是我们渲染页面的大概过程。（细节我也不懂，也看不懂浏览器源代码，不知道怎么具体计算，用了什么MapMode……）
PC端viewport拉拉扯扯都变了，手机端独占屏幕（除去菜单部分）（反正我是拉不动）。
viewport除了看，主要还是为ICB提供初始值。PC端一般尺寸一样大。移动端如果没有 <meta viewport>，也没有@viewport，vendor会提供一个固定值。
（我觉得initial viewport就是看的，actual viewport控制ICB的。）
page 11
11.jpg这里的测试，不严谨。结论也有待商榷。
不过可以看出来，我们从网页用JavaScript代码获得的单位是 dip。
而且我们有viewport，有ICB，有canvas，渲染网页应该足够了。（layout viewport，visual viewport，ideal viewport 不知道干啥的？）
（PC端IE对viewport的支持，也是测试头疼。）
page 12
12.jpg我手机测试的情况，我都无法理解。alert出来的d.d.cw，居然和document.write出来的不一样。
不过我还是坚持，VP不变，DPR不变，ICB由你通过（@viewport 或者 meta）设置。
至于1cm在代码里，在屏幕，在纸上……怎么映射，我也不知道。我想很多年前，你在css中写下1px的时候，它就表示显示器上的1Pixel吧。
page A
A.jpg显示器(AOC E2270Sw)，windows 7。网上复制代码测试，还是一头雾水。所以自己搞了一堆单位 mm，mm’，mm’’’，mm’’’’
当然 mm 人家是正统的宇宙级长度单位
page B
B.jpgpage C
C.jpgVUM L3具体怎么算，参考这里。
For print media and similar high-resolution devices, the anchor unit should be one of the standard physical units (inches, centimeters, etc). For lower-resolution devices, and devices with unusual viewing distances, it is recommended instead that the anchor unit be the pixel unit. For such devices it is recommended that the pixel unit refer to the whole number of device pixels that best approximates the reference pixel.
显示器(AOC E2270Sw)，windows 7。 1dev_pixel = 0.2485mm，1ref_pixel = 0.26mm。 css 1px = 1dev_pixel ?
高ppi手机上难道 css 1px = （1/96）inch？ 不，（注意用词should，recommended）；根据我们前面几页应该是 1px ☞ 1dip，系统知道dip和Pixel，映射一下就好，然后有缩放就缩放到VP。
px is their canonical unit， css 1cm？ 1cm=96px/25.4。所以都转化成px计算。
ps
PC要的是自适应，Mobile要的是适配（至多自适应一下Landscape/Portrait）。