Open Leooonard opened 9 years ago
ppk大神原文链接：http://www.quirksmode.org/mobile/viewports.html 这篇文章主要讲了桌面上的情况，桌面上的情况相对于移动端要简单许多。所以是入门读物。
在投影上演示网页变形应该是分辨率变低的关系，非响应式网页自然就变形了。然而，通过缩放浏览器，我们可以改变网页为原来的显示效果（或者变得接近），这是为什么？
首先，需要区别的是css pixel和device pixel的区别，在默认情况下，即屏幕没有任何缩放的情况，那么1像素css pixel是等同于1像素device pixel的。当你在浏览器中进行了缩放，那么你会发现你的元素的大小发生了变化，这并非是你设定的css pixel发生了改变（即100px宽的div仍然会保持100px），而是css pixel和device pixel不再保持1比1的等同关系了。
window.screen可以获取显示器的device pixel。通常来说，它并没有什么用。
获取浏览器可视区域的高宽，他们是css pixel，所以正常情况下浏览器能够显示800宽，那么当你放大为200%，则浏览器只能显示400宽了（因为2个device pixel宽代表1个css pixel宽了），所以会有横向的滚动条（滚动条是被计算在innerWidth和innerHeight之内的！）。opera在这里有个bug，他用device pixel计算了innerWidth和innerHeight（所以放大对于他没有什么用 嘛？）。
通过window.pageXoffset和window.pageYoffset来获取滚动值，同样是css pixel。所以不管你怎么缩放，他的值是不应该变化的。并且如果你先往下滑，再缩放，浏览器会尽力保证本来在顶部的元素依旧在顶部。
以流体布局为例，定义一个10%宽度的边栏，为什么它总能占据10%的空间？因为body能够占据100%的空间，所以html能够占据100%的空间。html标签默认会占据viewport的全部空间。我们无法使用css来控制viewport。这点很关键，html标签默认占据viewport的全部空间，也即viewport的宽度将等于html元素的宽度，那么，当我们放大缩小后，viewport的宽度将发生改变！那么，html标签的宽度也相应改变！所以，那些设置为100%宽度的元素的宽度，实际上发生了改变！
那么如何获取viewport的宽高？通过document.documentElement.clientWidth & clientHeight，document.documentElement其实就是html元素，他的clientWidth和height十分特殊，代表了viewport的宽高。（但是，我测试下来貌似不是锕。。明天再谷歌看看。）
ppk大神原文链接：http://www.quirksmode.org/mobile/viewports.html 这篇文章主要讲了桌面上的情况，桌面上的情况相对于移动端要简单许多。所以是入门读物。
在投影上演示网页变形应该是分辨率变低的关系，非响应式网页自然就变形了。然而，通过缩放浏览器，我们可以改变网页为原来的显示效果（或者变得接近），这是为什么？
首先，需要区别的是css pixel和device pixel的区别，在默认情况下，即屏幕没有任何缩放的情况，那么1像素css pixel是等同于1像素device pixel的。当你在浏览器中进行了缩放，那么你会发现你的元素的大小发生了变化，这并非是你设定的css pixel发生了改变（即100px宽的div仍然会保持100px），而是css pixel和device pixel不再保持1比1的等同关系了。
screen size
window.screen可以获取显示器的device pixel。通常来说，它并没有什么用。
window.innerWidth & window.innerHeight
获取浏览器可视区域的高宽，他们是css pixel，所以正常情况下浏览器能够显示800宽，那么当你放大为200%，则浏览器只能显示400宽了（因为2个device pixel宽代表1个css pixel宽了），所以会有横向的滚动条（滚动条是被计算在innerWidth和innerHeight之内的！）。opera在这里有个bug，他用device pixel计算了innerWidth和innerHeight（所以放大对于他没有什么用 嘛？）。
scrolling offset
通过window.pageXoffset和window.pageYoffset来获取滚动值，同样是css pixel。所以不管你怎么缩放，他的值是不应该变化的。并且如果你先往下滑，再缩放，浏览器会尽力保证本来在顶部的元素依旧在顶部。
viewport的概念
以流体布局为例，定义一个10%宽度的边栏，为什么它总能占据10%的空间？因为body能够占据100%的空间，所以html能够占据100%的空间。html标签默认会占据viewport的全部空间。我们无法使用css来控制viewport。这点很关键，html标签默认占据viewport的全部空间，也即viewport的宽度将等于html元素的宽度，那么，当我们放大缩小后，viewport的宽度将发生改变！那么，html标签的宽度也相应改变！所以，那些设置为100%宽度的元素的宽度，实际上发生了改变！
那么如何获取viewport的宽高？通过document.documentElement.clientWidth & clientHeight，document.documentElement其实就是html元素，他的clientWidth和height十分特殊，代表了viewport的宽高。（但是，我测试下来貌似不是锕。。明天再谷歌看看。）