devicePixelRatio

window.devicePixelRatio是設備上物理像素和邏輯像素的比例。
公式表示就是：window.devicePixelRatio = 物理像素 / 邏輯像素

解釋

這張圖中第一行的「像素」(Points) 就是所謂的「邏輯像素」。

在 iPhone 4 前的時代，邏輯像素和物理像素是一一對應的——即，設計中的一個點對應屏幕硬件上的一個像素點。

iPhone 4 之后，Retina 屏幕出現。在 Retina 屏幕上，使用 4 個硬件上的像素點 (2 x 2) 來表示一個邏輯像素點。
舉個例子：
在開發環境中，使用 12 pt 的字體，在非 Retina 屏幕上字面高度為 12 個物理像素點；而同樣是 12 pt 的字體，在 Retina (@2x) 屏幕上的字面高度，是 24 個像素點。同樣，使用代碼來生成的一個 20 pt x 30 pt 尺寸的舉行，在非 Retina 屏幕中尺寸為 20 x 30 個物理像素；而在 Retina (@2x) 屏幕上，其尺寸為 40 x 60 個物理像素。在 Retina 屏幕上進行設計，文字尺寸、空間大小等等都應該遵照邏輯像素進行。比如，為 iPhone 4/4s （邏輯像素 320 pt x 480 pt，物理像素 620 px x 960）設計，則界面中各個元素的尺度應當以 320 x 480 為准；在 Retina 屏幕上的「2x」，可以理解為元素的精細度翻了一倍。換言之，多出來的那些像素並不是用來顯示更多內容的，而是用來提高這些內容的精細程度的。這樣，同樣界面在 iPhone 4/4s 和舊設備上的差別，就僅在於畫面的精細程度，而非內容的多寡。使用設計軟件制作界面元素時尺寸的翻倍，也是為了提高精細度；在開發環境中，仍是按照 @1x 的邏輯來設計界面；如果誤用 @2x 的尺度，則會導致文字、控件等過小。

iPhone 6 Plus 的邏輯像素為 414 pt x 736 pt, 而其使用了新一代的 Retina 屏幕 (@3x)，換言之，如果按照上述的顯示方式，物理像素理應為 1242 px x 2208 px。 從圖中 iPhone 6 Plus 的「渲染像素」亦可以看到這一個值。

使用場景

假設你的jsapi中的ui，img布局是基於@1x的邏輯來設計的，那么在后續@2x、@3x的設備展示時就會出現偏小的情況。
解決方案為根據不同的設備加載相應尺寸的設備。即在@2x的設備中尺寸翻倍。

如果沒有設計適配邏輯，又想使用默認的@1x的效果，則可以使用：

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

指明網頁寬度采用設備寬度，縮放比例為1。則瀏覽器會按照你設定的px去顯示，而不會縮小至1/2/、1/3。

 

網頁可見區域寬： document.body.clientWidth;
網頁可見區域高： document.body.clientHeight;
網頁可見區域寬： document.body.offsetWidth   (包括邊線的寬);
網頁可見區域高： document.body.offsetHeight (包括邊線的寬);
網頁正文全文寬： document.body.scrollWidth;
網頁正文全文高： document.body.scrollHeight;
網頁被卷去的高： document.body.scrollTop;
網頁被卷去的左： document.body.scrollLeft;
網頁正文部分上： window.screenTop;
網頁正文部分左： window.screenLeft;
屏幕分辨率的高： window.screen.height;
屏幕分辨率的寬： window.screen.width;
屏幕可用工作區高度： window.screen.availHeight;
屏幕可用工作區寬度：window.screen.availWidth;