首先呢臭挽，我們將iPhone手機(jī)的相關(guān)數(shù)據(jù)表示如下
我們要理解很多東西捂襟，比如邏輯分辨率、物理分辨率欢峰、縮放因子葬荷、ppi等，這里先不討論纽帖。
首先呢宠漩，我們先介紹下各個(gè)屏幕寬度：
網(wǎng)頁可見區(qū)域?qū)挘?document.body.clientWidth
網(wǎng)頁可見區(qū)域高： document.body.clientHeight
網(wǎng)頁可見區(qū)域?qū)挘?document.body.offsetWidth (包括邊線的寬)
網(wǎng)頁可見區(qū)域高： document.body.offsetHeight (包括邊線的高)
網(wǎng)頁正文全文寬： document.body.scrollWidth
網(wǎng)頁正文全文高： document.body.scrollHeight
網(wǎng)頁被卷去的高： document.body.scrollTop
網(wǎng)頁被卷去的左： document.body.scrollLeft
網(wǎng)頁正文部分上： window.screenTop
網(wǎng)頁正文部分左： window.screenLeft
屏幕物理分辨率的高： window.screen.height
屏幕物理分辨率的寬： window.screen.width
屏幕可用工作區(qū)高度： window.screen.availHeight
屏幕可用工作區(qū)寬度： window.screen.availWidth
屏幕縮放因子：window.devicePixelRatio
屏幕邏輯分辨率：window.screen.width * window.devicePixelRatio (縮放因子與物理分辨率的乘積)
下面，我將分別在不同設(shè)備上的演示后的結(jié)果截圖如下：
iPhone5
iPhone6
iPad
PC
那么大家根據(jù)這些抛计，多理解理解這些數(shù)據(jù)哄孤。
我們在移動(dòng)端開發(fā)時(shí)照筑，在<head>標(biāo)簽中加入
<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; overflow-wrap: break-word; color: rgb(51, 51, 51); font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial;"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 這句話幫我們解決了很多問題吹截，我們只要按照設(shè)備物理像素的大小來進(jìn)行開發(fā)就行了。</pre>
