学习移动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）比屏幕宽，这样就不用把每个网页挤 到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过...
要实现这一功能，我们需要以下几个步骤： 1. **初始化OpenGL**：在程序开始时，我们需要配置OpenGL上下文，设置窗口大小，并初始化必要的渲染状态。 2. **创建视口**：使用`glViewport()`函数，我们可以定义四个...
viewport响应式模板
本笔记旨在为学习 3DMax 的学生提供一个详细的学习指南，涵盖了 3DMax 的基础知识、界面组成、视图、工具栏、参数设置、复制、基本几何体等内容。 一、 3DMax 简介 * 3DMax 是由 Autodesk 公司出品的三维制作软件...
【标题】"图文并茂让你必须弄懂viewport配套示例代码.rar"的资源是一份针对网页开发中的关键概念——“视口”（viewport）的详细教程。这份压缩包包含了一个HTML示例页面（视口--viewport.html）、一个链接到相关...
"Viewport Auto-Snap" 是一个专门针对3D视图操作的工具或脚本，它旨在提升3D建模和设计过程中的工作效率。在3D建模软件中，视口是用户观察、操作3D模型的主要界面，而"Auto-Snap"功能则是指自动对齐或捕捉，通常用于...
一个功能强大的viewport程序实例，可以满足你多种需要调节。
一个ViewPort3D由以下几个主要元素组成： 1. **Viewport3DVisual**: 这是ViewPort3D的基础元素，它定义了3D渲染的视口。 2. **Camera**: 在3D场景中，相机的位置和视角决定了用户看到的内容。在WPF中，通常使用...
【前端开源库-viewport-list】是一个专为前端开发者设计的工具库，它的主要功能是提供一个设备视区的列表，帮助开发者更好地理解和处理不同设备在渲染网页时的可见区域，即视口。在Web开发中，视口是浏览器用于显示...
在移动Web开发中，`viewport` 和 `Android Webview` 是两个至关重要的概念。`viewport` 是一个虚拟的浏览区域，决定了网页在不同设备上的显示方式，尤其是对于智能手机和平板电脑这样的小屏幕设备。而`Android ...
在这个主题中，我们将深入探讨如何使用`ViewPort3D`以及相关的`Helix Toolkit`库来实现3D模型的缩放、旋转和平移。 首先，`ViewPort3D`是WPF 3D框架中的核心元素，它提供了3D视图的容器。通过在`ViewPort3D`内添加`...
本节介绍 Ext的Border布局以及如何创建一个Viewport。 1、Viewport介绍： Viewport 是一类特殊的容器。它创建后会自动填充到整个页面区域，并能自动适应页面缩放。一般作为用用程序全局容器使用。 2、Border布局...
ExtJS 是一个强大的JavaScript应用程序框架，专为构建富客户端Web应用而设计。它提供了一整套组件、...通过这个示例，开发者可以学习如何在实际项目中使用ExtJS的Viewport特性，从而创建出适应各种屏幕尺寸的Web应用。
以下是一份详细的移动端Web学习笔记，涵盖了标题和描述中提到的几个关键知识点。 首先，移动端标准设置涉及到HTML的`<meta>`标签，尤其是`viewport`属性。这个标签告诉浏览器如何调整网页的宽度和缩放以适应不同的...
在本文中，我们将深入探讨如何在Windows Presentation Foundation (WPF) 中创建三维立体动画，主要基于给定的项目“WPF三维立体动画”。...这个项目就是一个很好的学习资源，帮助开发者深入了解WPF中的3D编程。
Ext2.0的学习笔记不仅涵盖了Ajax的基本概念和应用，还深入探讨了如何利用Ajax技术与远程服务器进行数据交换，以及如何使用`ViewPort`来优化Web应用的布局和响应性。掌握这些知识对于开发高性能、高用户体验的Web应用...
其中，`postcss-px-to-viewport` 是一个非常实用的前端开源工具，它允许我们将传统的像素单位（px）自动转换为基于视口的单位（vw、vh、vmin、vmax），以适应各种屏幕尺寸，从而实现更加灵活的布局。 首先，我们...
viewport 视口 窗口 GDI 坐标 映射方式定义了Windows如何将GDI函数中指定的逻辑坐标映射为设备坐标。 Windows有关映射模式的一些术语：逻辑坐标所在的坐标系称为"窗口"，将设备坐标所在的坐标系称为"视口"。
下面将详细探讨ViewPort3D以及相关的3D概念和技术。 **1. Viewport3D基本介绍** ViewPort3D是WPF中呈现3D场景的主要容器。它将3D模型、相机和光照等元素组合在一起，提供一个2D屏幕上的3D视图。通过在ViewPort3D内...