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

权利要求书

1.一种可折叠屏网页适配方法，其特征在于：包括以下步骤：

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

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

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

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

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

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

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

2.如权利要求1所述的一种可折叠屏网页适配方法，其特征在于：步骤S2中，所述环境变量包括：设备显示区域顶部安全区域设置量env(fold-top)、设备铰链/折叠处设置量env(fold-width)、设备显示区域高度设置量env(fold-height)和设备显示区域铰链左侧安全区域设置量env(fold-left)。

3.如权利要求1所述的一种可折叠屏网页适配方法，其特征在于：步骤S4中，所述用户操作监听事件包括窗口大小改变事件resize和终端横竖屏转换事件orientationchange。

4.如权利要求3所述的一种可折叠屏网页适配方法，其特征在于：步骤S5中，resize或orientationchange监听触发后，使用枚举窗口片段的JavascriptAPI方法window.getWindowSegments()，通过该方法返回的DOMRects数组的长度，用于判断当前设备是折叠状态还是展开状态，若返回值status为true，则当前设备为展开态，若返回值status为false，则当前设备为折叠状态。

5.如权利要求3所述的一种可折叠屏网页适配方法，其特征在于：步骤S5中，resize事件触发时，通过全局引入spanning-css-polyfill.js插件，修改折叠状态css-spanning值、折叠宽度foldSize和浏览器大小尺寸browserShellSize显示参数。

6.如权利要求1所述的一种可折叠屏网页适配方法，其特征在于：步骤S7中，所述observe方法来自于spanning-css-polyfill.js插件。

7.一种存储设备，其特征在于：所述存储设备存储指令及数据用于实现权利要求1～6任一项所述的可折叠屏网页适配方法。

8.一种可折叠屏网页适配设备，其特征在于：包括：处理器及存储设备；所述处理器加载并执行所述存储设备中的指令及数据用于实现权利要求1～6任一项所述的可折叠屏网页适配方法。