[发明专利]移动端页面布局的适配方法、装置和计算机设备有效
申请号: | 202110738666.7 | 申请日: | 2021-06-30 |
公开(公告)号: | CN113325984B | 公开(公告)日: | 2022-11-25 |
发明(设计)人: | 刘丹 | 申请(专利权)人: | 中国平安人寿保险股份有限公司 |
主分类号: | G06F9/451 | 分类号: | G06F9/451;G06F3/04812;G06F3/0482;G06F3/04886 |
代理公司: | 深圳市明日今典知识产权代理事务所(普通合伙) 44343 | 代理人: | 王杰辉;熊成龙 |
地址: | 518000 广东省深圳市福田区福田街道益田路5033号平安*** | 国省代码: | 广东;44 |
权利要求书: | 查看更多 | 说明书: | 查看更多 |
摘要: | |||
搜索关键词: | 移动 页面 布局 配方 装置 计算机 设备 | ||
1.一种移动端页面布局的适配方法,其特征在于,包括:
判断移动端是否为ios系统;
若为ios系统,检测页面中的输入框底部至所述移动端的主屏幕底部之间的第一距离,并判断所述输入框是否接收到输入信号;
若所述输入框接收到输入信号,则弹起软键盘并检测所述软键盘顶部与所述主屏幕底部之间的第二距离;
判断所述第一距离是否小于所述第二距离,若是,获取初始最外层容器的初始高度,其中,所述初始最外层容器用于放置所述页面的展示内容;
根据计算所述初始最外层容器的初始高度与所述第二距离之间的差值,得到所述初始最外层容器的变化高度值;
基于所述初始最外层容器的变化高度值设置当前最外层容器,其中,所述当前最外层容器的高度为所述变化高度值,所述当前最外层容器的宽度与所述初始最外层容器的宽度相同;
将所述当前最外层容器置于所述软键盘顶部,并控制页面的头部回滚到所述当前最外层容器的头部。
2.根据权利要求1所述的移动端页面布局的适配方法,其特征在于,所述检测页面中的输入框底部至所述移动端的主屏幕底部之间的第一距离的步骤包括:
通过所述输入框的ID获取所述输入框元素:
根据所述输入框元素获取所述输入框的高度;
获取所述输入框顶部距离所述主屏幕顶部的第三距离;以及,
获取主屏幕的整体高度;
利用所述主屏幕的整体高度减去所述输入框的高度与所述第三距离之和,得到第一距离。
3.根据权利要求1所述的移动端页面布局的适配方法,其特征在于,所述若所述输入框接收到输入信号,则弹起软键盘并检测所述软键盘顶部与所述主屏幕底部之间的第二距离的步骤包括:
持续监听输入框是否处于输入状态;
若处于输入状态,在预设延时时间到达之后,获取主屏幕的整体高度与主屏幕内除所述软键盘外的高度;
计算所述主屏幕的整体高度与所述主屏幕内除所述软键盘外的高度之间的差值,得到第二距离。
4.根据权利要求1所述的移动端页面布局的适配方法,其特征在于,将所述当前最外层容器置于所述软键盘顶部,并控制页面的头部回滚到所述当前最外层容器的头部的步骤包括:
判断输入框与软键盘之间是否存在空白区域;
若存在,将所述当前最外层容器置于所述软键盘顶部,并控制页面的头部回滚到所述当前最外层容器的头部,所述空白区域跟随所述页面向下回滚至所述软键盘的底层。
5.根据权利要求1所述的移动端页面布局的适配方法,其特征在于,所述将所述当前最外层容器置于所述软键盘顶部,并控制页面的头部回滚到所述当前最外层容器的头部的步骤之后,包括:
判断输入框是否处于输入状态;
若输入框处于输入状态,判断预先与页面执行滚动行为绑定的操作是否被执行;
若所述页面执行滚动行为绑定的操作被执行,则收起所述软键盘;
设置所述当前最外层容器的高度为所述初始最外层容器的初始高度。
6.根据权利要求1所述的移动端页面布局的适配方法,其特征在于,所述将所述当前最外层容器置于所述软键盘顶部,并控制页面的头部回滚到所述当前最外层容器的头部的步骤之后,还包括:
获取所述主屏幕的宽度;
获取所述页面的宽度;
判断所述主屏幕的宽度与所述页面的宽度是否相等;
若所述主屏幕的宽度与所述页面的宽度不相等,对所述页面进行排版,使得排版后的所述页面的宽度与所述主屏幕的宽度相匹配。
该专利技术资料仅供研究查看技术是否侵权等信息,商用须获得专利权人授权。该专利全部权利属于中国平安人寿保险股份有限公司,未经中国平安人寿保险股份有限公司许可,擅自商用是侵权行为。如果您想购买此专利、获得商业授权和技术合作,请联系【客服】
本文链接:http://www.vipzhuanli.com/pat/books/202110738666.7/1.html,转载请声明来源钻瓜专利网。