就是将屏幕横向分为1366个像素,   译文出处

作者: 前端  发布:2019-11-09

文档宽度?

我真正需要知道的是页面中全部内容的宽度是多少,包括那些「伸出」的部分。据我所知得到这个值是不可能的(好吧,除非你去计算页面上所有元素的宽度和边距,但是委婉的说,这是容易出错的)。

我开始相信我们需要一个我称其为「文档宽度」(document width,很显然用CSS像素进行度量)的JavaScript属性对。

9159.com 1

并且如果我们真的如此时髦,为什么不把这个值引入到CSS中?我将会给我的蓝色边栏设置width: 100%,此值基于文档宽度,而不是<html>元素的宽度。(但是这个很复杂,并且如果不能实现我也不会感到惊讶。)

浏览器厂商们,你们怎么认为的?

 

设备像素对你(译者:指的是开发者)来说基本上没用。但是对于用户不一样;用户将会放大或者缩小页面直到他能舒服的阅读为止。无论怎样,缩放比例对你不会产生影响。浏览器将会自动的使你的CSS布局被拉伸或者被压缩。

二、属性

2.1 screen.width、screen.height
屏幕的分辨率,一般是不变的,度量单位为设备像素。

2.2 window.innerWidth、window.innerHeight
浏览器的内部尺寸,包括了滚动条,度量单位为css像素。
调整浏览器大小会改变值,改变页面的缩放比例也会改变值,因为它是用css度量的。

2.3 window.pageXOffset、window.pageYOffset
页面横向滚动距离和纵向滚动距离,可以理解为当前视口顶部页面顶部的距离,度量单位为css像素。当页面上下或者左右滚动时,相应的值会发生变化。

2.4 document.documentElement.clientWidth / Height
viewport尺寸,用css像素度量,不包括滚动条。即页面目前的可视窗口,调整浏览器大小和进行页面缩放会改变它的大小

2.5 document.documentElement.offsetWidth / Height
<html>元素的尺寸,用css像素度量。是整个页面的大小,如果你对html元素设置了固定的width和height,那么调整浏览器大小和进行页面的缩放不会改变它的大小。

概念:设备像素和CSS像素

你需要明白的第一个概念是CSS像素,以及它和设备像素的区别。

设备像素是我们直觉上觉得「靠谱」的像素。这些像素为你所使用的各种设备都提供了正规的分辨率,并且其值可以(通常情况下)从screen.width/height属性中读出。

如果你给一个元素设置了width: 128px的属性,并且你的显示器是1024px宽,当你最大化你的浏览器屏幕,这个元素将会在你的显示器上重复显示8次(大概是这样;我们先忽略那些微妙的地方)。

如果用户进行缩放,那么计算方式将会发生变化。如果用户放大到200%,那么你的那个拥有width: 128px属性的元素在1024px宽的显示器上只会重复显示4次。

现代浏览器中实现缩放的方式无怪乎都是「拉伸」像素。所以,元素的宽度并没有从128被修改为256像素;相反是实际像素被放大了两倍。形式上,元素仍然是128个CSS像素宽,即使它占据了256个设备像素的空间。

换句话说,放大到200%使一个CSS像素变成一个设备像素的四倍。(宽度2倍,高度2倍,总共4倍)

一些图片可以解释清楚这个概念。这儿有四个100%缩放比的元素。这儿没有什么值得看的;CSS像素与设备像素完全重叠。

9159.com 2

现在让我们缩小。CSS像素开始收缩,这意味着现在一个设备像素覆盖了多个CSS像素。

9159.com 3

如果你进行放大,相反的行为会发生。CSS像素开始变大,现在一个CSS像素覆盖了多个设备像素。

9159.com 4

这儿的要点是你只对CSS像素感兴趣。这些就是那些控制你的样式表如何被渲染的像素。

设备像素对你(译者:指的是开发者)来说基本上没用。但是对于用户不一样;用户将会放大或者缩小页面直到他能舒服的阅读为止。无论怎样,缩放等级对你不会产生影响。浏览器将会自动的使你的CSS布局被拉伸或者被压缩。

 

总结

结语

初次在简书写文章,语言组织混乱,有错误的地方还望原谅并指出。另外,对于物理像素和逻辑像素,本人还存在着疑问,希望能在下篇文章中得出答案。

事件中的坐标

pageX/Y, clientX/Y, screenX/Y

  • 意义:见正文。
  • 度量单位:见正文。
  • 浏览器错误:IE不支持pageX/Y。IE和Opera以CSS像素为单位计算screenX/Y。

