开发者社区> 异步社区> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

《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)。


<a href=https://yqfile.alicdn.com/2c652d5c5f6c989b2114c23250e8511abdf26ca2.png" >

举个例子,如果声明

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

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


781c74e2095bf4a30e410ea1a62933b37fd0f1e2

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)返回实际的尺寸。


<a href=https://yqfile.alicdn.com/6648c02db46637e64e6a16ed9189589c08954acb.png" >


<a href=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">

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
html5 css 万能的position大法
水平居中的text-align:center 和 margin:0 auto   这两种方法都是用来水平居中的,前者是针对父元素进行设置而后者则是对子元素。
1086 0
Groundwork:响应式 HTML5,CSS & JavaScript 工具包
  Groundwork 是基于强大的 CSS 预处理器 Sass & Compass 的响应式 HTML5,CSS & JavaScript 工具包。使用 Groundwork,您可以快速构建 Web 应用程序。
798 0
HTML5实践 -- 使用css装饰你的图片画廊
  转载请注明原创地址:http://www.cnblogs.com/softlover/archive/2012/11/20/2779890.html     本节课我们将介绍,如何使用css在不修改图片源的前提下装饰你的图片画廊。
1046 0
+关注
异步社区
异步社区(www.epubit.com)是人民邮电出版社旗下IT专业图书旗舰社区,也是国内领先的IT专业图书社区,致力于优质学习内容的出版和分享,实现了纸书电子书的同步上架,于2015年8月上线运营。公众号【异步图书】,每日赠送异步新书。
文章
问答
文章排行榜
最热
最新
相关电子书
更多
天猫 HTML5 互动技术实践
立即下载
FLINK在大规模实时无效广告流量检测中的应用
立即下载
《企业全面上云成功路径与实践》
立即下载