web window pixel等筆記

原文：http://www.w3cplus.com/css/viewports.html

屏幕尺寸 Screen size =顯示器尺寸

screen.width 和 screen.height。這兩個屬性包含了用戶屏幕的完整寬度高度。這些尺寸使用設備的pixels來定義，他們的值不會由於縮放而改變：他們是顯示器的特徵，而不是瀏覽器著做權歸做者全部。

瀏覽器尺寸 Window size = 瀏覽器尺寸

window.innerWidth/Height

• 含義：包含滾動條尺寸的瀏覽器完整尺寸
• 度量：CSS的pixels
• 兼容性問題：IE不支持，Opera用設備pixels來度量

相反的，你想要知道的瀏覽器的內部尺寸。它定義了當前用戶有多大區域，可供你的CSS佈局佔用。你能夠經過window.innerWidth 和 window.innerHeight來獲取 

window.pageXOffset 和 window.pageYOffset，定義了頁面(document)的相對於窗口原點的水平、垂直位移。所以你可以定位用戶滾動了多少的滾動條距離。

度量viewport Measuring the view port

document. documentElement. clientWidth/Height

• 含義：viewport的尺寸
• 度量：CSS的pixels
• 兼容性問題：無

你也許想要知道viewport的尺寸，他們能夠經過document. documentElement. clientWidth/Height來獲取。

 

滾動位移 scrolling offset

window.pageX/YOffset 

• 含義：見描述
• 度量：CSS的pixels
• 完整支持：iPhone, Android, Symbian, Iris, MicroB, Skyfire, Obigo
• 問題：
  • Opera, Bolt, Firefox, and NetFront 老是返回 0.
  • 三星的Webkit核心瀏覽器，僅當在頁面上寫入標籤，才正確表示。
• 不支持： IE，它使用document. scrollLeft/Top來表示