然后是事件中的坐标。当一个鼠标事件发生时,有不少于五种属性对可以给你提供关于事件位置的信息。对于我们当前的讨论来说它们当中的三种是重要的:

  • pageX/Y提供了相对于<html>元素的以CSS像素度量的坐标。

9159.com 5

  • clientX/Y提供了相对于viewport的以CSS像素度量的坐标。

9159.com 6

  • screenX/Y提供了相对于屏幕的以设备像素进行度量的坐标。

9159.com 7

90%的时间你将会使用pageX/Y;通常情况下你想知道的是相对于文档的事件坐标。其他的10%时间你将会使用clientX/Y。你永远不需要知道事件相对于屏幕的坐标。

 

屏幕尺寸

visual viewport

手机屏幕的大小就是visual viewport,即手机屏幕能显示的大小。
看看Chris给出的解释

visual viewport是页面当前显示在屏幕上的部分。用户可以通过滚动来改变他所看到的页面的部分,或者通过缩放来改变visual viewport的大小。

本人的理解是:想象你在高空中俯瞰大地,投入你视野的便是visual viewport,可以通过调整你的高度来调整你的visual viewport大小,高度越低,看到的范围越小(放大),高度越高,看到的范围越大(缩小);而整个大地,即layout viewport的大小和形状是不会变的。
  假设用css单位来衡量的话,那么layout viewport大小不变,即它的css像素大小不变,在手机屏幕上可以通过缩放来调节visual viewport的大小,当放大时,单位css像素所占的屏幕像素变大,因此整个屏幕的所占有的css像素变少,于是visual viewport变小;同理,当缩小时,visual viewport会变大。

两个viewport的关系:
通常来说,pc的显示器都远远大于手机,因此能显示的内容更多,可以认为在桌面浏览器中的html元素的大小即是整个layout viewport的大小。而在移动设备上,如果不对页面进行缩小,那么屏幕上只能看到layout viewport的一部分,就像这样

想要看到更多的layout viewport,那么就只能进行缩小。当layout viewport完全缩小在手机屏幕中时,此时两个viewport的大小时相等的。

两个属性对

但是难道viewport宽度的尺寸也可以通过window.innerWidth/Height来提供吗?怎么说呢,模棱两可。

两个属性对之间存在着正式区别:document.documentElement.clientWidth-Height并不包含滚动条,但是window.innerWidth/Height包含。这像是鸡蛋里挑骨头。

事实上两个属性对的存在是浏览器战争的产物。当时Netscape只支持window.innerWidth/Height,IE只支持document.documentElement.clientWidthHeight。从那时起所有其他浏览器开始支持clientWidth/Height,但是IE没有支持window.innerWidth/Height

在桌面环境上拥有两个属性对是有一些累赘的 - 但是就像我们将要看到的,在移动端这将会得到祝福。

 

document.documentElement.offsetWidth/Height

度量layout viewport

同桌面浏览器一样,可以用document.documentElement.clientWidth / Height,这个属性指向了layout viewport的尺寸

后果 Consequences

这个状况会有产生一些异样的后果。你可以在这个站点看到这些后果中的一个。滚动到顶部,然后放大两次或者三次,之后这个站点的内容就从浏览器窗口溢出了。

现在滚动到右边,然后你将会看见站点顶部的蓝色边栏不再覆盖一整行了。

9159.com 8

这个行为是由于viewport的定义方式而产生的一个后果。我之前给顶部的蓝色边栏设置了width: 100%。什么的100%?<html>元素的100%,它的宽度和viewport是一样的,viewport的宽度是和浏览器窗口一样的。

问题是:在100%缩放的情况下这个工作的很好,现在我们进行了放大操作,viewport变得比我的站点的总体宽度要小。这对于viewport它本身来说没什么影响,内容现在从<html>元素中溢出了,但是那个元素拥有overflow: visible,这意味着溢出的内容在任何情况下都将会被显示出来。

但是蓝色边栏并没有溢出。我之前给它设置了width: 100%,并且浏览器把viewport的宽度赋给了它。它们根本就不在乎现在宽度实在是太窄了。

9159.com 9

 

}

viewport

首先要明确一点关系,屏幕显示器包含了浏览器,浏览器包含了viewport,viewport中包含了<html>元素。并且
document.documentElement.clientWidth / Height 指向viewport的大小
document.documentElement.offsetWidth / Height 指向html元素的大小

