如何對摺疊屏進行適配

手機和前端技術變化真的能夠用突飛猛進來描述;隨着前端技術的高速發展，抱怨學不動的人愈來愈多；隨着齊劉海、全面屏、摺疊屏襲來，抱怨買不起的也大有人在。若是你的公司經費不足又想作摺疊屏的適配，若是你就想看看本身應用在摺疊屏的表現可是不想爲此每個摺疊屏，若是你是想體驗下摺疊屏的話。那這篇文章可能會對你有點幫助。

摺疊屏不是將來

首先我仍是在這裏吹一下牛逼坐等各位看官打臉----我我的以爲摺疊屏並非將來，緣由三點：

• 有那個錢我還不如買一個pad + 手機
• 若是緊急打開一半(相似書翻開30°)頁面如何展現
• 貼膜人員失業、維修成本高

如何模擬摺疊屏--adb

• 下載 安裝 adb;

下載adb很簡單直接百度，下載後是一個文件夾，咱們在這個文件夾目錄打開命令行就能夠執行adb命令了，若是想全局使用的話咱們能夠添加的環境變量。

• 手機鏈接並調試

準備一臺安卓手機，一根數據線，一臺電腦；將手機鏈接電腦打開，打開手機的調試模式，確保手機已經鏈接到電腦而不是在充電，若是想確認鏈接，能夠經過adb devices命令查看以下圖就說明鏈接成功

也能夠打開Chrome瀏覽器在地址輸入chrome://inspect/#devices若是出現下圖就說明鏈接成功

注意：我使用的是華爲的P9，每次鏈接手機後，都須要修改USB鏈接方式，改成MIDI後發現仍是連不上去，還須要從新在開發者選項中開啓USB調試。

注意：adb devices命令卻發現開發板始終處於offline狀態。執行下面的命令1.adb kill-server 2.adb start-server 3.adb remount而後從新鏈接手機。

若是鏈接不上請從新屢次插拔USB數據線

• 設置分辨率調試

咱們首先見手機分辨率設置爲 adb shell wm size 1136x2480；

而後打開咱們的須要check的頁面；

輸入命令adb shell wm size 2200x2480 設置爲全屏模式；

觀察頁面變化是否發生異常；

在將分辨率設置爲 adb shell wm size 2200x2480

再次進入咱們須要查看的頁面；

輸入命令adb shell wm size 2200x2480 設置爲摺疊模式；

記錄下咱們頁面樣式出現錯亂的問題；修改；

adb shell wm size reset 恢復咱們手機自己的分辨率。

如何模擬摺疊屏--三星遠程真機調試

• 主站，三星開發者社區，REMOTE TEST LAB：developer.samsung.com/rtlLanding.…

• 中文站點，三星遠程開發測試平臺 samsung.smarterapps.cn

[三星摺疊屏遠程真機調試](https://www.jianshu.com/p/a9512f5af1ca)

如何適配摺疊屏

• 經過刷新頁面

若是頁面只是展現型的頁面或者沒有經過redux數據交互的話，咱們能夠經過摺疊屏觸發的change事件來從新reload頁面。固然這個只要在app的webview中，由客戶端拿到事件通知咱們。react native 同理，若是有固定的數值能夠搞一個動態數值配置每次觸發從新render組件。

• @media screen 媒體查詢

在瀏覽器中咱們能夠經過media screen觀察到頁面視口的變化，爲咱們的應用在摺疊屏表現不佳的地方從新寫個樣式，若是咱們以前就是經過自適應佈局我以爲改動的地方不是不少。

• 使用flex 佈局

不用多說 flex在移動端誰用誰知道。