[发明专利]一种可折叠屏网页适配方法、设备及存储设备

说明书

本发明提供了一种可折叠屏网页适配方法、设备及存储设备，根据主流折叠屏设备参数定义折叠屏不同设备类型在不同设备类型在正常状态下和折叠展开状态下的宽度width、高度height及尺寸size；和定义媒体属性的查询范围：媒体查询和环境变量，并分别编写非折叠状态css样式表和折叠状态css样式表，进而设置用户操作监听事件，并进行屏幕状态及折叠宽度解析，和显示设置参数修改；通过进行DOM元素自适应处理、非DOM对象处理和组件css样式表处理；直到采用observe方法判断适配渲染成功为止。本发明的有益效果是：可适配任意屏幕尺寸折叠屏，保证内容区域既不会被设备铰链遮挡或切割，也不会在柔性屏的折叠处显示，从而提高屏幕利用率及用户体验。

技术领域

本发明涉及智能移动终端领域，尤其涉及一种可折叠屏网页适配方法、设备及存储设备。

背景技术

随着显示技术的变革，可折叠终端的时代正在来临。折叠屏有多种形式，笔记本电脑、手机、双屏幕混合设备都有可折叠形式的终端，在折叠屏上，用户可以做更多的事情。可折叠终端技术中值得关注的不仅仅是折叠屏技术，它更是开启了移动终端的全新体验。对于原生系统来说，采用屏幕分屏的方式可以同时打开多个应用程序，从而充分利用屏幕；而对于web网页，在传统的屏幕下，只用关注视窗的大小，使用媒体查询就可以处理好，但在可折叠屏下，需要注意的东西更多，目前还没有成熟的适配方式。

发明内容

为了解决上述问题，本发明提供了一种可折叠屏网页适配方法、设备及存储设备，用于适配于不同尺寸的折叠屏。一种可折叠屏网页适配方法，主要包括以下步骤：

S1：根据主流折叠屏设备参数定义折叠屏不同设备类型的常量，所述常量包括不同设备类型在正常状态下和折叠展开状态下的宽度width、高度height及尺寸size；

S2：根据所述常量，定义媒体属性的查询范围，所述媒体属性的查询范围包括媒体查询和环境变量；

S3：根据所述媒体属性的查询范围，分别编写非折叠状态css样式表和折叠状态css样式表；

S4：根据所述非折叠状态css样式表和折叠状态css样式表中媒体查询范围，设置及编写用户操作监听事件；

S5：根据所述用户操作监听事件，在事件触发时进行屏幕状态解析、折叠宽度解析和显示设置参数修改；

S6：针对步骤S5中解析得到的折叠状态及设备屏幕状态，DOM元素会根据css样式表中媒体查询变量进行自适应，同时根据折叠状态及折叠宽度解析结果，修改显示设置参数进行非DOM对象处理和组件css样式表处理；

S7：进行步骤S6所述的处理后，采用observe方法判断适配渲染是否成功，若是没有成功，则返回步骤S3，若是成功，则可折叠屏网页适配成功。

进一步地，所述环境变量包括：设备显示区域顶部安全区域设置量env(fold-top)、设备铰链/折叠处设置量env(fold-width)、设备显示区域高度设置量env(fold-height)和设备显示区域铰链左侧安全区域设置量env(fold-left)。

进一步地，所述用户操作监听事件包括窗口大小改变事件resize和终端横竖屏转换事件orientationchange。

进一步地，resize或orientationchange监听触发后，使用枚举窗口片段的JavascriptAPI方法window.getWindowSegments()，通过该方法返回的DOMRects数组的长度，可判断当前设备是折叠状态还是展开状态，若返回值status为true，则当前设备为展开态，若返回值status为false，则当前设备为折叠状态。