虽然viewport包含了html元素,实际上html元素是可以比viewport大的(你需要手动设置这个值)。通常开发者都不会去设定html元素的大小,那么此时html元素的大小时就是viewport的大小,你可以打开控制台,输入下面这条语句,结果一定是返回true。
console.log(document.documentElement.clientWidth===document.documentElement.offsetWidth)
  现在你可以打开编辑器,设置html的宽度为1000px或者其他,只要不等于viewport的宽度就行,再在控制台输入这条语句,结果一定是返回false。

概念:viewport

在我们继续介绍更多的JavaScript属性之前,我们必须介绍另一个概念:viewport。

viewport的功能是用来约束你网站中最顶级包含块元素(containing block)<html>的。

这听起来有一点模糊,所以看一个实际的例子。假设你有一个流式布局,并且你众多边栏中的一个具有width: 10%属性。现在这个边栏会随着浏览器窗口大小的调整而恰好的放大和收缩。但是这到底是如何工作的呢?

从技术上来说,发生的事情是边栏获取了它父元素宽度的10%。比方说是<body>元素(并且你还没有给它设置过宽度)。所以问题就变成了<body>的宽度是哪个?

普通情况下,所有块级元素使用它们父元素宽度的100%(这儿有一些例外,但是让我们现在先忽略它)。所以<body>元素和它的父元素<html>一样宽。

那么<html>元素的宽度是多少?它的宽度和浏览器窗口宽度一样。这就是为什么你的那个拥有width: 10%属性的侧边栏会占据整个浏览器窗口的10%。所有web开发者都很直观的知道并且在使用它。

你可能不知道的是这个行为在理论上是如何工作的。理论上,<html>元素的宽度是被viewport的宽度所限制的。<html>元素使用viewport宽度的100%。

viewport,接着,实际上等于浏览器窗口:它就是那么定义的。viewport不是一个HTML结构,所以你不能用CSS来改变它。它在桌面环境下只是拥有浏览器窗口的宽度和高度。在移动环境下它会有一些复杂。

 

你可能想知道viewport的尺寸。它们可以通过document.documentElement.clientWidth和-Height得到。

五、移动浏览器的viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

在移动web的开发中,常常可以看到这个标签,要了解这个各个参数的含义,首先要明白两个移动浏览器中的两个viewport:layout viewport和visual viewport。

度量viewport

document.documentElement.clientWidth/Height

  • 意义:Viewport尺寸。
  • 度量:CSS像素。
  • 浏览器错误:无。

你可能想知道viewport的尺寸。它们可以通过document.documentElement.clientWidth-Height得到。

9159.com 10

如果你了解DOM,你应该知道document.documentElement实际上指的是<html>元素:即任何HTML文档的根元素。可以说,viewport要比它更高一层;它是包含<html>元素的元素。如果你给<html>元素设置width属性,那么这将会产生影响。(我不推荐这么做,但是那是可行的。)

在那种情况下document.documentElement.clientWidth-Height给出的仍然是viewport的尺寸,而不是<html>元素的。(这是一个特殊的规则,只对这个元素的这个属性对产生作用。在任何其他的情况下,使用的是元素的实际宽度。)

9159.com 11

所以document.documentElement.clientWidth-Height一直代表的是viewport的尺寸,不管<html>元素的尺寸是多少。

 

你需要明白的第一个概念是CSS像素,以及它和设备像素的区别。

三、事件中的坐标

9159.com,3.1 pageX、pageY
表示相对于<html>元素的以css像素度量的事件坐标。

3.2 clientX、clientY
表示相对于viewport的以css像素度量的事件坐标。

3.3 screenX、screenY
表示相对于屏幕的以设备像素度量的事件坐标,一般是不会用到的。

两个viewport的故事(第一部分)

2013/07/29 · CSS · CSS

原文出处: quirksmode   译文出处:魏志锋   

在这个迷你系列的文章里边我将会解释viewport,以及许多重要元素的宽度是如何工作的,比如<html>元素,也包括窗口和屏幕

这篇文章是关于桌面浏览器的,其唯一目的就是为移动浏览器中相似的讨论做个铺垫。大部分开发者凭直觉已经明白了大部分桌面浏览器中的概念。在移动端我们将会接触到相同的概念,但是会更加复杂,所以对大家已经知道的术语做个提前的讨论将会对你理解移动浏览器产生巨大的帮助。

 

原文:http://www.quirksmode.org/mobile/viewports.html

layout viewport

这是 stack overflow上的George Cummins解释:

