[译]viewports-第一篇

2020/3/4 11:01:41

编程Tag： 掘金翻译计划

本文主要是介绍[译]viewports-第一篇，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

【原文地址】www.quirksmode.org/mobile/view…

此系列文章将介绍viewports、html元素、window、screen对象中width的工作机制。

本文立足于PC浏览器介绍，但主要目的是为关于Mobile浏览器讨论提供基础。多数web开发者早已熟悉了PC端的某些术语、概念，当他们进入Mobile端开发时，会发现这些类似的术语和概念变得更加复杂。因此，关于这些术语的预先讨论将极大地帮助你了解Mobile端浏览器。

一设备物理像素和CSS像素

首先需要理解CSS像素，以及它与设备物理像素的区别。

直观上可以认为设备像素是一种“正确”像素，这种像素给定了正在使用的设备的标准化分辨率，通常可以用屏幕的宽/高计算得到。

如果设定元素的宽度为128px，而你的显示器是1024px宽，当你最大化浏览器窗口，此元素将可以平铺显示8次。

如果用户进行缩放，则上述计算将会改变。如果用户放大到200%，128px宽的元素将只能在1024px宽的屏幕上平铺显示4次。

在现代浏览器中，缩放的实现无非是一种像素的”伸缩“。即元素的宽度并没有从128px变到256px，而是实际像素翻倍了。元素依然是128px，只不过它恰好占据了256个设备像素。

换句话说，缩放大到200%使得CSS的像素变为了设备物理像素的4倍。（宽和高各自2倍，总的4倍）

如下图1中展示了4个像素在不缩放情况下的显示效果。看起来没有什么特别的，因为此时，CSS像素完全与设备的物理像素重叠在一起了。

图1

如果进行了缩小，图2中显示CSS像素开始变小，意味着1个设备物理像素可以覆盖到多个CSS像素（只是没能覆盖全，1个完整的，其余3个占据了部分）。

如果进行放大，图3中CSS像素开始变大，现在1个CSS像素可以占据多个设备物理像素。

这里的重点是说明了你应该只需要关注CSS像素。它将决定样式表是如何渲染的。而设备像素于你来说无用，对用户来说并非如此。用户将缩放页面直到他们读起来舒服为止。然而，这种级别的缩放并不妨碍开发者们。浏览器将自动对开发者的CSS布局进行伸缩布局。

二 100%缩放

以上的例子一开始就假设缩放比是100%。现在给这个术语下一个准确的定义：

100%缩放指的是1个CSS像素恰好等于1个物理像素（即图1中展示的样子）

在接下来的阐述中，100%缩放将是一个非常有用的概念，但在实际工作中你无需过度考虑它。在PC端WEB开发中，一般都是在100%缩放比之下测试网站的，即使用户进行了缩放，CSS像素的”魔力“也会确保你的布局保持同样的比例。

三屏幕尺寸（screen.width heigth）

接下来我们关注意一些实际的指标。比如：屏幕宽、高，代表了用户使用的显示屏的宽度和高度。这两个指标由于是不可变的，以设备物理像素来衡量的，是显示器的特性，不是浏览器的特性。这个屏幕的信息对开发者来说有啥用呢？实际上，一点用也没有。用户的显示器尺寸对我们来说无关紧要（除非你正在开发一款需要统计此类指标的网站）。

四窗口尺寸（window.innerHeight innerWidth）

你想知道的应该是浏览器窗口的内部尺寸。这个指标准确地告知你目前还有多少空间可供进行CSS布局。这两个指标是：window.innerHeight和innerWidth。很明显，窗口的内部宽度是以CSS像素衡量的。你需要知道浏览器窗口中还有多少空间可供布局，以及当用户放大时，缩减的空间是多少。因此，当用户放大时，你将在窗口中得到较少的可以空间，window.innerHeight和innerWidth也会相应的减少。（Opera浏览器是个例外，当用户放大时，window.innerHeight innerWidth不会减少——它是以设备像素为单位的。这个特性使得桌面浏览器比较令人恼火，在移动端则是致命的）

需要注意的是：这里的窗口宽高是包含了滚动条的。由于历史原因，它们也被视为是窗口内部的一部分。

五滚动偏移（window.pageXOffset pageYOffset）

window.pageXOffset和pageYOffset代表了文档在滚动时X水平轴和Y垂直轴上的偏移值。因此可以得到用户滚动了多少距离。这个指标也是用CSS像素衡量的。无论是否缩放，你可以方便地得知文档被滚动了多少。

理论上，如果用户滚动且放大了，window.pageXOffset和pageYOffset将会改变。然而，当用户进行缩放时浏览器将把缩放元素放置在可视页面的最上方以保持web页面的连续性。这个机制并不是总是可行，但这意味着实际上window.pageXOffset和pageYOffset是不会因缩放而改变的。

