Viewports 笔记

发表于 更新于 分类于 ，

网址

PC端

设备的pixels 和 CSS的pixels

设备pixels：PPI

CSS px: DIPs

缩放是缩放px与设备pixel之间的比例

屏幕尺寸 Screen size

度量都是以css px衡量，显示器特征，不会缩放而改变，用处不大

浏览器尺寸

window.innerWidth/Height = window viewport including scrollbar

滚动移位 Scrolling offset

window.pageXOffset / pageYOffset

页面的移位，单位px，ie8+

定义了页面(document)的相对于窗口原点的水平、垂直位移著作权归作者所有。

视窗 viewport

body = html = viewport = windows，且viewport不能改变

重点：缩放比例100%的情况下很正常，现在我们放大浏览器，viewport变得比网站的总宽度更小。对viewport无影响，但页面的内容溢出了<html>元素，但它却有属性overflow: visible。意味着溢出的部分依然会被显示。

也就是对最顶层元素设置100%时，是viewport的100%，实际上是window.innerWidth，但不是document width。

页面宽度 document width

没有对应css属性

度量viewport

document.documentElement.clientWidth/Height

documentElement = <html>

貌似从<html />取值，实质是viewport的值

加上滚动条则等于innerWidth/innerHeight

度量<html>元素

document.documentElement.offsetWidth/Height

html元素赋值后能用offsetWidth获取

事件坐标 Event coordinates

event.pageX/Y html原点到事件触发点，IE不支持

event.clientX/Y viewport到事件触发点

event.screenX/Y设备原点到事件触发点，基本不用

Media Queries

@media screen and ( css-pixels width/height 判断 ) {}

移动设备

移动设备问题

宽度是移动设备与PC端的最大区别。

两个Viewport

移动端为了CSS布局提供两个viewport

  1. visual viewport 虚拟，当前显示在屏幕上的部分页面，滚动/缩放改变尺寸。
  2. layout viewport 布局，CSS布局按照layout viewport定义。

<html>元素宽度继承自layout viewport

缩放 Zooming

两种viewport 都以css度量，缩放visual viewport时 layout viewport不变。

理解layout viewport

初始默认 visual viewport = layout viewport

旋转后，自动缩放页面以达到相等宽度。

度量layout viewport

document.documentElement.clientWidth/Height

度量visual viewport

window.innerWidth/Height

许多浏览器依然没有支持对visualviewport的度量

屏幕

screen.width/height

一般情况并没有多大用途

滚动位移 scrolling offset

window.pageX/YOffset

当前visual viewport相对于layout viewport的距离

<html>元素

document.documentElement.offsetWidth/Height

和桌面系统一样

Media Queries

media查询在标识网站处于桌面浏览器、pad浏览器或手机浏览器方面很重要，而在区别不同pad和手机设备方面并不有用。

事件坐标 Event coordinates

与桌面区别不大

meta标签

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

设置layout viewport的宽度，页面的初始状态。（比设置css的html更好）

后记

但是现在很多页面在设置<meta>标签的时候，会将width设置为device-width的值，然后不允许缩放，这种情况下虚拟viewport的宽度就会一直等于layout viewport的宽度？

Offset / Client / Scroll系列

  1. offsetTop, offsetLeft
    元素的上边框和左边框到offsetParent的距离
  2. offsetWidth， offsetHeight
    1. 包括 border, padding, 滚动条
    2. 不包括 pseudo-elements
    3. 隐藏是返回0
  3. clientWidth, clientHeight
    1. = content + padding
    2. inline类元素则为0
    3. root元素（<html)返回 viewport尺寸
  4. clientLeft, clientTop
    1. 只是左边框/上边框的尺寸
    2. getComputedStyle()的border-top-width
    3. inline元素返回0
  5. scrollWidth, scrollHeight
    1. content的实际宽高
    2. 包括padding，不包括border和margin以及滚到条
    3. 包括伪元素
    4. 如果没有滚到条，则 scrollWidth == clientWidth
  6. scrollLeft, scoreTop
    1. 内容产生滚动条的时候才有意义
    2. 从边缘到显示内容边界的距离
    3. 滑动了都是 >0
  7. viewport 高度的获取
    1. window.innerHeight
    2. document.documentElement.clientHeight
    3. document.body.clientHeight

getBoundingClientRect

  1. 返回一个DOMRect对象
  2. 包括top, left, right, bottom
  3. top, left会随滚动而变化
  4. 在窗口内则top >= 0, left >= 0, bottom <= viewportHeight, right <= viewportWidth