在这篇文章里,我会解释 viewport 和一些显而易见的 重要 Element, such as <html>. 当然还有我们最最关心 的 Window和screen.
大多数开发者已经能直观的理解的 桌面浏览器的一些概念.但在 mobile 版里他们更加复杂.
Concept: device pixels and CSS pixels
首先要理解的概念就是这个 设备px(或者说 设备 像素) , css像素. 他们是不同的(大多数人都以为只有设备像素,或者将他们等同)
设备像素 取决于你 的程序所运行的 设备上, 你可以从 screen.width/height 获取这些值.
下面我们来说明一下 css像素到底区别在哪, 事实上它是抽象px.
如果 页面的 某个 Element 宽度为 128px, 你的设备是 1024px . 在正常情况下, 它会占据 1/8 的宽度.
缩放(zoom) : 在现代浏览器中的 实现原理 是 "拉伸" 像素, 而不是改变Element的宽度. 也就是说即使你放大2倍 css像素 仍然是 128px, 但它已然占据了256px的宽度一点
此外还要注意一点: 缩放2倍会导致 宽/高 都变大成 2倍. 面积 是4倍.
说道这里, 我们知道 我们给 Element 赋值的都是 css像素 ,css像素也决定了样式表的渲染. 设备像素是我们无法干涉的.
在桌面端, 100%缩放时, css像素的确等于 设备像素.
Screen size
亦即刚才提到的 screen.width/heigjt. 他们是 用户屏幕的 宽度/高度. 它是 设备特征而不是浏览器的. 因此尺寸不会改变.
事实上,我们根本不会用的上这个参数. 它一点也不重要, 只会用于一些屏幕统计而已
Window size
这个概念是 指浏览器内容区的尺寸,也就是我们页面 的可用空间. 确却而言,就是css样式表所能影响的地方, 通过 window.innerWidth/innerHeight 来获取这些值.
在浏览器窗口不动的情况下, window.size或者说这个方形区域 在视觉上是 不会变的( 所占据的 设备像素不变). 但前面我们已经知道 用户可以缩放并且这一行为并不取决于我们. 看第二幅图我们知道
当放大时, 1 css像素 占据的 设备px 更多了. 如果你的 设备像素区(亦即视觉效果区) 大小没变, 那么 表示 该区域占据的 css像素变小了 .
而我们的 window.innerWidth/Height 返回就是 css像素. 当用户缩放时, 这些 值也会相应的 改变.(opera浏览器返回的是 设备像素, 略有不同)
值得 注意的是 该值包括 滚动条(它被认为是 innerWindow的一部分, 这是历史原因造成的).
Scrolling offset
window.pageXOffset and window.pageYOffset表示页面的偏移量,通过他你可以知道页面滚动了 多少. 当然他是以 css像素为基准的.
In theory, if the user scrolls up and then zooms in, window.pageX/YOffset will change.
However, the browsers try to keep web pages consistent by keeping the same element at the top of the visible page when the user zooms. That doesn’t always work perfectly,
but it means that in practice window.pageX/YOffsetdoesn’t really change: the number of CSS pixels that have been scrolled out of the window remains (roughly) the same
Concept: the viewport
viewport 的作用是 限制 <html> 元素的. 该元素是 最顶级的包含块. 看上去好像 <html>的宽度是浏览器的那个框 , 但实际上 他取决于 viewport的宽度. 在桌面端 2者其实没什么区别,因为此时viewport的宽度就是browser window
它不是 html的结构, 因此我们无法用css来影响它. 他具有browser window的高/宽. 当浏览器窗口缩小时, 这个viewport也会哽着改变. 当内容缩放时, viewport不变
在mobile它要复杂的多
图片中的蓝条 100%宽度的, 为什么在 放大的时候 没有充斥 整个 屏宽 呢? 100% 意味着什么? 100% <html>宽度--> 100% viewport --> 100% browser window.
其实是内容 溢出了 <html> 元素, overflow:visible 意味着他们即便溢出都要显示.
那么 内容区 总共宽度 或者说 page 宽是多少?
document width?
其实我们很希望 100%是相对于 文档宽度的. 但 很棘手, 浏览器商家并没有这么做.
Measuring the viewport
viewport的尺寸 是: document.documentElement.clientWidth/Height.
熟悉 DOM的应该知道 documentElement其实就是 <html>, viewport 更高一级,它包含<html>. 问题来咯, 如果改变了<html>元素的宽度那么会怎么样
答案是 这对值 仍然给 出 "正常的" <html>宽度, 其实就是 viewport宽度(一条很特殊的规则). 因此可以得出 这对值 总是给出了 viewport的 尺寸
那么 window.innerWidth/Height 和 document.documentElement.clientWidth有什么区别了
很简单: document.documentElement.clientWidth不包含 滚动条, 而window.innerWidth/Height包含. 造成这种原因 是 浏览器厂商 大战
现在所有的 浏览器支持 clientWidth/Height, 但ie里面没有window.innerWidth/Height.
有2个 属性值 对桌面端 并没有多大的影响, 但对 移动端 有点麻烦.
Measuring the <html> element
现在 我们如何 解决 <html> 的大小呢? 他们存储在 document.documentElement.offsetWidth/Height.
<html>是一个 块级元素, 如果你设置了 它的宽度, documentElement.offsetWidth 会反应它的变化. (他是该元素尺寸的真正表征).
Event coordinates :事件坐标
pageX/Y 是相对于 <html> element in CSS pixels. clientX/Y gives the coordinates relative to the viewport in CSS pixels.screenX/Y gives the coordinates relative to the screen in device pixels
90% 的情况下, 我们会使用 pageX/Y, 偶尔会用到 clientX, 最后一种基本上用不上.
顺便提一下, 在 媒体查询中 : media queries
div.sidebar {
width: 300px;
}
@media all and (max-width: 400px) {
// styles assigned when width is smaller than 400px;
div.sidebar {
width: 100px;
}
}这里的宽度也是 css像素 , 相对于 <html> , 换句话说是 viewport.
以上 重点 叙述了 桌面端的 视口问题. 下一篇 将会重点讲解 移动端问题.
528
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
