解決使用web開發手機網頁關於分辨率被縮放的坑

問題的產生

由於各方面緣由,要用網頁作界面,開發一個APP.內核使用的是騰訊的x5內核.
把外殼交給前端和設計測試的時候,都彙報:狀態欄的顏色太不搭配了,要求可修改
遂啓用了安卓4.4版本開始支持的沉浸式狀態欄,打算把狀態欄交給前端去本身繪製.
並提供了API,能夠獲取狀態欄的高度.

沒多久,前端報告,返回的高度有問題,比狀態欄高不少.
因而我測了下,api返回的狀態欄高度:55像素.
使用 安卓開發者工具 裏的座標測量工具測了下,狀態欄高度的確是55像素左右
讓前端好好檢查他的代碼.

然而前端態度囂張嚷嚷着本身的代碼絕對沒問題,並懟了我一番.

這能忍?

我要解決它,並證實這個坑是前端的坑,他解決不了是由於他水平不夠.

發現產生問題的緣由

因而我在API測試頁面,作了個紅色div,調用api獲取狀態欄高度,並設爲div高度,測了下:

的確比狀態欄高了不少,並且還2倍以上
我起初覺得是js運算過程一些變量轉換的問題,嘗試在css強行給div的height賦值 "55px",然而我獲得了同樣的結果.

順手查了下分辨率,忽然發現,這網頁的分辨率..竟然只有699x393?!:

可是個人手機屏幕但是1920x1080的!
因而得出結論,這個頁面的縮放比例有問題!
原本這個問題只要我提供給API,讓js可以獲取到屏幕的寬高也就能解決了,可是我前面提到過:
我要證實這是個前端的坑,他水平不夠,沒能解決
因此:
我得解決它,並且仍是從前端方面解決

解決問題的過程

起初我嘗試用不少方法,去獲取屏幕的寬高也就是1920x1080
只要有了這個,我就能計算出縮放比例,把狀態欄高度縮放一下.就能夠解決這個問題

在網上搜索了不少文章,相似這樣的:

https://blog.csdn.net/gs6511/article/details/53900761

各類嘗試,最後均只能獲得縮放後的699*393,硬件分辨率沒法獲得.
因而我在控制檯輸入

window

嘗試把大部分對象列出來,試圖不依靠網上的答案,本身尋找到屏幕分辨率.然而window對象列出來的東西雖然不少.但我並無找到我要的屏幕分辨率.
無心間發現這麼一個:

嗯!?這個名稱?

這個難道就是我要的屏幕縮放比例?
上網搜索了下.找到了這個:

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/devicePixelRatio

結果

也就是說,我只要把狀態欄的高度,除以這個屬性,就能獲得縮放後該有的高度.
因而乎改了代碼,測試一番:

perfect
能夠!果斷打前端的臉去~