华为5G折叠屏幕适配

华为5G折叠屏幕的发布，迎来新的一个设备——移动端的折叠设备华为Max;华为Max设备分辨率有以下几种

8.0，6.8，6.38，这三种场景下页面展示都是不一样的表现，需要我们在开发中注意监听屏幕变化，来动态加载我们的页面，更换场景；

华为官网展示了华为Max的多屏幕操作，从前端而言：这需要我们做好不同屏幕下业务呈现的多样性，以及交互的流畅性；5G的来领，数据传输极大提升，视频下载速度会提高，html5新标签video,会迎来新的发展，视频下载和存储，以及视频播放过程中内存占用问题需要考量，以及poster的使用时机需要把握，4G和5G切换，兼容问题等。

下面是我针对华为Max做出的适配方法，仅供参考，不对之处，望大家指正

head标签中引入不同样式文件，适配不同的设备

<link
      rel="stylesheet"
      media="screen and (max-device-width:1240px)"
      href="max.css"
    />

　　针对max可以编写不同的样式表，特殊化max的布局，减少页面的重绘重排；

使用vue、react、angular等组件化框架，可以结合框架的声明周期，我们获取设备的不同宽度，加载不同的页面组件和业务，可以友好地做到一套代码兼容多端设备；可见对于代码兼容性和拓展性依旧是我们学习和工作的重点；数据的交互和传递如何提高这需要我们根据4G和5G的不同进行考虑；可以这么说，在4G网络下，我肯定需要图片懒加载，而5G可以抛弃图片懒加载，更多的是特效的使用，3d效果、粒子效果、还有vr实景结合，有可能5G时代进入图片的3D展现时代；数据的缓存可能会降低使用，我们针对用户的一些操作和保存历史效果，可以更多地上传到服务器端进行快速交互实现还原场景；localstorage,sessionStorage,cookie等的使用率会降低一些；

动画效果会提升，css3中的transform属性，animation等特性会提升，那么我们需要在日常开发中积累一些特效的插件，快速实现我们的业务，以及vue的推广的过渡效果也会得到更多的应用；大型的接口业务的数据处理需要提升，前端的处理查询关键字等需要更加分组快速进入对应的领域，有点像人工智能中的管理系统和神经系统，根据不同的电流或者不同的场景快速做成响应。好了，进入下面的适配环节：

针对华为的3中不同的分辨率，6.6，6.38，我们可以采用媒体查询，如果布局相差不大，可以用移动端通用的样式，不同的采用媒体查询适配就好

而8.0屏幕可以说是一个小的pad,我们可以单独新建一个页面适配这个，监听屏幕变化，如下图所示：（这个可以说是多个项目来更根据不同的设备展现不一致，体现我们的业务展现，难点：对于项目的维护和升级，拓展会有所提升；举个简单例子：分享朋友圈的地址，可能需要我们根据设备动态或许，即折叠后和折叠前两个不同页面的地址替换，分享话术和标题等）

window.resize=function(){
    if(window.innerHeight==1100&&window.innerWidth==1240){
  　　window.location.href="这里写你对应8.0尺寸的屏幕的地址就好"
　　}
}