把layout viewport想像成为一张不会变更大小或者形状的大图。现在想像你有一个小一些的框架,你通过它来看这张大图。(译者:可以理解为「管中窥豹」)这个小框架的周围被不透明的材料所环绕,这掩盖了你所有的视线,只留这张大图的一部分给你。你通过这个框架所能看到的大图的部分就是visual viewport。当你保持框架(缩小)来看整个图片的时候,你可以不用管大图,或者你可以靠近一些(放大)只看局部。你也可以改变框架的方向,但是大图(layout viewport)的大小和形状永远不会变。

100%缩放

我是以假设缩放等级为100%来开始这个例子的。是时候需要更加严格的来定义一下这个100%了:

JavaScript

在缩放等级100%的情况下一个CSS像素完全等于一个设备像素。

1
在缩放等级100%的情况下一个CSS像素完全等于一个设备像素。

100%缩放的概念在接下来的解释中会非常有用,但是在你的日常工作中你不用过分的担心它。在桌面环境上你将会在100%缩放等级的情况下测试你的站点,但即使用户放大或者缩小,CSS像素的魔力将会保证你的布局保持相同的比率。

 

网址:

度量visual viewport

window.innerWidth/Height可以用来度量visual viewport的尺寸,当用户缩小或者放大的时候,度量的尺寸会发生变化,因为屏幕上的CSS像素会增加或者减少。这和上面关于css的关于visual viewport的假设一致。

窗口尺寸

window.innerWidth/Height

  • 意义:浏览器窗口的整体大小,包括滚动条。
  • 度量单位:CSS像素。
  • 浏览器错误:IE7不支持。Opera以设备像素进行度量。

相反,你想知道的是浏览器窗口的内部尺寸。它告诉了你用户到底有多少空间可以用来做CSS布局。你可以通过window.innerWidthwindow.innerHeight来获取这些尺寸。

9159.com 12

很显然,窗口的内部宽度是以CSS像素进行度量的。你需要知道你的布局空间中有多少可以挤进浏览器窗口,当用户放大的时候这个数值会减少。所以如果用户进行放大操作,那么在窗口中你能获取的空间将会变少,window.innerWidth/Height的值也变小了。 (这儿的例外是Opera,当用户放大的时候window.innerWidth/Height并没有减少:它们是以设备像素进行度量的。这个问题在桌面上是比较烦人的,但是就像我们将要看到的,这在移动设备上是非常严重的。)

9159.com 13

注意度量的宽度和高度是包括滚动条的。它们也被视为内部窗口的一部分。(这大部分是因为历史原因造成的。)

 

如果device-width/height是以CSS像素进行度量的,那么Firefox将会使用screen.width/height的值。

meta标签

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
现在可以对meta标签来进行解释了
width=device-width:表示layout viewport大小为设备像素大小
initial-scale=1.0:表示初始缩放为1
minimum-scale=1.0:表示最小缩放为1
maximum-scale=1.0:表示最大缩放为1
user-scalable=no:表示不允许用户缩放

对于不同的手机浏览器,其规定的layout viewport大小不一,Safari iPhone为980px,Opera为850px,Android WebKit为800px,最后IE为974px。可以通过width来重置其大小。

假设你在一台iPad设备(设备像素为768*1024)上运行如下标签
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=yes">
那么其layout viewport即document.documentElement.clientWidth/Height为768,就算缩放也不会改变大小;
而其visual viewport :window.innerWidth/Height则会随着缩放而改变大小。

因此,当设置layout viewport为设备像素大小且禁止缩放时,就能使两个viewport的大小相等,从而使设置了媒体查询样式的页面适应手机屏幕。

度量<html>元素

document.documentElement.offsetWidth/Height

  • 意义:元素(也就是页面)的尺寸。
  • 度量:CSS像素。
  • 浏览器错误:IE度量的是viewport,而不是元素。

所以clientWidth/Height在所有情况下都提供viewport的尺寸。但是我们去哪里获取<html>元素本身的尺寸呢?它们存储在document.documentElement.offsetWidth-Height之中。

9159.com 14

这些属性可以使你以块级元素的形式访问<html>元素;如果你设置width,那么offsetWidth将会表示它。

9159.com 15

 

浏览器厂商们,你们怎么认为的?

前言:

本文是在阅读关于viewport的两篇文章后,对于这些常常忘记和混淆的的知识有了一定的理解,为了方便以后查询和使用,以此文记录。如果你在看完此文后还是一知半解,可以点击这里查看原文。

媒体查询

