学习移动Web应用开发中。网上搜了些与下面这句代码相关的概念，特此记录。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
device pixel和css pixel
大致可以理解为前者是物理的，后者是逻辑的。
device pixel是设备的像素/分辨率，通过screen.width/height可以取到。
而我们为特定元素指定的width:24px，这样的像素则是css pixel。
在浏览器未缩放时（100%显示），两个像素大小相等。如果放大，则css pixel的面积会变大（比如200%时，1个css pixel包含4个device pixel）。
screen size和window size
screen size是显示屏大小。
window size是浏览器的client区大小（window.innerWidth 和window.innerHeight）。
桌面浏览器的viewport
桌面浏览器的viewport size等于window size（可视区域大小）。
就是说viewport的物理大小是确定的，所以缩放的话，viewport的css pixel size实际上是变化的。
比如下面的代码，blue元素（width:100%），继承了viewport的size；red元素（width:1200px）固定为1200 css pixel。结果blue元素在缩放时css pixel大小是变化的。
<html>
<head>
<script type="text/javascript">
function show()
{
alert('blue.width=' + document.getElementById('blue').clientWidth);
alert('red.width=' + document.getElementById('red').clientWidth);
}
</script>
</head>
<body>
<div id="blue" style="background-color:blue;width:100%;">
<input type="button" value="show" onclick="show();" >
</div>
<div id="red" style="background-color:red;width:1200px;">
test
</div>
</body>
</html>
移动浏览器的viewport
按照quirksmode上的说法，移动浏览器上有两种概念的viewport。一个layout viewport，一个visual viewport。visual viewport是可视区域的viewport，分横竖两种。layout viewport跟桌面版的有些类似。
移动浏览器load页面的过程，大概可以理解成：移动浏览器会先按照桌面浏览器那样，把layout布局好，然后再框上一个visual viewport供用户查看其中一部分。portrait和landscape的切换，只会导致visual viewport的变化，而layout viewport不会重新计算。
移动浏览器的layout viewport根据不同厂家而不同，不过值貌似是固定的，宽800px到1000px不等。显然这个数字比device pixel的320px要大得多，所以实际显示出来内容就很小了，但是layout的话跟desktop上的差别并不大。
meta viewport语句
可以调整layout viewport。<html>会继承此viewport的width，然后开始布局。
过程的话，貌似和桌面浏览器把宽度拉到320px之后的效果一样。
如果桌面浏览器把宽度拉到320px之后仍能够正常显示，那移动设备上应该可以正常显示吧。
sacle指的是缩放比例，即layout viewport和visual viewport的对应关系。user-scalable:用户是否可以手动缩放。
dpi
Their text will be smooth and crisp, but their bitmap images will probably not take advantage of the full screen resolution.
听起来针对不同dpi的设备，只需要处理好图片就可以了。
参考文档：
http://www.quirksmode.org/mobile/viewports.html
http://www.quirksmode.org/mobile/viewports2.html
https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag
分享到：
相关推荐
手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤 到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过...
viewport响应式模板
一个功能强大的viewport程序实例，可以满足你多种需要调节。
h5 中viewport的详解，只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用，才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。
本节介绍 Ext的Border布局以及如何创建一个Viewport。 1、Viewport介绍： Viewport 是一类特殊的容器。它创建后会自动填充到整个页面区域，并能自动适应页面缩放。一般作为用用程序全局容器使用。 2、Border布局...
在OpenGL中读取OBJ模型，并在窗口中设置四个视图，每个视图分别显示一个三维模型，鼠标左、右键分别控制模型的平移和旋转操作。可以作为图形编程练习的重要参考。
3D视图自动切换捕捉脚本 Viewport Auto-Snap
前端开源库-viewport-list视区列表，返回设备及其视区的列表
其中涉及几个重要概念是 dip （ device-independent pixel 设备逻辑像素 ）和 CSS 像素之间的关系。这里首先了解以下几个概念。 layout viewport（布局视口） 一般移动设备的浏览器都默认设置了一个viewport 元标签...
[Bootstrap_3][中文]_02._Bootstrap原理，@media_與_viewport
WPF三维立体动画源码 利用viewport3D来呈现
ember-in-viewport, 在 viewport @ 60FPS，检测Ember视图或者组件是否为 ember-in-viewport检测Ember视图或者组件是否位于 viewport @ 60 FPS 。美国船厂建立和维护收费 ，请与我们联系，咨询专家 Ember.js 。读取 ...
该程序是基于HelixToolkit.wpf，实现了3D模型的缩放旋转平移。
前端开源库-postcss-px-to-viewportpostss px to viewport，一种将px转换为viewport单位（vw、vh、vmin、vmax）的CSS后置处理器。
viewport设计原理非常详细的讲解，前端设计非常重要的概念
ExtJs 学习笔记基础篇 面板的使用(Ext.Panle、Ext.TabPanel、Ext.Viewport)
NULL 博文链接：https://wenzongliang.iteye.com/blog/2200661
https://blog.csdn.net/qq_34115899/article/details/105717845配套代码
ExtJs_Viewport_ExampleExtJs_Viewport_Example