屏相關知識介紹和屏幕適配
阿新 • • 發佈:2019-02-08
應用 屬性 2.0 屏幕適配 org inf ets 半透明 com
。
屏比例介紹
手機廠商追求高用戶體驗,屏幕寬高比越做越高。經常聽見什麽16:9,18:9之類的,這個怎麽來的呢?
- 1920*1080 傳統手機 ratio_float = 16/9 = 1.778 ;
- 2248*1080 (例如小米8) ratio_float = 18/9 = 2 ;
- 2960*1440 (三星s8,s9) ratio_float = 18.5/9 = 2.056;
所謂全面屏的比例有如下:
17:9
19:10
18:9
18.5:9
原來一般主流手機1920*1080分辨率 16:9高寬比。如果沒有單獨去配置屬性,會導致在超過17:9寬高比手機上,底部一大塊黑底。
劉海屏適配
有兩個方面的適配方案:
使用前端的H5適配
讓殼子去適配(即Android的童鞋去搞定,比較建議這個-5分鐘適配Android P和Android 8.0劉海屏,可能全網最全總結)
擴展
因為想避開劉海,就想獲取狀態欄高度,看要把整體內容下移多少,就接觸到了沈浸屏這個概念。
即狀態欄和通知欄“半透明化”,當開發者讓應用支持這個新特性的時候,狀態欄和導航欄可以單獨/同時變為漸變的半透明樣式。
沈浸式狀態欄”準確來說應該是“透明欄”,是安卓 4.4 新定義的設計規範。
簡單來說就是在軟件打開的時候通知欄和軟件頂部顏色融為一體
在軟件開發中,如果軟件沒有對狀態欄做了沈浸式處理,狀態欄自然是黑色。沈浸式狀態欄一般由第三方軟件來主動適配。
頁面通頂(沈浸式)的情況下如何避開帶劉海的屏幕的劉海遮擋
有兩種方法可以獲取系統狀態欄高度:
- UA中有保存
字符串格式為"Html5Plus/1.0 (Immersed/18.0)",括號中的數字就是系統狀態欄高度,可通過方式獲取:
var immersed = 0; var ms=(/Html5Plus\/.+\s\(.*(Immersed\/(\d+\.?\d*).*)\)/gi).exec(navigator.userAgent); if(ms&&ms.length>=3){ immersed=parseFloat(ms[2]); }
- 通過5+API獲取
API:plus.navigator.getStatusbarHeight
參考5+規範http://www.html5plus.org/doc/zh_cn/navigator.html#plus.navigator.getStatusbarHeight
屏相關知識介紹和屏幕適配