問題的產生
因為各方面原因,要用網頁做界面,開發一個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
可以!果斷打前端的臉去~