六 viewport

viewports用于控制html元素，html元素是网站中最重要的内容块。

听起来比较晦涩，因此将给出一个例子：假定存在一个流式布局，其中工具条的宽度width:10%。当浏览器窗口缩放时工具条也相应地缩放。——这是如何做到的呢？

实际上，工具栏的宽度等同于其父元素（body元素，并假定它未指定宽度）宽度的10%。因此我们继续关注body元素。

一般所有块级元素将占据其父元素宽度的100%（有例外，此处不考虑）。因此，body元素的宽就等于其父元素html的宽度。

那html元素的宽度到底是多少呢？它和浏览器窗口一样宽。这也就是为什么当你设置了工具栏宽度10%时，它将占据浏览器窗口宽度的10%。这个基本事实是每个开发者都知晓的。

但你可能不知道为什么？实际上，html元素的宽度与viewpoint相关，html元素将占据viewpoint的100%宽度。

反过来，viewpoint的宽度就被定义等同于浏览器窗口的宽度。viewpoint不属于html结构，因此CSS无法作用到它。在桌面它仅仅具有高度和宽度，在移动端，它稍微复杂一点。

后果

以上机制将带来一些令人好奇的后果。原文网站就可以看到。将网页滚动到最上方，放大2到3步，此时网页内容溢出到浏览器窗口之外了。现在将滚动条拖到最右边，你将看到最上方的蓝色条不再正确显示了。

这样的结果来源于viewpoint是如何定义的。我设置蓝色条宽度100%，100%于html元素，html元素与viewpoint等宽，也就与浏览器窗口等宽。

关键在于当100%缩放时是没有问题的，当我们将页面放大到viewpoint小于页面宽度。本质上无关紧要，内容溢出到html元素之外，元素溢出被设置为 overflow: visible 意味着溢出的元素还是可以显示出来的。

但是蓝色条没有溢出。我设定它为100%，因此，浏览器遵守指令将它设置为viweport的宽度。它不会关心蓝色条现在变短的问题。

文档宽度 document.width

实际上我们想要知道的是页面所以内容的宽度，包括上面由于缩放溢出的部分。据我所知，得知这个总宽度是比较困难的（除非计算出页面上每个元素的宽、外边距，委婉一点说：这很容易出错）

我开始认为需要JS属性参数来给出文档宽度了。如果大家都觉得很糟心，为什么不把这个属性值暴露给CSS呢。我将很乐意将蓝色条设置为以文档宽度为基准的100%宽度，而不是html元素的宽。（这注定是困难的，如果无法实现我也不会觉得惊讶）浏览器开发商们，你们觉得呢？

七 viewport的指标

通过document.documentElement.clientWidth and -Height可以获得viewpoint的尺寸。document.documentElement实际上是html元素：任何html文档的根元素。viewport比html级别高一点。它是一个包含了html元素的元素。如果给html设定了宽度可能会有问题。（不推荐这么做，但不排除会出现这种可能）

两对属性

window.innerWidth/Height 可以表示viewport宽高吗？可以也不可以。

window.innerWidth/Height 与 document.documentElement.clientWidth and -Height 的区别：是否包含了滚动条

为什么会存在两对属性呢？是浏览器厂商大战的结果。Netscape只支持window.,IE只支持document.,后来所以其它浏览器厂商都支持两个属性，除了IE。对于PC端，存在两个属性有益无害，但在Mobile端，就是一种恩赐了。

八 html元素指标

视口有如上两对属性，html元素尺寸如何衡量呢？document.documentElement.offsetWidth and -Height。

这个属性使得可以向访问块级元素一样访问html尺寸；如果给html设置一个width,offsetWidth也会体现。

九事件坐标

pageX/Y 相对于 <html> ，CSS像素，使用频率90%

clientX/Y 相对于 viewport，CSS像素，使用频率 10%

screenX/Y 相对于screen，物理像素

十媒体查询

设计思想：如果宽度大于、等于、小于某个特定值，则执行特殊的CSS规则。问题来了？这里的宽度是什么宽度呢？

2种：

width/height-->documentElement.clientWidth/Height 视口宽高;PC端常用

device-width/device-height --> screen.width/height 设备屏幕；PC端直接忘记它的存在即可；mobile端情形更复杂。

这篇关于[译]viewports-第一篇的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

[译]viewports-第一篇

一 设备物理像素和CSS像素

二 100%缩放

三 屏幕尺寸（screen.width heigth）

四 窗口尺寸（window.innerHeight innerWidth）

五 滚动偏移 （window.pageXOffset pageYOffset）