[发明专利]移动端页面布局的适配方法、装置和计算机设备

说明书

本申请涉及网页布局的技术领域，公开了一种移动端页面布局的适配方法、装置和计算机设备，通过检测输入框顶部与主屏幕底部之间的第一距离、软键盘与主屏幕底部之间的第二距离；若是，获取初始最外层容器的初始高度，根据计算初始最外层容器的初始高度与第二距离之间的差值，得到初始最外层容器的变化高度值；将初始最外层容器的变化高度值设置为当前最外层容器的高度，将当前最外层容器置于软键盘顶部，并控制页面的头部回滚到当前最外层容器的头部；这样能够使得主屏幕中的展示内容缩短，并将原本飞出主屏幕顶部的内容向下拉回到主屏幕的顶部上，从而能够防止位于主屏幕顶部的内容被用户遗失，提升了IOS系统对页面的适配度和用户好感度。

技术领域

本申请涉及网页布局技术领域，特别涉及一种移动端页面布局的适配方法、装置和计算机设备。

背景技术

移动互联网技术突飞猛进，在浏览器的页面中输入信息变得非常普遍。现有手机系统一般分为android与ios，由于两种系统配置不同，因此部分浏览器存在无法兼容这两种系统的情况。当打开浏览器，且输入框位于主屏幕的下半部分时，安卓系统会将输入框与软键盘悬浮在主屏幕的最外层，且主屏幕顶部的内容会保持在原位，用户体验感比较好。

然而ios系统中，当用户输入文字，软键盘弹起时，由于输入框与软键盘并没有悬浮在主屏幕的最外层，因此，位于主屏幕顶部的内容因为软键盘弹起，会自动向上翻滚，导致视觉上页面内容不完整，尤其是用户在一些对话机器人的网页进行对话时，顶部一般会固定一些快捷菜单的入口，如果输入内容时顶部飞出屏幕，用户就无法看到顶部的信息和入口，这样会造成无法浏览顶部提示信息、无法点击快捷入口的问题，影响用户对产品的体验。

发明内容

本申请的主要目的为提供一种移动端页面布局的适配方法、装置和计算机设备，旨在解决现有技术中ios系统主屏幕中显示的网页内容在软键盘弹起后容易向上翻滚的技术问题。

本申请提出一种移动端页面布局的适配方法，包括：

判断移动端是否为ios系统；

若为ios系统，检测页面中的输入框底部至所述移动端的主屏幕底部之间的第一距离，并判断所述输入框是否接收到输入信号；

若所述输入框接收到输入信号，则弹起软键盘并检测所述软键盘顶部与所述主屏幕底部之间的第二距离；

判断所述第一距离是否小于所述第二距离，若是，获取初始最外层容器的初始高度，其中，所述初始最外层容器用于放置所述页面的展示内容；

计算所述初始最外层容器的初始高度与所述第二距离之间的差值，得到所述初始最外层容器的变化高度值；

基于所述初始最外层容器的变化高度值设置当前最外层容器，其中，所述当前最外层容器的高度为所述变化高度值，所述当前最外层容器的宽度与所述初始最外层容器的宽度相同；

将所述当前最外层容器置于所述软键盘顶部，并控制页面的头部回滚到所述当前最外层容器的头部。

作为优选，所述检测页面中的输入框底部至所述移动端的主屏幕底部之间的第一距离的步骤包括：

通过所述输入框的ID获取所述输入框元素:

根据所述输入框元素获取所述输入框的高度；

获取所述输入框顶部距离所述主屏幕顶部的第三距离；以及，

获取主屏幕的整体高度；

利用所述主屏幕的整体高度减去所述输入框的高度与所述第三距离之和，得到第一距离。

作为优选，所述若所述输入框接收到输入信号，则弹起软键盘并检测所述软键盘顶部与所述主屏幕底部之间的第二距离的步骤包括：

持续监听输入框是否处于输入状态；