(19)国家知识产权局 (12)发明 专利申请 (10)申请公布号 (43)申请公布日 (21)申请 号 20221086859 9.5 (22)申请日 2022.07.22 (71)申请人 上海哔哩哔哩科技有限公司 地址 200433 上海市杨 浦区四平路1945号 1641室 (72)发明人 李彦　陈姗　许洲琛　刘磊　 刘柏良　吴俊毅　 (74)专利代理 机构 北京市浩天知识产权代理事 务所(普通 合伙) 11276 专利代理师 梁倩 (51)Int.Cl. G06F 9/451(2018.01) (54)发明名称 页面自适应展示方法及装置 (57)摘要 本申请实施例公开了一种页面自适应展示 方法及装置， 该方法包括： 检测页面的分辨率数 据， 确定分辨率数据对应的目标显示样式； 根据 分辨率数据以及栅格尺寸信息， 将页面中的单元 内容展示区域划分为多个栅格； 按照目标显示样 式， 对各个栅格中的待展示元素进行渲染。 本申 请通过检测页面的分辨率数据， 根据检测到的分 辨率数据来确定该页面当前所适配的目标显示 样式， 使得页面能够自适应布局与展示， 实现了 用户在不同分辨率的用户终端以及不同尺寸的 页面窗口下， 均能获得较优的页面展示效果， 有 效地提升了用户的页面浏览体验。 权利要求书2页 说明书11页 附图6页 CN 115237522 A 2022.10.25 CN 115237522 A 1.一种页面自适应展示方法， 包括： 检测页面的分辨 率数据， 确定所述分辨 率数据对应的目标显示样式； 根据所述分辨率数据以及栅格尺寸信 息， 将所述页面中的单元内容展示 区域划分为多 个栅格； 按照所述目标显示样式， 对各个栅格中的待 展示元素进行渲染。 2.根据权利要求1所述的方法， 其中， 所述确定所述分辨率数据对应的目标显示样式进 一步包括： 根据所述分辨率数据， 从配置文件所包括的多个预设页面显示样式中查找所述分辨率 数据对应的目标显示样式。 3.根据权利要求2所述的方法， 其中， 所述配置文件中记录有多个分辨率范围对应的预 设页面显示样式； 所述根据 所述分辨率数据， 从配置文件所包括的多个预设页面显示样式中查找所述分 辨率数据对应的目标显示样式进一 步包括： 将所述分辨率数据与多个分辨率范围进行匹配， 将所述分辨率数据所符合的分辨率范 围作为目标分辨 率范围； 将所述配置文件中所述目标分辨 率范围对应的预设页面显示样式作为目标显示样式。 4.根据权利要求3所述的方法， 其中， 所述预设页面显示样式至少包括： 页面中所包括 的各个展示单元组件、 每个展示单元组件中所展示的待展示元素 的行列数、 相邻展示单元 组件之间的展示单元间距、 展示单元 组件与页面边侧之 间的边距、 栅格宽高比、 页面中所包 括的各个功能控 件以及各个功能控 件的显示 位置。 5.根据权利要求1 ‑4任一项中所述的方法， 所述栅格尺寸信 息包括： 栅格 高度和栅格宽 度； 所述根据 所述分辨率数据以及栅格尺寸信 息， 将所述页面中的单元内容展示 区域划分 为多个栅格进一 步包括： 获取目标封面图片元 素和目标文案元 素； 根据所述目标封面图片元素的宽度、 所述目标封面图片元素的宽高比以及所述目标文 案元素的高度， 确定栅格高度； 根据所述目标封面图片元 素的宽度， 确定栅格宽度； 依据所述分辨率数据、 所述栅格高度和所述栅格宽度， 对所述页面中的单元内容展示 区域进行划分， 得到多个栅格。 6.根据权利要求1 ‑5任一项中所述的方法， 其中， 所述按照所述目标显示样式， 对各个 栅格中的待 展示元素进行渲染进一 步包括： 按照所述目标显示样式， 确定所述页面中各个展示单元组件对应的单元内容展示区域 的显示位置； 在每个展示单 元组件对应的各个栅格中渲染所述待 展示元素。 7.根据权利要求6所述的方法， 其中， 所述在每个展示单元组件对应的各个栅格中渲染 所述待展示元素进一步包括： 针对每个展示单元组件， 获取该展示单元组件对应的待展示元素， 并确定每个待展示 元素对应的栅格；权　利　要　求　书 1/2 页 2 CN 115237522 A 2针对每个待展示元素， 根据栅格宽度、 所述目标显示样式中的栅格宽高比以及该待展 示元素对应的栅格的栅格数量， 确定栅格渲染宽度和栅格渲染高度； 依据所述栅格渲染宽度和所述栅格渲染高度， 对该待展示元素进行缩放处理， 在该待 展示元素对应的栅格中渲染缩放处 理后的该待 展示元素。 8.根据权利要求7所述的方法， 其中， 所述获取该展示单元组件对应的待展示元素进一 步包括： 从服务端中获取该展示单元组件对应的预设数量的待展示元素； 其中， 所述预设数量 是根据用户终端的屏幕宽度确定的。 9.根据权利要求7所述的方法， 其中， 单个待展示元素对应的栅格的栅格数量为一个或 多个。 10.根据权利要求1 ‑9任一项中所述的方法， 其中， 在所述按照所述目标显示样式， 对各 个栅格中的待 展示元素进行渲染之后， 所述方法还 包括： 响应于用户针对所述页面执行的显示比例缩小操作， 确定页面显示比例缩小后的渲染 边界范围； 在所述页面中展示位于所述渲染边界范围内的待展示元素， 对位于所述渲染边界范围 外的待展示元素进行隐藏处 理。 11.一种页面自适应展示装置， 包括： 检测模块， 用于检测页面的分辨 率数据， 确定所述分辨 率数据对应的目标显示样式； 栅格划分模块， 用于根据所述分辨率数据以及栅格尺寸信息， 将所述页面中的单元内 容展示区域划分为多个栅格； 渲染模块， 用于按照所述目标显示样式， 对各个栅格中的待 展示元素进行渲染。 12.一种计算终端， 包括： 处理器、 存储器、 通信 接口和通信总线， 所述处理器、 所述存储 器和所述 通信接口通过 所述通信总线完成相互间的通信； 所述存储器用于存放至少一可执行指令， 所述可执行指令使所述处理器执行如权利要 求1‑10中任一项所述的一种页面自适应展示方法对应的操作。 13.一种计算机存储介质， 所述存储介质中存储有至少一可执行指令， 所述可执行指令 使处理器执行如权利要求1 ‑10中任一项所述的一种页面自适应展示方法对应的操作。权　利　要　求　书 2/2 页 3 CN 115237522 A 3