华为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-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尺寸的屏幕的地址就好" } }