媒体查询

  • 意义:见正文。
  • 度量单位:见正文。
  • 浏览器错误:IE不支持它们。
    • 如果 device-width/height是以CSS像素进行度量的,那么Firefox将会使用screen.width/height的值。
    • 如果width/height是以设备像素进行度量的,那么Safari和Chrome将会使用documentElement.clientWidth/Height的值。

最后,说说关于媒体查询的事。原理很简单:你可以声明「只在页面宽度大于,等于或者小于一个特定尺寸的时候才会被执行」的特殊的CSS规则。比如:

CSS

div.sidebar { width: 300px; } @media all and (max-width: 400px) { // styles assigned when width is smaller than 400px; div.sidebar { width: 100px; } }

1
2
3
4
5
6
7
8
9
10
11
div.sidebar {
width: 300px;
}
 
@media all and (max-width: 400px) {
// styles assigned when width is smaller than 400px;
div.sidebar {
width: 100px;
}
 
}

当前sidebar是300px宽,除了当宽度小于400px的时候,在那种情况下sidebar变得100px宽。

问题很显然:我们这儿度量的是哪个宽度?

这儿有两个对应的媒体查询:width/heightdevice-width/device-height

  1. width/height使用和documentElement .clientWidth/Height(换句话说就是viewport宽高)一样的值。它是工作在CSS像素下的。
  2. device-width/device-height使用和screen.width/height(换句话说就是屏幕的宽高)一样的值。它工作在设备像素下面。

9159.com 16

你应该使用哪个?这还用想?当然是width。Web开发者对设备宽度不感兴趣;这个是浏览器窗口的宽度。

所以在桌面环境下去使用width而去忘记device-width吧。我们即将看到这个情况在移动端会更加麻烦。

 

并且如果我们真的如此时髦,为什么不把这个值引入到CSS中?我将会给我的蓝色边栏设置width: 100%,此值基于文档宽度,而不是元素的宽度。(但是这个很复杂,并且如果不能实现我也不会感到惊讶。)

一、设备像素和css像素

设备像素
  对于pc来说,设备像素就是屏幕的分辨率,比如1366*768,就是将屏幕横向分为1366个像素,纵向分为768个像素。一般来说,这个参数是固定不变的,但是你可以通过pc的显示设置去调节它,但没有人会去把分辨率调整到让自己不舒适的状态。
  这个属性可以通过JavaScript的screen.width/height属性得到。

css像素
  当你对某个div块设置width:100px;并设置背景颜色时,在浏览器中这个颜色的区域宽度就是100px的css像素。css像素的大小可以通过浏览器的缩放进行调节的。假设你的浏览器页面缩放为100%,此时一个css像素就对应1个设备像素;如果你将页面放大至200%,那么一个css像素就对应4个设备像素,因为宽和高都被拉伸了1倍。通过几张图片应该能够更好的理解它。

这是100%缩放时,css像素和设备像素完全重合

100%

缩小页面比例,css像素变小,一个设备像素覆盖了多个css像素

小于100%

放大页面比例,css像素变大,一个css像素覆盖多个设备像素

大于100%

总结

本文总结了我们对桌面浏览器行为的探寻。这个系列的第二部分把这些概念指向了移动端,并显示的指出了与桌面环境上的一些重要区别。

赞 收藏 评论

9159.com 17

window.pageXOffset和window.pageYOffset,包含了文档水平和垂直方向的滚动距离。所以你可以知道用户已经滚动了多少距离。

四、媒体查询

@media all and(max-width:500px){...}

在媒体查询中,width和height查询的是viewport的宽高,以css像素度量

@media all and(max-device-width:500px){...}

device-width和device-height查询的是屏幕的宽高,是以设备像素作为度量的,这个参数一般是不变的,因此这个参数对于响应式的开发者来说是没有用处的。

滚动距离

window.pageX/YOffset

  • 意义:页面滚动的距离。
  • 度量:CSS像素。
  • 浏览器错误:无。

window.pageXOffsetwindow.pageYOffset,包含了文档水平和垂直方向的滚动距离。所以你可以知道用户已经滚动了多少距离。

9159.com 18

这些属性也是以CSS像素进行度量的。你想知道的是文档已经被滚动了多长距离,不管它是放大还是缩小的状态。

理论上,如果用户向上滚动,然后放大,window.pageX/YOffset将会发生变化。但是,浏览器为了想保持web页面的连贯,会在用户缩放的时候保持相同的元素位于可见页面的顶部。这个机制并不能一直很完美的执行,但是它意味着在实际情况下window.pageX/YOffset并没有真正的更改:被滚动出窗口的CSS像素的数量仍然(大概)是相同的。

9159.com 19

 

度量元素

媒体查询

width和height使用layout viewport作为参照物,device-width和device-height仍然以设备像素作为参照,换句话说,
width和height以document.documentElement.clientWidth/Height为参照
device-width和device-height以screen.width/height为参照

屏幕尺寸

screen.width/height

  • 意义:用户屏幕的整体大小。
  • 度量单位:设备像素。
  • 浏览器错误:IE8以CSS像素对其进行度量,IE7和IE8模式下都有这个问题。

让我们看一些实用的度量。我们将会以screen.widthscreen.height做为开始。它们包括用户屏幕的整个宽度和高度。它们的尺寸是以设备像素来进行度量的,因为它们永远不会变:它们是显示器的属性,而不是浏览器的。

9159.com 20

Fun! 但是这些信息跟对我们有什么用呢?

基本上没用。用户的显示器尺寸对于我们来说不重要-好吧,除非你想度量它来丰富你的web统计数据库。

 

注意度量的宽度和高度是包括滚动条的。它们也被视为内部窗口的一部分。(这大部分是因为历史原因造成的。)

媒体查询

很显然,窗口的内部宽度是以CSS像素进行度量的。你需要知道你的布局空间中有多少可以挤进浏览器窗口,当用户放大的时候这个数值会减少。所以如果用户进行放大操作,那么在窗口中你能获取的空间将会变少,window.innerWidth/Height的值也变小了。 (这儿的例外是Opera,当用户放大的时候window.innerWidth/Height并没有减少:它们是以设备像素进行度量的。这个问题在桌面上是比较烦人的,但是就像我们将要看到的,这在移动设备上却是非常严重的。)

浏览器错误:IE8以CSS像素对其进行度量,IE7和IE8模式下都有这个问题。

让我们看一些实用的度量。我们将会以screen.width和screen.height做为开始。它们包括用户屏幕的整个宽度和高度。它们的尺寸是以设备像素来进行度量的,因为它们永远不会变:它们是显示器的属性,而不是浏览器的。

window.pageX/YOffset

这些属性也是以CSS像素进行度量的。你想知道的是文档已经被滚动了多长距离,不管它是放大还是缩小的状态。

问题是:在100%缩放的情况下这个工作的很好,现在我们进行了放大操作,viewport变得比我的站点的总体宽度要小。这对于viewport它本身来说没什么影响,内容现在从元素中溢出了,但是那个元素拥有overflow: visible,这意味着溢出的内容在任何情况下都将会被显示出来。

所以document.documentElement.clientWidth和-Height一直代表的是viewport的尺寸,不管元素的尺寸是多少。

理论上,如果用户向上滚动,然后放大,window.pageX/YOffset将会发生变化。但是,浏览器为了想保持web页面的连贯,会在用户缩放的时候保持相同的元素位于可见页面的顶部。这个机制并不能一直很完美的执行,但是它意味着在实际情况下window.pageX/YOffset并没有真正的更改:被滚动出窗口的CSS像素的数量仍然(大概)是相同的。

现在滚动到右边,然后你将会看见站点顶部的蓝色边栏不再覆盖一整行了。

// styles assigned when width is smaller than 400px;

pageX/Y, clientX/Y, screenX/Y

意义:见正文。

但是难道viewport宽度的尺寸也可以通过window.innerWidth/Height来提供吗?怎么说呢,模棱两可。

(完)

度量单位:见正文。

如果width/height是以设备像素进行度量的,那么Safari和Chrome将会使用documentElement.clientWidth/Height的值。

概念:设备像素和CSS像素

两个属性对

现代浏览器中实现缩放的方式无怪乎都是「拉伸」像素。所以,元素的宽度并没有从128个像素被修改为256个像素;相反是实际像素被放大了两倍。形式上,元素仍然是128个CSS像素宽,即使它占据了256个设备像素的空间。

度量单位:CSS像素。

窗口尺寸

那么元素的宽度是多少?它的宽度和浏览器窗口宽度一样。这就是为什么你的那个拥有width: 10%属性的侧边栏会占据整个浏览器窗口的10%。所有web开发者都很直观的知道并且在使用它。

浏览器错误:IE不支持pageX/Y。IE和Opera以CSS像素为单位计算screenX/Y。

媒体查询

width: 100px;

这篇文章是关于桌面浏览器的,其唯一的目的就是为移动浏览器中相似的讨论做个铺垫。大部分开发者凭直觉已经明白了大部分桌面浏览器中的概念。在移动端我们将会接触到相同的概念,但是会更加复杂,所以对大家已经知道的术语做个提前的讨论将会对你理解移动浏览器产生巨大的帮助。

90%的时间你将会使用pageX/Y;通常情况下你想知道的是相对于文档的事件坐标。其他的10%时间你将会使用clientX/Y。你永远不需要知道事件相对于屏幕的坐标。

本文总结了我们对桌面浏览器行为的探寻。这个系列的第二部分把这些概念指向了移动端,并显示的指出了与桌面环境上的一些重要区别。

@media all and (max-width: 400px) {

在缩放比例100%的情况下一个CSS像素完全等于一个设备像素。

概念:viewport

意义:用户屏幕的整体大小。

度量viewport

浏览器错误:无。

普通情况下,所有块级元素使用它们父元素宽度的100%(这儿有一些例外,但是让我们现在先忽略它)。所以元素和它的父元素一样宽。

浏览器错误:IE度量的是viewport,而不是元素。

两个属性对之间存在着正式区别:document.documentElement.clientWidth和-Height并不包含滚动条,但是window.innerWidth/Height包含。这像是鸡蛋里挑骨头。

如果你进行放大,相反的行为会发生。CSS像素开始变大,现在一个CSS像素覆盖了多个设备像素。

device-width/device-height使用和screen.width/height(换句话说就是屏幕的宽高)一样的值。它工作在设备像素下面。

度量单位:CSS像素。

这儿有两个对应的媒体查询:width/height和device-width/device-height。

意义:页面滚动的距离。

如果用户进行缩放,那么计算方式将会发生变化。如果用户放大到200%,那么你的那个拥有width: 128px属性的元素在1024px宽的显示器上只会重复显示4次。

浏览器错误:IE不支持它们。

100%缩放的概念在接下来的解释中会非常有用,但是在你的日常工作中你不用过分的担心它。在桌面环境上你将会在100%缩放比例的情况下测试你的站点,但即使用户放大或者缩小,CSS像素的魔力将会保证你的布局保持相同的比率。

事实上两个属性对的存在是浏览器战争的产物。当时Netscape只支持window.innerWidth/Height,IE只支持document.documentElement.clientWidth和Height。从那时起所有其他浏览器开始支持clientWidth/Height,但是IE没有支持window.innerWidth/Height。

如果你了解DOM,你应该知道document.documentElement实际上指的是元素:即任何HTML文档的根元素。可以说,viewport要比它更高一层;它是包含元素的元素。如果你给元素设置width属性,那么这将会产生影响。(我不推荐这么做,但是那是可行的。)

这些属性可以使你以块级元素的形式访问元素;如果你设置width,那么offsetWidth将会表示它。

换句话说,放大到200%使一个CSS像素变成为一个设备像素的四倍。(宽度2倍,高度2倍,总共4倍)

viewport,接着,实际上等于浏览器窗口:它就是那么定义的。viewport不是一个HTML结构,所以你不能用CSS来改变它。它在桌面环境下只是拥有浏览器窗口的宽度和高度。在移动环境下它会有一些复杂。

意义:见正文。

所以在桌面环境下去使用width而去忘记device-width吧。我们即将看到这个情况在移动端会更加麻烦。

我真正需要知道的是页面中全部内容的宽度是多少,包括那些「伸出」的部分。据我所知得到这个值是不可能的(好吧,除非你去计算页面上所有元素的宽度和边距,但是委婉的说,这是容易出错的)。

div.sidebar {

这个状况会有产生一些异样的后果。你可以在这个站点看到这些后果中的一个。滚动到顶部,然后放大两次或者三次,之后这个站点的内容就从浏览器窗口溢出了。

意义:浏览器窗口的整体大小,包括滚动条。

作者: JeremyWei | 可以转载, 但必须以超链接形式标明文章原始出处和作者信息及版权声明

width/height使用和documentElement .clientWidth/Height(换句话说就是viewport宽高)一样的值。它是工作在CSS像素下的。

相反,你想知道的是浏览器窗口的内部尺寸。它告诉了你用户到底有多少空间可以用来做CSS布局。你可以通过window.innerWidth和window.innerHeight来获取这些尺寸。

我开始相信我们需要一个我称其为「文档宽度」(document width,很显然用CSS像素进行度量)的JavaScript属性对。

浏览器错误:IE7不支持。Opera以设备像素进行度量。

现在让我们缩小。CSS像素开始收缩,这意味着现在一个设备像素覆盖了多个CSS像素。

意义:元素(也就是页面)的尺寸。

滚动距离

在这个迷你系列的文章里边我将会解释viewport,以及许多重要元素的宽度是如何工作的,比如元素,也包括窗口和屏幕。

pageX/Y提供了相对于元素的以CSS像素度量的坐标。

在我们继续介绍更多的JavaScript属性之前,我们必须介绍另一个概念:viewport。

你可能不知道的是这个行为在理论上是如何工作的。理论上,元素的宽度是被viewport的宽度所限制的。元素使用viewport宽度的100%。

clientX/Y提供了相对于viewport的以CSS像素度量的坐标。

度量单位:CSS像素。

文档宽度?

最后,说说关于媒体查询的事。原理很简单:你可以声明「只在页面宽度大于,等于或者小于一个特定尺寸的时候才会被执行」的特殊的CSS规则。比如:

度量单位:见正文。

在那种情况下document.documentElement.clientWidth和-Height给出的仍然是viewport的尺寸,而不是元素的。(这是一个特殊的规则,只对这个元素的这个属性对产生作用。在任何其他的情况下,使用的是元素的实际宽度。)

这听起来有一点模糊,所以看一个实际的例子。假设你有一个流式布局,并且你众多边栏中的一个具有width: 10%属性。现在这个边栏会随着浏览器窗口大小的调整而恰好的放大和收缩。但是这到底是如何工作的呢?

你应该使用哪个?这还用想?当然是width。Web开发者对设备宽度不感兴趣;这个是浏览器窗口的宽度。

意义:Viewport尺寸。

Fun! 但是这些信息跟对我们有什么用呢?

从技术上来说,发生的事情是边栏获取了它父元素宽度的10%。比方说是元素(并且你还没有给它设置过宽度)。所以问题就变成了的宽度是哪个?

screenX/Y提供了相对于屏幕的以设备像素进行度量的坐标。

viewport的功能是用来约束你网站中最顶级包含块元素(containing block)的。

div.sidebar {

我是以假设缩放比例为100%来开始这个例子的。是时候需要更加严格的来定义一下这个100%了:

}

如果你给一个元素设置了width: 128px的属性,并且你的显示器是1024px宽,当你最大化你的浏览器屏幕,这个元素将会在你的显示器上重复显示8次(大概是这样;我们先忽略那些微妙的地方)。

这个行为是由于viewport的定义方式而产生的一个后果。我之前给顶部的蓝色边栏设置了width: 100%。什么的100%?元素的100%,它的宽度和viewport是一样的,viewport的宽度是和浏览器窗口一样的。

设备像素是我们直觉上觉得「靠谱」的像素。这些像素为你所使用的各种设备都提供了正规的分辨率,并且其值可以(通常情况下)从screen.width/height属性中读出。

document.documentElement.clientWidth/Height

window.innerWidth/Height

但是蓝色边栏并没有溢出。我之前给它设置了width: 100%,并且浏览器把viewport的宽度赋给了它。它们根本就不在乎现在宽度实在是太窄了。

所以clientWidth/Height在所有情况下都提供viewport的尺寸。但是我们去哪里获取元素本身的尺寸呢?它们存储在document.documentElement.offsetWidth和-Height之中。

度量单位:CSS像素。

100%缩放

基本上没用。用户的显示器尺寸对于我们来说不重要-好吧,除非你想度量它来丰富你的web统计数据库。

当前sidebar是300px宽,除了当宽度小于400px的时候,在那种情况下sidebar变得100px宽。

在桌面环境上拥有两个属性对是有一些累赘的 - 但是就像我们将要看到的,在移动端这将会得到祝福。

screen.width/height

width: 300px;

浏览器错误:无。

然后是事件中的坐标。当一个鼠标事件发生时,有不少于五种属性对可以给你提供关于事件位置的信息。对于我们当前的讨论来说它们当中的三种是重要的:

这儿的要点是你只对CSS像素感兴趣。这些就是那些控制你的样式表如何被渲染的像素。

一些配图可以解释清楚这个概念。这儿有四个100%缩放比的元素。这儿没有什么值得看的;CSS像素与设备像素完全重叠。

问题很显然:我们这儿度量的是哪个宽度?

事件中的坐标

后果 Consequences

}

度量单位:设备像素。

本文由9159.com发布于前端,转载请注明出处:就是将屏幕横向分为1366个像素,   译文出处

关键词: