CN112558951A - 一种可折叠屏网页适配方法、设备及存储设备 - Google Patents

Abstract

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

Description

一种可折叠屏网页适配方法、设备及存储设备

技术领域

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

背景技术

随着显示技术的变革，可折叠终端的时代正在来临。折叠屏有多种形式，笔记本电脑、手机、双屏幕混合设备都有可折叠形式的终端，在折叠屏上，用户可以做更多的事情。可折叠终端技术中值得关注的不仅仅是折叠屏技术，它更是开启了移动终端的全新体验。对于原生系统来说，采用屏幕分屏的方式可以同时打开多个应用程序，从而充分利用屏幕；而对于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，则当前设备为折叠状态。

进一步地，resize事件触发时，通过全局引入spanning-css-polyfill.js插件，修改css-spanning值、折叠宽度foldSize和浏览器大小尺寸browserShellSize显示参数。

进一步地，使用observe方法判断网页是否自适应渲染成功，所述observe方法来自于spanning-css-polyfill.js插件。

一种存储设备，所述存储设备存储指令及数据用于实现一种可折叠屏网页适配方法。

一种可折叠屏网页适配设备，包括：处理器及所述存储设备；所述处理器加载并执行所述存储设备中的指令及数据用于实现一种可折叠屏网页适配方法。

本发明提供的技术方案带来的有益效果是：可适配任意屏幕尺寸折叠屏，保证内容区域既不会被设备铰链遮挡或切割，也不会在柔性屏的折叠处显示，从而提高屏幕利用率及用户体验。

附图说明

下面将结合附图及实施例对本发明作进一步说明，附图中：

图1是本发明实施例中一种可折叠屏网页适配方法的流程图；

图2是本发明实施例中折叠屏展开页面布局适配方式的示意图；

图3是本发明实施例中css-spanning及orientation取值说明示意图；

图4是本发明实施例中环境变量取值位置说明示意图；

图5是本发明实施例中硬件设备工作的示意图。

具体实施方式

为了对本发明的技术特征、目的和效果有更加清楚的理解，现对照附图详细说明本发明的具体实施方式。

本发明的实施例提供了一种可折叠屏网页适配方法、设备及存储设备。

双屏和单屏可折叠设备只是物理屏幕个数不同，其逻辑显示区域均为2个。根据铰链及终端的摆放方式可将折叠形式分为左右内折、左右外折及上下内折三种，而不同厂家的折叠屏的分辨率是不相同的，对于网页而言，适配需要关注的参数为设备分辨率(DeviceResolution)、DPI(Dot Per Inch，打印分辨率)、屏幕宽度/视口宽度(width)、屏幕高度/视口高度(height)、默认缩放比例(initial-scale)、是否用户缩放(user-scalable)、最大缩放比例(maximum-scale)和最小缩放比例(minimum-scale)。目前已有的折叠屏设备的参数如表1。本发明提供了一种可适配任意屏幕尺寸折叠屏的通用解决方案，保证内容区域既不会被设备铰链遮挡或切割，也不会在柔性屏的折叠处显示，从而提高屏幕利用率及用户体验。

表1主流折叠屏设备参数表

请参考图1，图1是本发明实施例中一种可折叠屏网页适配方法的流程图，具体包括如下步骤：

S1：根据如表1所示的主流折叠屏设备参数表定义折叠屏不同设备类型(deviceType)的常量，所述常量包括不同设备类型在正常状态下和折叠展开状态下的宽度(width)、高度(height)及尺寸(size)，即根据表1的参数定义不同设备类型正常状态(status：normal，非展开态)下的宽度(width)、高度(height)及尺寸(size)和不同设备类型折叠展开状态(status：fold，展开态)下的宽度(width)、高度(height)及尺寸(size)；

如图2所示，本发明中将折叠屏实际操作过程中页面的变化为如图2所示的四种：

a图为：横向拉伸内容，即垂直方向保持不变，水平方向拉伸，适用于典型的列表信息展示；

b图为：等比缩放内容，即按照某个比例等比缩放内容；

c图为：扩展内容，即使用更多的内容去填充去补充实际操作中多出来的屏幕空间；

d图为：流动内容，即重新布局模块位置去补充实际操作中多出来的屏幕空间。

S2：根据步骤S1中的正常状态(status：normal，非展开态)下设备宽度width及高度height定义媒体属性@media的查询范围；媒体属性的查询范围包括自适应媒体查询css-spanning和环境变量：env(fold-top)、env(fold-width)、env(fold-height)和env(fold-left)。

如图3所示，媒体查询css-spanning为一个状态值，用来描述当前终端具有的折叠或铰链的数量及状态，值为none时，表示当前终端没有折叠状态；值为single-fold-verticle(单一-折叠-垂直)时，铰链为垂直状态，屏幕水平，分为左右两边；值为single-fold-horizontal(单一-折叠-水平)时，铰链为水平状态或屏幕垂直，分为上下两部分；

如图4所示，定义环境变量来限制内容展示的安全范围，其值均为像素坐标，以px为单位，作用为计算屏幕片段在水平和垂直方向上的位置，防止内容被终端物理硬件如摄像头遮挡。

水平状态下环境变量分别为设备显示区域顶部安全区域设置量env(fold-top)、设备显示区域铰链左侧安全区域设置量env(fold-left)、设备铰链/折叠处设置量env(fold-width)和设备显示区域高度设置量env(fold-height)；

垂直状态下环境变量分别为设备左侧最高点env(fold-left)、设备铰链高度env(fold-height)、设备显示区域宽度env(fold-width)和设备左侧链条起点env(fold-top)。

使用css3媒体查询变量orientation，orientation为媒体查询@media的一个属性，是与min-width及max-width配合编写在样式表内定义页面内容样式用的。orientation值为portrait时，输出设备中的页面可见区域高度大于或等于宽度，其余情况下，orientation值为landscape，landscape表示设备铰链为垂直状态，即页面宽度是大于高度的状态。

S3：根据正常状态即展开状态设备参数在步骤S2中定义的媒体查询范围@media(min-width：最小宽度，max-width：最大宽度)结合步骤S2中所述的orientation状态编写正常状态下页面布局css样式表；

根据展开态设备参数以及页面的布局设计，选择前面所提及的四种适配方式中的一种，结合配合步骤S2中定义的css-spanning、orientation和环境变量：env(fold-top)、env(fold-left)、env(fold-width)及env(fold-height)编写设备在横屏或竖屏时，显示在环境变量限制的安全显示区内的css样式表。

S4：设置用户操作监听事件(窗口大小改变事件为resize，终端横竖屏转换事件为orientationchange)；

监听窗口大小改变事件为window.addEventListener(‘resize’,()＝>{})，设备浏览器窗口在放大缩小时，或设备进行折叠和展开状态切换时，会触发该事件。

监听横竖屏转换事件为window.addEventListener(‘orientationchange’,()＝>{})，设备在横竖屏切换时，会触发该事件。

S5：屏幕状态及折叠宽度判断

在步骤S4中，resize或orientationchange监听触发后，可使用枚举窗口片段的JavascriptAPI方法window.getWindowSegments()，通过该方法返回的DOMRects数组的长度，用于判断设备是折叠状态还是展开状态，当isSingleFoldHorizontal()返回值status为true时，则设备为展开态，返回值status为false时，则设备为折叠状态；同时根据window.getWindowSegments()返回的DOMRects数组的长度可得到设备片段的个数segments的值，以及两个片段的左右距离差值并计算出铰链的宽度foldWidth。具体实现程序如下：

S6：显示参数修改

项目创建时全局引入spanning-css-polyfill.js插件，在步骤S4的resize事件触发时，该插件会自动计算及调整screenSpanning(css-spanning值)，foldSize(折叠宽度)和browserShellSize(浏览器大小尺寸)显示设置参数，并通过javascript方法将步骤S2中定义的css-spanning及env(fold-top)、env(fold-left)、env(fold-width)、env(fold-height)实现为布局设计中期望的适配结果；同时该插件包含FoldablesFeature对象，订阅该对象也可调用方法手动修改screenSpanning(css-spanning值)，foldSize(折叠宽度)和browserShellSize(浏览器大小尺寸)显示参数。

S7：css样式表处理

resize及orientation事件触发时，独立引入的css样式表中的元素会在spanning-css-polyfill.js插件的作用下，DOM对象会在可按照步骤S3中编写完成的样式表进行适配；

对于组件页面的样式，在步骤S6中的foldablesFeat改变事件触发时使用插件中的adjustCSS方法来修改组件内的样式表，修改方法如下：

S8：非DOM对象样式适配处理

对于canvas、webgl等非DOM对象，根据页面布局设计，在步骤6中的foldablesFeatchange事件触发时，结合步骤S5中屏幕状态、折叠宽度判断结果编写方法进行显示、隐藏、动画过度和重新渲染等处理从而达到适配目的。

S9：适配成功判断

通过spanning-css-polyfill.js插件中的observe方法判断，页面是否自适应成功，若返回false，则说明处理过程可能出错导致页面无法正确的渲染适配，需测试并排查错误原因至返回true为止，返回true时，说明设备页面适配成功。

请参见图5，图5是本发明实施例的硬件设备工作示意图，所述硬件设备具体包括：一种可折叠屏网页适配设备401、处理器402及存储设备403。

一种可折叠屏网页适配设备401：所述一种可折叠屏网页适配设备401实现所述一种可折叠屏网页适配方法。

处理器402：所述处理器402加载并执行所述存储设备403中的指令及数据用于实现所述一种可折叠屏网页适配方法。

存储设备403：所述存储设备403存储指令及数据；所述存储设备403用于实现所述一种可折叠屏网页适配方法。

本发明的有益效果是：可适配任意屏幕尺寸折叠屏，保证内容区域既不会被设备铰链遮挡或切割，也不会在柔性屏的折叠处显示，从而提高屏幕利用率及用户体验。

以上所述仅为本发明的较佳实施例，并不用以限制本发明，凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (8)

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任一项所述的可折叠屏网页适配方法。

Images