两个viewport的传说-part one

Posted 田木夕

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了两个viewport的传说-part one相关的知识,希望对你有一定的参考价值。

概念:设备像素和css像素

设备像素:通常可以通过screen.width/height 获取

如果你设置一个元素宽度为128px,你的显示器为1024px,最大化浏览器窗口,元素占来显示器的1/8。如果缩放200%,元素占来显示器的1/4。

现代浏览器中的缩放只是拉伸来像素,也就是说,元素并不是从128px变成了256px; 元素还是128 css像素,即使它占用了256设备像素。也就是说,当缩放200%时,1 css px 变成了四个device px;

100%的缩放下,1 css px 正好覆盖 1 device px:

  

放大:

 

缩小:

 

这里我们关心的时css px,因为是css px 控制样式表怎么渲染。浏览器会自动保证你的css 布局拉伸收缩。

现在我们有了清楚的定义,zoom 100%时:

1 css px = 1 设备 px

这个概念对于解释下面的内容很有用。在桌面浏览器里,无论你怎么缩放,css px 都会保证你的布局元素之间的大小比例是一样的。

屏幕尺寸

让我们来看一些实际的测量。首先screen.width/height。它们是屏幕的宽高。这些大小是以设备像素为基础的,因为它们是不会变的,是显示屏的特征不适浏览器的。

 

window size

然而,你想知道的是浏览器窗口内层(即显示网页正文的窗口)大小。这关系到你的css 布局。你可以用window.innerWidth/innerHeight来获取。

 

显然,window.innerWidth是css px来衡量的。你需要知道你在浏览器窗口能放多少元素,并且当用户放大浏览器时元素的数量减少。所以,如果用户放大浏览器,你的可用空间就少了,window.innerWidth/Height也变小了。(opera浏览器不是这样,当用户放大时,window.innerWidth/Height不变小,它们时用device px来衡量的,电脑上有点讨厌,可是移动端更致命。。)

记住: window.innerWidth/Height 包括了滚动条。

Scrolling offset

window.pageXOffset/pageYOffset, 表示文档的水平和垂直滚动偏移量。通过它们你可以知道用户滚动了多少。

 

这些属性也用css px 衡量的。理论上,当用户向上滚动了并且放大了,window.pageXOffset/pageYOffset会变化。然而,当用户缩放时浏览器会尽量保持在同一个元素的位置。

Concept: the viewport

现在我们介绍一些另一个概念:the viewport(视窗),viewport的作用是为了约束html元素,你可以理解为html元素的上一层元素。

听起来啃根有点困惑,下面我们给一些实际的例子。假设你有一个流式布局,其中侧边栏的宽度是10%;当你缩放浏览器窗口时,这个侧边栏也缩放。这是怎么实现的呢?

技术层面,侧边栏是它父元素宽度的10%,可能是<body>,这个问题就变成了<body>的宽度是继承谁的。

通常,block元素的宽度是它们父元素宽度的100%;所以<body>的宽度和<html>一样。

那么,<html>元素的宽度怎么来的呢?它的宽度就是浏览球窗口的宽度 。这就是为什么侧边栏的宽度是浏览器窗口宽度的10%,这一点所有的开发都清楚。

你可能不知道这是怎么实现的。理论上,<html>元素的宽度被限制在viewport的宽度里。即<html> 元素占了100%的viewport。

viewport,就是浏览器窗口。viewport不是html的结构,所以你不能用css定义它。在电脑端它只是有浏览器窗口的宽和高,移动端稍微复杂了些。

Consequences

这种状况有一些奇怪的结果。你可以在本页面就可以看到一种。滚动到顶部,放大两到三次,页面上的内容超出了浏览器窗口。

滚动到最右边,你会看到蓝色的条并没有连起来。

这种结果就是viewport怎么被定义的。我给了蓝色的条宽度100%。100%相对于谁?肯定是<html>元素,它的宽度和viewport又是一样的,viewport又和浏览器窗口一样的。

 

 

 

 

 

 

设备像素,独立设备像素,物理像素,逻辑像素,像素比

1.概念

为来约束html元素的

1. layout viewport ,也就是这个浏览器默认的viewport

2. visual viewport  , 浏览器可视区域viewport

3. ideal viewport  ,移动设备的理想viewport

the user\'s visible area of a web page:web页面的用户可见区域

- 浏览器的放大缩小

              

 

以上是关于两个viewport的传说-part one的主要内容,如果未能解决你的问题,请参考以下文章

第三部分-----移动开发与响应式

银河英雄传说

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

加入两个产生空数据的 RDD

中国有两个“造字”故事,一个在远古传说,一个在虚拟现实

中国有两个“造字”故事,一个在远古传说,一个在虚拟现实