首先呢，我們將iPhone手機的相關數據表示如下 我們要理解很多東西，比如邏輯解析度、物理解析度、縮放因數、ppi等，這裡先不討論。 首先呢，我們先介紹下各個屏幕寬度： 網頁可見區域寬： document.body.clientWidth網頁可見區域高： document.body.clientHe ...
首先呢，我們將iPhone手機的相關數據表示如下
我們要理解很多東西，比如邏輯解析度、物理解析度、縮放因數、ppi等，這裡先不討論。
首先呢，我們先介紹下各個屏幕寬度：
網頁可見區域寬： 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
屏幕縮放因數：window.devicePixelRatio
屏幕邏輯解析度：window.screen.width * window.devicePixelRatio (縮放因數與物理解析度的乘積)
下麵，我將分別在不同設備上的演示後的結果截圖如下：
iPhone5
iPhone6
iPad
PC
那麼大家根據這些，多理解理解這些數據。
我們在移動端開發時，在<head>標簽中加入
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
這句話幫我們解決了很多問題，我們只要按照設備物理像素的大小來進行開發就行了。
