如何对折叠屏进行适配

手机和前端技术变化真的能够用突飞猛进来描述;随着前端技术的高速发展，抱怨学不动的人愈来愈多；随着齐刘海、全面屏、折叠屏袭来，抱怨买不起的也大有人在。若是你的公司经费不足又想作折叠屏的适配，若是你就想看看本身应用在折叠屏的表现可是不想为此每个折叠屏，若是你是想体验下折叠屏的话。那这篇文章可能会对你有点帮助。

折叠屏不是将来

首先我仍是在这里吹一下牛逼坐等各位看官打脸----我我的以为折叠屏并非将来，缘由三点：

• 有那个钱我还不如买一个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在移动端谁用谁知道。