《HTML5触摸界面设计与开发》——2.4　理解 Viewport

本节书摘来自异步社区《HTML5触摸界面设计与开发》一书中的第2章，第2.4节,作者： 【美】Stephen Woods 更多章节内容可以访问云栖社区“异步社区”公众号查看。

2.4 理解 Viewport

在iPhone诞生之前，手机浏览器尝试通过调整内容来适应网页，取得了不同程度的成功。iPhone上的Safari没有做丝毫的尝试，取而代之的是在各种各样的虚拟窗口上展现网页，这些虚拟窗口被称为“视图”。用户可以通过放大来查看网页的部分内容或通过缩小来查看网页的全部内容。

为了给开发者提供一定程度的展现页面的控制权，苹果公司提供了viewport的元信息（meta）元素，它可以指定虚拟窗口大小。它改变了网站建设的很多方面。理解viewport是成功建设移动网站的第一步。

虚拟像素
作为网站开发者，我们喜欢像素。在网页上进行布局，最精确和最简单的方式就是使用像素。像素是屏幕上最小的单元，一旦指定了像素值就能确切地知道它的大小。如果你拿出显微镜，可以在屏幕上一个一个地数出这些像素点。

在移动设备的屏幕上看到的像素与桌面设备上不同。这意味着，在iPhone上，无法拿出显微镜来验证一个元素是否是300px宽。在一个没有viewport 元信息的页面上，视图会默认设定宽度为980px，则宽度为300px的元素表示的宽度为300虚拟像素宽（图2.3）。

https://yqfile.alicdn.com/2c652d5c5f6c989b2114c23250e8511abdf26ca2.png"

举个例子，如果声明

 meta name="viewport" content="width=600" 

那么一个在CSS中被定义宽度为600px的元素在页面加载初始化时将会横向充满屏幕（图2.4）直到用户通过双击放大时才变得更大。

px与em

虽然在CSS2和CSS3的规范中定义了许多单位，但是大多数开发人员限制自己只使用两个：em和px。1个单位的em总是代表当前的字体大小。如果字体大小是12px，那么1em就等于12px。1个单位的px（历史上）是屏幕上的一个像素。2005年左右，使用em变得非常流行，因为当时流行的浏览器有了改变字体大小的能力。因为单位em的定义是基于字体大小的，所以可以很容易地进行布局，以适应用户选定的字体大小。

自IE7开始，浏览器的默认缩放为全页面缩放，而不是只改变字体大小。 由于简单，px现在已是设计师们最流行的选择。px更容易沟通，更容易理解。像em和其他未被充分利用的单位也有相应的用途，它们主要用于排版，而不是布局，px才是用来对网页进行布局的最简单的单位。
viewport就是一个虚拟的窗口，viewport的边缘代替浏览器的边缘，成为了窗口的边缘。 viewport的宽度和高度除了可以用像素值，还可以接受两个关键字：设备宽度和设备高度，这显然是根据设备屏幕的像素（图2.5）返回实际的尺寸。

https://yqfile.alicdn.com/6648c02db46637e64e6a16ed9189589c08954acb.png"

https://yqfile.alicdn.com/f6c7f38b574c044a4d5baf509f7363a974895809.png"

加州鸟类网站的viewport宽度会被设置为与设备的宽度相同，从设计的角度，这样看起来方便。此外，当我们要确保CSS适应不同的设备时，也会有很大帮助。从iPhone 1到4S（假设在垂直方向），device-width的值都是320px。

高密度显示屏
从iPhone和viewport 标签出现之后，每一代移动设备的分辨率都在增加。现在像素太高，实际像素小到即使用显微镜都难以分辨。如果规范没有改变，当网页的viewport宽度设置为设备宽度时，出现非常微小的用户界面。在iPhone 4中，即第一个有着高密度显示屏的设备上，这些元素相对它们在老版本的iPhone上只有一半大小。

此外，苹果公司是第一个将高密度显示屏设备推向市场的制造商。为了让Web开发者的思维保持清晰，苹果公司决定继续在iPhone 4上返回320的设备宽度，尽管屏幕物理像素为640。 安卓设备也如法炮制。这些设备更复杂，因为在如何显示上，它们给了用户更多的控制权。（安卓上的Chrome有一个不是很有用的target-density dpi的viewport属性来支持它，你可以查看安卓开发者文档来获取更多的相关信息）。所有的设备都将返回一个设备开发者认为是布局界面元素的理想尺寸的值作为device-width。值有很大不同，所以当我们为一个viewport宽度为设备宽度的Web页面的布局时，我们需要确保布局方式可以处理一些伸缩问题，就像一个传统桌面网站的流式布局一样。

这对加州鸟类网站意味着什么呢？因为设计师为我们提供了优美且充满整个视窗的移动布局，我们可以这样设置device-width：

 meta name="viewport" content="width=device-width" 

在大多数情况下，这样设置是最好的，因为它允许界面完全适应用户的设备，我们就不必担心网页的宽度会超过设备的宽度。

SpringBoot框架+原生HTML开发的云电子病历系统源码 SaaS模式Java版云HIS系统的子系统云电子病历系统源码，本系统采用前后端分离模式开发和部署，支持电子病历四级。智能化模板、全结构化录入，支持全结构化选择、模板输入、表格式、文本等多种录入方式。
IOT智慧物联网平台源码 后台基于JAVA开发 前端HTML 目前web系统功能已实现： 1、 数据实时采集和远程控制； 2、 报警信息管理和报表导出； 3、 自动控制，触发管理； 4、 历史数据，报表导出功能； 5、 子账户和场景授权管理； 6、 场景信息管理；
基于.Net开发的对比Html效果差异的开源项目 基于.Net 4.5开发的对比Html文件、片段效果差异的项目。两份Html效果不一样的地方会通过颜色、删除线、背景色分别标记出来。
传统html+vue+elementUI开发&nodeJS环境搭建 Shiro提供了完整的企业级会话管理功能，不依赖于底层容器（如Tomcat、WebLogic），不管是J2SE还是J2EE环境都可以使用，提供了会话管理，会话事件监听，会话存储/持久化，容器无关的集群，失效/过期支持，对Web的透明支持，SSO单点登录的支持等特性。 所谓会话，即用户访问应用时保持的连接关系，在多次交互中应用能够识别出当前访问的用户是谁，且可以在多次交互中保存一些数据。如访问一些网站时登录成功后，网站可以记住用户，且在退出之前都可以识别当前用户是谁。
异步社区 异步社区(www.epubit.com)是人民邮电出版社旗下IT专业图书旗舰社区，也是国内领先的IT专业图书社区，致力于优质学习内容的出版和分享，实现了纸书电子书的同步上架，于2015年8月上线运营。公众号【异步图书】，每日赠送异步新书。