如何进行折叠屏适配

作者：myprelude@github
原文链接： https://myprelude.github.io
转载请注明出处，保留原文链接和作者信息。

手机和前端技术变化真的可以用日新月异来描述;随着前端技术的高速发展，抱怨学不动的人越来越多；随着齐刘海、全面屏、折叠屏袭来，抱怨买不起的也大有人在。如果你的公司经费不足又想做折叠屏的适配，如果你就想看看自己应用在折叠屏的表现但是不想为此每一个折叠屏，如果你是想体验下折叠屏的话。那这篇文章可能会对你有点帮助。

折叠屏不是未来

首先我还是在这里吹一下牛逼坐等各位看官打脸—-我个人觉得折叠屏并不是未来，原因三点：

有那个钱我还不如买一个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：https://developer.samsung.com/rtlLanding.do
中文站点，三星远程开发测试平台 http://samsung.smarterapps.cn

[三星折叠屏远程真机调试](https://www.jianshu.com/p/a9512f5af1ca)

如何适配折叠屏

通过刷新页面

如果页面只是展示型的页面或者没有通过redux数据交互的话，我们可以通过折叠屏触发的change事件来重新reload页面。当然这个只要在app的webview中，由客户端拿到事件通知我们。react native 同理，如果有固定的数值可以搞一个动态数值配置每次触发重新render组件。

@media screen 媒体查询

在浏览器中我们可以通过media screen观察到页面视口的变化，为我们的应用在折叠屏表现不佳的地方重新写个样式，如果我们之前就是通过自适应布局我觉得改动的地方不是很多。

使用flex 布局

不用多说 flex在移动端谁用谁知道。

-->