【菜鳥一枚~哪里不對(duì)蛔六，希望大佬可以幫忙糾正】
以下是我電腦打開瀏覽器F12模式下的數(shù)據(jù)：
我的電腦分辨率當(dāng)前為1920*1080
獲取screen.width && height奄容，為1536*864
獲取window.innerWidth && height，為960*734
獲取document.documentElement.clientWidth && clientHeight巢掺，為943*734
獲取document.documentElement.offsetWidth && offsetHeight，為600*734
獲取window.devicePixelRatio，為1.25
放大200% 獲取screen.width && height坤塞，為1536*864
放大200% window.inner.Width && height舌菜，為480*367
放大200% document.documentElement.clientWidth && clientheight萌壳，為472*359
放大200% document.documentElement的offsetWidth && offsetheight，為600*359
放大200% 獲取window.devicePixelRatio日月，為2.5
PC上的viewport
-
window.innerWidth– 瀏覽器窗口的內(nèi)部寬度 (布局視圖) -
document.documentElement.clientWidth-瀏覽器'視口'的大懈の汀（視覺(jué)視口）（不包括工具欄和滾動(dòng)條） -
document.documentElement.offsetWidth-DOM文檔的根節(jié)點(diǎn)html元素對(duì)象的寬度
草圖.jpg
所以：
- 上面數(shù)據(jù)innerWidth比clientWidth大，多了滾動(dòng)條的距離爱咬，倆個(gè)height都一樣尺借，因?yàn)榇藭r(shí)沒(méi)有橫向滾軸
- 當(dāng)你給HTML元素設(shè)置了width/height之后，請(qǐng)使用offsetWidth/offsetHeight精拟，其它倆個(gè)獲取的值不是你設(shè)置的值
- 只有在默認(rèn)情況下燎斩，offsetWidth == clientWidth == innerWidth
DPR
- 設(shè)備物理像素：(Physical Pixel)這個(gè)好理解，衡量設(shè)備的度量單位串前。
- 邏輯像素：（DIP&DP&PT&SP）這個(gè)也好理解瘫里，你可以把它當(dāng)做用來(lái)邏輯運(yùn)算的度量單位。
- CSS像素荡碾，為Web開發(fā)者創(chuàng)造的一種度量單位谨读。
所以：DPR=物理像素/邏輯像素，下面我會(huì)用dpr=pp/dips來(lái)解釋我的上述數(shù)據(jù)坛吁。
首先劳殖，物理像素是設(shè)備出廠時(shí)就定死的铐尚，設(shè)想一下你用ps的時(shí)候：
- 上面會(huì)有刻度尺來(lái)充當(dāng)度量單位，當(dāng)你放大的時(shí)候哆姻，本來(lái)一小格的度量單位宣增，是不是會(huì)被慢慢拉長(zhǎng)，然后不得不換成更小的度量單位（多個(gè)小格）
- 圖片被放大之后矛缨，由于當(dāng)前設(shè)備物理像素不夠爹脾，圖像將顯示不全（當(dāng)然如果物理像素超大，這個(gè)被放大的圖片扔進(jìn)去箕昭，也會(huì)變賊辛榉痢）
開始正題：
有一個(gè)2*2的矩形（dips），假設(shè)此時(shí)未被放縮落竹，dpr為1泌霍，矩形占4個(gè)小格子占滿了當(dāng)前設(shè)備，也就是正好1個(gè)邏輯度量單位（dips）就是1個(gè)物理像素述召，很好理解朱转。
然后你把它放大200%之后，之前那一格度量單位被拉長(zhǎng)了积暖，拉長(zhǎng)到橫跨物理設(shè)備左邊到右邊藤为，之前只占一半。此時(shí)那1個(gè)邏輯度量單位（dips）就占了2個(gè)物理像素呀酸，即dpr=2/1=2
此時(shí)再來(lái)說(shuō)我之前PC的數(shù)據(jù)：
1920/1536=1.25凉蜂。由于我的電腦分辨率是1920（物理像素），而我的瀏覽器全屏顯示寬度為1536（dips）性誉，而瀏覽器工作是根據(jù)dips的寬度窿吩，也就是,1536個(gè)邏輯像素，填充滿了1920個(gè)物理像素错览，即1dips=1.25pp
因?yàn)槲掖蜷_了F12調(diào)試模式纫雁，所以當(dāng)前的viewport（視區(qū)）只有943PX（css像素，留個(gè)坑）倾哺，對(duì)應(yīng)了943*1.25=1178.75個(gè)物理像素轧邪。當(dāng)我放大200%之后：viewport的width和height均變?yōu)橹暗囊话耄奂獾陌l(fā)現(xiàn)為什么倆個(gè)的height有點(diǎn)不同羞海，因?yàn)樵谖曳糯蟮臅r(shí)候忌愚，出現(xiàn)了橫著的滾軸，所以自然viewport的高度變小了一點(diǎn)却邓。此時(shí)的dpr自然就是：dpr=1178.75/472=2.5
移動(dòng)端的viewport
前言：正常情況下PX是可以拿來(lái)做dips的（在PC端）硕糊，或者說(shuō)在理想viewport下，1px就是1dip。但是它只是瀏覽器的一個(gè)度量單位简十，和dips有區(qū)別
在移動(dòng)端有三個(gè)viewport
- layout viewport：指的是布局視口檬某，默認(rèn)布局視口寬度遠(yuǎn)大于屏幕寬度，為了讓用戶看到網(wǎng)站全貌螟蝙，它會(huì)縮小網(wǎng)站恢恼。
- visual viewport：指的是視覺(jué)視口，用戶正在看到的網(wǎng)站的區(qū)域胰默，與設(shè)備屏幕一樣寬场斑。
- ideal viewport ：指的理想視口，當(dāng)網(wǎng)站是為手機(jī)準(zhǔn)備的時(shí)候使用牵署。使用meta聲明和簸。早期iPhone理想視口為320*480 dips。
物理屏幕分辨率：
screen.width/height（有兼容問(wèn)題不建議使用）
布局視口：document.documentElement.clientWidth
視覺(jué)視口：window.innerWidth
理想視口：screen.width/height（有兼容問(wèn)題不建議使用）
設(shè)備像素比：window.devicePixelRatio
屏幕方向：window.orientation
由于手機(jī)瀏覽器不知道碟刺，你的頁(yè)面是不是為移動(dòng)端做的，所以會(huì)有一個(gè)默認(rèn)的較大的布局視口薯酝，來(lái)放置你的PC頁(yè)面半沽，使得你可以通過(guò)移動(dòng)，放縮來(lái)瀏覽吴菠。甚至有的手機(jī)瀏覽器會(huì)通過(guò)計(jì)算者填，得到一個(gè)比例，來(lái)放縮你的PC頁(yè)面做葵，放在你的視覺(jué)視口占哟，使得在手機(jī)上也能夠'正常'瀏覽，但現(xiàn)在酿矢，開發(fā)者們都會(huì)針對(duì)移動(dòng)端來(lái)適配榨乎，通過(guò)meta的viewport，讓width=device-width瘫筐，使得layout viewport=visual viewport蜜暑，所以它倆就不過(guò)多解釋。
由于沒(méi)有在移動(dòng)端測(cè)試過(guò)策肝，所以只能拿拿flexible.js的數(shù)據(jù)來(lái)臆想一下
切換到dpr=1的設(shè)備時(shí)肛捍，flexible.js自動(dòng)生成<meta>標(biāo)簽，可以看到里面顯示initial-scale=1之众，同時(shí)它也等于1/dpr=1拙毫，html元素寬度為320（視口的寬度）
此時(shí)dpr=1，1PX=1dip=1物理像素棺禾！
切換到dpr=2的設(shè)備時(shí)缀蹄，flexible.js自動(dòng)生成<meta>標(biāo)簽，可以看到里面顯示initial-scale=0.5，同時(shí)它也等于1/dpr=0.5袍患，html元素寬度為640（視口的寬度）坦康，也就是瀏覽器當(dāng)前視覺(jué)視口寬度為理想視口（設(shè)備寬度）的2倍，即1dip=2PX诡延；
此時(shí)dpr=2滞欠，2PX=1dip=2物理像素！
總結(jié)
在PC上肆良，DPR會(huì)根據(jù)你的電腦分辨率（物理像素） / 理想視口（screen.width）得到筛璧，然后在你的視覺(jué)視口上，以此DPR來(lái)對(duì)應(yīng)邏輯像素和物理像素的關(guān)系
在移動(dòng)端上惹恃，同樣DPR=手機(jī)分辨率 / 理想視口（ideal viewport）得到夭谤，也是應(yīng)該在視覺(jué)視口上，以此dpr來(lái)對(duì)應(yīng)CSS像素和物理像素的關(guān)系巫糙。當(dāng)width=device-width朗儒，且initial-scale=1時(shí)，三個(gè)視口相等
zoom會(huì)影響CSS像素和物理像素的比例参淹，比如你給html元素添加style：zoom：2醉锄；，或者initial-scale=2浙值，都會(huì)放大viewport視口的大小恳不，導(dǎo)致放大2倍CSS像素和物理像素的比例，但DPR不會(huì)變开呐，
dpr=（設(shè)備物理像素）pp/（設(shè)備獨(dú)立像素）dips
zoom=（visual viewport）css/（ideal viewport）dips
