两个viewport的故事(第一部分)
作者: JeremyWei | 可以转载, 但必须以超链接形式标明文章原始出处和作者信息及版权声明
网址: http:///viewports.html 原文:http://www./mobile/viewports.html 在这个迷你系列的文章里边我将会解释viewport,以及许多重要元素的宽度是如何工作的,比如 这篇文章是关于桌面浏览器的,其唯一的目的就是为移动浏览器中相似的讨论做个铺垫。大部分开发者凭直觉已经明白了大部分桌面浏览器中的概念。在移动端我们将会接触到相同的概念,但是会更加复杂,所以对大家已经知道的术语做个提前的讨论将会对你理解移动浏览器产生巨大的帮助。 概念:设备像素和CSS像素你需要明白的第一个概念是CSS像素,以及它和设备像素的区别。 设备像素是我们直觉上觉得「靠谱」的像素。这些像素为你所使用的各种设备都提供了正规的分辨率,并且其值可以(通常情况下)从 如果你给一个元素设置了 如果用户进行缩放,那么计算方式将会发生变化。如果用户放大到200%,那么你的那个拥有 现代浏览器中实现缩放的方式无怪乎都是「拉伸」像素。所以,元素的宽度并没有从128个像素被修改为256个像素;相反是实际像素被放大了两倍。形式上,元素仍然是128个CSS像素宽,即使它占据了256个设备像素的空间。 换句话说,放大到200%使一个CSS像素变成为一个设备像素的四倍。(宽度2倍,高度2倍,总共4倍) 一些配图可以解释清楚这个概念。这儿有四个100%缩放比的元素。这儿没有什么值得看的;CSS像素与设备像素完全重叠。 现在让我们缩小。CSS像素开始收缩,这意味着现在一个设备像素覆盖了多个CSS像素。 如果你进行放大,相反的行为会发生。CSS像素开始变大,现在一个CSS像素覆盖了多个设备像素。 这儿的要点是你只对CSS像素感兴趣。这些就是那些控制你的样式表如何被渲染的像素。 设备像素对你(译者:指的是开发者)来说基本上没用。但是对于用户不一样;用户将会放大或者缩小页面直到他能舒服的阅读为止。无论怎样,缩放比例对你不会产生影响。浏览器将会自动的使你的CSS布局被拉伸或者被压缩。 100%缩放我是以假设缩放比例为100%来开始这个例子的。是时候需要更加严格的来定义一下这个100%了:
100%缩放的概念在接下来的解释中会非常有用,但是在你的日常工作中你不用过分的担心它。在桌面环境上你将会在100%缩放比例的情况下测试你的站点,但即使用户放大或者缩小,CSS像素的魔力将会保证你的布局保持相同的比率。 屏幕尺寸screen.width/height
让我们看一些实用的度量。我们将会以 Fun! 但是这些信息跟对我们有什么用呢? 基本上没用。用户的显示器尺寸对于我们来说不重要-好吧,除非你想度量它来丰富你的web统计数据库。 窗口尺寸window.innerWidth/Height
相反,你想知道的是浏览器窗口的内部尺寸。它告诉了你用户到底有多少空间可以用来做CSS布局。你可以通过 很显然,窗口的内部宽度是以CSS像素进行度量的。你需要知道你的布局空间中有多少可以挤进浏览器窗口,当用户放大的时候这个数值会减少。所以如果用户进行放大操作,那么在窗口中你能获取的空间将会变少, 注意度量的宽度和高度是包括滚动条的。它们也被视为内部窗口的一部分。(这大部分是因为历史原因造成的。) 滚动距离window.pageX/YOffset
这些属性也是以CSS像素进行度量的。你想知道的是文档已经被滚动了多长距离,不管它是放大还是缩小的状态。 理论上,如果用户向上滚动,然后放大, 概念:viewport在我们继续介绍更多的JavaScript属性之前,我们必须介绍另一个概念:viewport。 viewport的功能是用来约束你网站中最顶级包含块元素(containing block) 这听起来有一点模糊,所以看一个实际的例子。假设你有一个流式布局,并且你众多边栏中的一个具有 从技术上来说,发生的事情是边栏获取了它父元素宽度的10%。比方说是 普通情况下,所有块级元素使用它们父元素宽度的100%(这儿有一些例外,但是让我们现在先忽略它)。所以 那么 你可能不知道的是这个行为在理论上是如何工作的。理论上, viewport,接着,实际上等于浏览器窗口:它就是那么定义的。viewport不是一个HTML结构,所以你不能用CSS来改变它。它在桌面环境下只是拥有浏览器窗口的宽度和高度。在移动环境下它会有一些复杂。 后果 Consequences这个状况会有产生一些异样的后果。你可以在这个站点看到这些后果中的一个。滚动到顶部,然后放大两次或者三次,之后这个站点的内容就从浏览器窗口溢出了。 现在滚动到右边,然后你将会看见站点顶部的蓝色边栏不再覆盖一整行了。 这个行为是由于viewport的定义方式而产生的一个后果。我之前给顶部的蓝色边栏设置了 问题是:在100%缩放的情况下这个工作的很好,现在我们进行了放大操作,viewport变得比我的站点的总体宽度要小。这对于viewport它本身来说没什么影响,内容现在从 但是蓝色边栏并没有溢出。我之前给它设置了 文档宽度?我真正需要知道的是页面中全部内容的宽度是多少,包括那些「伸出」的部分。据我所知得到这个值是不可能的(好吧,除非你去计算页面上所有元素的宽度和边距,但是委婉的说,这是容易出错的)。 我开始相信我们需要一个我称其为「文档宽度」(document width,很显然用CSS像素进行度量)的JavaScript属性对。 并且如果我们真的如此时髦,为什么不把这个值引入到CSS中?我将会给我的蓝色边栏设置 浏览器厂商们,你们怎么认为的? 度量viewportdocument.documentElement.clientWidth/Height
你可能想知道viewport的尺寸。它们可以通过 如果你了解DOM,你应该知道 在那种情况下 所以 两个属性对但是难道viewport宽度的尺寸也可以通过 两个属性对之间存在着正式区别: 事实上两个属性对的存在是浏览器战争的产物。当时Netscape只支持 在桌面环境上拥有两个属性对是有一些累赘的 - 但是就像我们将要看到的,在移动端这将会得到祝福。 度量<html>元素document.documentElement.offsetWidth/Height
所以 这些属性可以使你以块级元素的形式访问 事件中的坐标pageX/Y, clientX/Y, screenX/Y
然后是事件中的坐标。当一个鼠标事件发生时,有不少于五种属性对可以给你提供关于事件位置的信息。对于我们当前的讨论来说它们当中的三种是重要的:
90%的时间你将会使用 媒体查询媒体查询
最后,说说关于媒体查询的事。原理很简单:你可以声明「只在页面宽度大于,等于或者小于一个特定尺寸的时候才会被执行」的特殊的CSS规则。比如:
当前sidebar是300px宽,除了当宽度小于400px的时候,在那种情况下sidebar变得100px宽。 问题很显然:我们这儿度量的是哪个宽度? 这儿有两个对应的媒体查询:
你应该使用哪个?这还用想?当然是 所以在桌面环境下去使用 总结本文总结了我们对桌面浏览器行为的探寻。这个系列的第二部分把这些概念指向了移动端,并显示的指出了与桌面环境上的一些重要区别。 (完) |
|