CN113325984A - 移动端页面布局的适配方法、装置和计算机设备 - Google Patents

移动端页面布局的适配方法、装置和计算机设备 Download PDF

Info

Publication number
CN113325984A
CN113325984A CN202110738666.7A CN202110738666A CN113325984A CN 113325984 A CN113325984 A CN 113325984A CN 202110738666 A CN202110738666 A CN 202110738666A CN 113325984 A CN113325984 A CN 113325984A
Authority
CN
China
Prior art keywords
page
outermost container
height
main screen
distance
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Granted
Application number
CN202110738666.7A
Other languages
English (en)
Other versions
CN113325984B (zh
Inventor
刘丹
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Ping An Life Insurance Company of China Ltd
Original Assignee
Ping An Life Insurance Company of China Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Ping An Life Insurance Company of China Ltd filed Critical Ping An Life Insurance Company of China Ltd
Priority to CN202110738666.7A priority Critical patent/CN113325984B/zh
Publication of CN113325984A publication Critical patent/CN113325984A/zh
Application granted granted Critical
Publication of CN113325984B publication Critical patent/CN113325984B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G06F3/04812—Interaction techniques based on cursor appearance or behaviour, e.g. being affected by the presence of displayed objects
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G06F3/0482—Interaction with lists of selectable items, e.g. menus
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
    • G06F3/0488—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures
    • G06F3/04886—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures by partitioning the display area of the touch-screen or the surface of the digitising tablet into independently controllable areas, e.g. virtual keyboards or menus
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Software Systems (AREA)
  • User Interface Of Digital Computer (AREA)
  • Input From Keyboards Or The Like (AREA)

Abstract

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

Description

移动端页面布局的适配方法、装置和计算机设备
技术领域
本申请涉及网页布局技术领域，特别涉及一种移动端页面布局的适配方法、装置和计算机设备。
背景技术
移动互联网技术突飞猛进，在浏览器的页面中输入信息变得非常普遍。现有手机系统一般分为android与ios，由于两种系统配置不同，因此部分浏览器存在无法兼容这两种系统的情况。当打开浏览器，且输入框位于主屏幕的下半部分时，安卓系统会将输入框与软键盘悬浮在主屏幕的最外层，且主屏幕顶部的内容会保持在原位，用户体验感比较好。
然而ios系统中，当用户输入文字，软键盘弹起时，由于输入框与软键盘并没有悬浮在主屏幕的最外层，因此，位于主屏幕顶部的内容因为软键盘弹起，会自动向上翻滚，导致视觉上页面内容不完整，尤其是用户在一些对话机器人的网页进行对话时，顶部一般会固定一些快捷菜单的入口，如果输入内容时顶部飞出屏幕，用户就无法看到顶部的信息和入口，这样会造成无法浏览顶部提示信息、无法点击快捷入口的问题，影响用户对产品的体验。
发明内容
本申请的主要目的为提供一种移动端页面布局的适配方法、装置和计算机设备，旨在解决现有技术中ios系统主屏幕中显示的网页内容在软键盘弹起后容易向上翻滚的技术问题。
本申请提出一种移动端页面布局的适配方法，包括：
判断移动端是否为ios系统；
若为ios系统，检测页面中的输入框底部至所述移动端的主屏幕底部之间的第一距离，并判断所述输入框是否接收到输入信号；
若所述输入框接收到输入信号，则弹起软键盘并检测所述软键盘顶部与所述主屏幕底部之间的第二距离；
判断所述第一距离是否小于所述第二距离，若是，获取初始最外层容器的初始高度，其中，所述初始最外层容器用于放置所述页面的展示内容；
计算所述初始最外层容器的初始高度与所述第二距离之间的差值，得到所述初始最外层容器的变化高度值；
基于所述初始最外层容器的变化高度值设置当前最外层容器，其中，所述当前最外层容器的高度为所述变化高度值，所述当前最外层容器的宽度与所述初始最外层容器的宽度相同；
将所述当前最外层容器置于所述软键盘顶部，并控制页面的头部回滚到所述当前最外层容器的头部。
作为优选，所述检测页面中的输入框底部至所述移动端的主屏幕底部之间的第一距离的步骤包括：
通过所述输入框的ID获取所述输入框元素:
根据所述输入框元素获取所述输入框的高度；
获取所述输入框顶部距离所述主屏幕顶部的第三距离；以及，
获取主屏幕的整体高度；
利用所述主屏幕的整体高度减去所述输入框的高度与所述第三距离之和，得到第一距离。
作为优选，所述若所述输入框接收到输入信号，则弹起软键盘并检测所述软键盘顶部与所述主屏幕底部之间的第二距离的步骤包括：
持续监听输入框是否处于输入状态；
若处于输入状态，在预设延时时间到达之后，获取主屏幕的整体高度与主屏幕内除所述软键盘外的高度；
计算所述主屏幕的整体高度与所述主屏幕内除所述软键盘外的高度之间的差值，得到第二距离。
作为优选，将所述当前最外层容器置于所述软键盘顶部，并控制页面的头部回滚到所述当前最外层容器的头部的步骤包括：
判断输入框与软键盘之间是否存在空白区域；
若存在，将所述当前最外层容器置于所述软键盘顶部，并控制页面的头部回滚到所述当前最外层容器的头部，所述空白区域跟随所述页面向下回滚至所述软键盘的底层。
作为优选，所述将所述当前最外层容器置于所述软键盘顶部，并控制页面的头部回滚到所述当前最外层容器的头部的步骤之后，包括：
判断输入框是否处于输入状态；
若输入框处于输入状态，判断预先与页面执行滚动行为绑定的操作是否被执行；
若所述页面执行滚动行为绑定的操作被执行，则收起所述软键盘；
设置所述当前最外层容器的高度为所述初始最外层容器的初始高度。
作为优选，所述将所述当前最外层容器置于所述软键盘顶部，并控制页面的头部回滚到所述当前最外层容器的头部的步骤之后，还包括：
获取所述主屏幕的宽度；
获取所述页面的宽度；
判断所述主屏幕的宽度与所述页面的宽度是否相等；
若所述主屏幕的宽度与所述页面的宽度不相等，对所述页面进行排版，使得排版后的所述页面的宽度与所述主屏幕的宽度相匹配。
本申请还提供了一种移动端页面布局的适配装置，包括：
第一判断模块，用于判断移动端是否为ios系统；
第一检测模块，用于若为ios系统，检测页面中的所述输入框底部至所述移动端的主屏幕底部之间的第一距离，并判断所述输入框是否接收到输入信号；
第二检测模块，用于若所述输入框接收到输入信号，则弹起软键盘并检测所述软键盘顶部与所述主屏幕底部之间的第二距离；
第一获取模块，用于判断第一距离是否小于第二距离，若是，获取初始最外层容器的初始高度，其中，所述初始最外层容器用于放置所述页面的展示内容；
第一计算模块：用于计算所述初始最外层容器的初始高度与所述第二距离之间的差值，得到所述初始最外层容器的变化高度值；
设置模块，用于基于所述初始最外层容器的变化高度值设置当前最外层容器，其中，所述当前最外层容器的高度为所述变化高度值，所述当前最外层容器的宽度与所述初始最外层容器的宽度相同；
回滚模块，用于将所述当前最外层容器置于所述软键盘顶部，并控制页面的头部回滚到所述当前最外层容器的头部。
作为优选，所述第一检测模块包括：
第一获取单元，用于通过所述输入框的ID获取所述输入框元素:
第二获取单元，用于根据所述输入框元素获取所述输入框的高度；
第三获取单元，用于获取所述输入框顶部距离所述主屏幕顶部的第三距离；
第四获取单元，用于获取主屏幕的整体高度；
第一计算单元，用于利用所述主屏幕的整体高度减去所述输入框的高度与所述第三距离之和，得到第一距离。
本申请还提供了一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，所述处理器执行所述计算机程序时实现上述移动端页面布局的适配方法的步骤。
本申请还提供了一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现上述移动端页面布局的适配方法的步骤。
本申请的有益效果为：通过判断移动端是否为ios系统；若为ios系统，检测页面中的输入框底部至移动端的主屏幕底部之间的第一距离，并判断输入框是否接收到输入信号；若输入框接收到输入信号，则弹起软键盘并检测软键盘顶部与主屏幕底部之间的第二距离；判断第一距离是否小于第二距离，若是，获取初始最外层容器的初始高度，其中，初始最外层容器用于放置页面的展示内容；计算初始最外层容器的初始高度与第二距离之间的差值，得到初始最外层容器的变化高度值；基于初始最外层容器的变化高度值设置当前最外层容器，其中，当前最外层容器的高度为所述变化高度值，当前最外层容器的宽度与初始最外层容器的宽度相同；将当前最外层容器置于软键盘顶部，并控制页面的头部回滚到当前最外层容器的头部。这样能够使得最外层容器的展示内容缩短，并将原本飞出主屏幕顶部的页面内容向下拉回到主屏幕的顶部上，从而能够防止位于主屏幕顶部的内容被用户遗失，尤其是使用网页进行一些机器人对话时，用户可查看到浏览器顶部的提示信息与快捷入口，提升了IOS系统对页面的适配度和用户好感度。
附图说明
图1为本申请一实施例的移动端页面布局的适配方法流程示意图。
图2为本申请一实施例的移动端页面布局的适配装置结构示意图。
图3为本申请一实施例的计算机设备内部结构示意图。
本申请目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。
具体实施方式
应当理解，此处所描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。
如图1所示，本申请提出一种移动端页面布局的适配方法，包括：
S1：判断移动端是否为ios系统；
S2：若为ios系统，检测页面中的输入框底部至所述移动端的主屏幕底部之间的第一距离，并判断所述输入框是否接收到输入信号；
S3：若所述输入框接收到输入信号，则弹起软键盘并检测所述软键盘顶部与所述主屏幕底部之间的第二距离；
S4：判断第一距离是否小于第二距离，若是，获取初始最外层容器的初始高度，其中，所述初始最外层容器用于放置所述页面的展示内容；
S5：计算所述初始最外层容器的初始高度与所述第二距离之间的差值，得到所述初始最外层容器的变化高度值；
S6：基于所述初始最外层容器的变化高度值设置当前最外层容器，其中，所述当前最外层容器的高度为所述变化高度值，所述当前最外层容器的宽度与所述初始最外层容器的宽度相同；
S7：将所述当前最外层容器置于所述软键盘顶部，并控制页面的头部回滚到所述当前最外层容器的头部。
如上述步骤S1所述，判断移动端是否为ios系统，具体的，浏览器的服务端会向移动端发送编码navigator.userAgent，userAgent是HTTP请求的用户标识，是一个能代表移动端类型的字符串，这样可通过浏览器获取移动端的信息，从而判断移动端是否为ios系统，若是，当主屏幕接收到输入信号时，可聚焦输入框使软键盘弹起，其中输入信号可以是用户点击主屏幕触发或者是其它方式触发，只要输入框聚焦，系统就会认定输入框为输入状态，从而使软键盘弹起。
如上述步骤S2所述，若为ios系统，检测页面中的输入框底部至所述移动端的主屏幕底部之间的第一距离，并判断所述输入框是否接收到输入信号；在不同的浏览器中，其输入框是不固定的，而主屏幕的底部是固定的，因此第一距离可通过计算输入框底部至主屏幕底部之间的差值来获取。
如上述步骤S3所述，若所述输入框接收到输入信号，则弹起软键盘并检测所述软键盘顶部与所述主屏幕底部之间的第二距离；当输入框聚焦后，即浏览器中的网页会默认为输入状态，输入状态下软键盘会自动弹起，此时可通过获取主屏幕的整体高度与主屏幕内除去软键盘的高度来计算软键盘的高度，即第二距离。
如上述步骤S4-S5所述，判断第一距离是否小于第二距离，若是，获取初始最外层容器的初始高度，其中，所述初始最外层容器用于放置所述页面的展示内容，展示内容包括主屏幕头部的网址部分、网址下面的内容部分与输入框；计算所述初始最外层容器的初始高度与所述第二距离之间的差值，得到所述初始最外层容器的变化高度值；现有技术中，输入框一般固定在最外层容器的底部或顶部，当输入框固定在最外层容器顶部时，由于输入框底部到主屏幕底部的距离远远大于软键盘本身的距离，因此弹起软键盘以后，输入框的位置还是固定在最外层容器的顶部，即输入框位于软键盘之上，那么输入框是可见的，因此最外层容器的展示内容不会因为软键盘弹起而向主屏幕外翻滚；但是当输入框固定在最外层容器的底部时，即输入框底部到移动端的主屏幕底部的距离小于软键盘本身的距离时，弹起软键盘后，为了使得输入框可见，不被软键盘隐藏，此时，输入框向主屏幕顶部的方向进行位移时，会带动整个最外层容器向上滚，从而使得最外层容器内位于顶部的页面飞出主屏幕。因此，需要先检测第一距离，即输入框底部距离主屏幕底部的高度，再检测第二距离，即软键盘的高度，若第一距离小于第二距离，则表示输入框位于主屏幕的底部，那么弹起软键盘，则可能会使得位于最外层容器内页面顶部的展示内容全部向上产生移动，从而使主屏幕顶部的展示内容飞出主屏幕；这时，可以通过获取初始最外层容器的初始高度，计算初始最外层容器的初始高度与第二距离之间的差值，得到初始最外层容器的变化高度值；即用初始最外层容器的初始高度减去软键盘的高度，即可获取到最外层容器的变化高度值；通过计算最外层容器的变化高度值，可以了解到当软键盘弹起后，初始最外层容器中页面的展示内容的变化高度。
如上述步骤S6所述，基于初始最外层容器的变化高度值设置当前最外层容器，其中，当前最外层容器的高度为变化高度值，当前最外层容器的宽度与初始最外层容器的宽度相同；具体的，初始最外层容器位于主屏幕中，用于放置页面的展示内容，将初始最外层容器的变化高度值设为当前最外层容器的高度，即将当前最外层容器中页面的展示内容缩短，例如初始最外层容器的初始高度为146毫米，宽度为71毫米，软键盘的高度为36毫米，那么软键盘弹起后，初始最外层容器的变化高度值为110毫米，即主屏幕内当前最外层容器中页面的展示内容高度为110毫米，而页面顶部的展示内容被软键盘顶出主屏幕，则被顶出的页面的展示内容为36毫米，此时可将当前最外层容器的高度设置为初始最外层容器的变化高度值，即将当前最外层容器的高度设置为110毫米，以使主屏幕中页面的展示内容的高度从146毫米缩短为110毫米。
如上述步骤S7所述，将所述当前最外层容器置于所述软键盘顶部，并控制页面的头部回滚到所述当前最外层容器的头部。具体的，使用编码scrollT0()的方法可将页面的头部滚到当前最外层容器的头部，也可以将主屏幕左上角的顶部设为坐标原点，然后将当前最外层容器顶部的左上角滚动到坐标原点处，这样就能够将滚出主屏幕的页面内容向回滚到原位，从而使得iOS系统中，主屏幕中的展示内容与android系统主屏幕中的展示内容一致，当用户使用ios系统在浏览器中处理一些机器人对话时，便于看到主屏幕顶部显示的信息和入口，解决了不同系统页面展示内容不一致的技术问题，提升了页面适配度。
在本实施例中，所述检测所述输入框底部与所述主屏幕底部之间的第一距离的步骤S2包括：
S21：通过所述输入框的ID获取所述输入框元素:
S22：根据所述输入框元素获取所述输入框的高度；
S23：获取输入框顶部距离主屏幕顶部的第三距离；以及，
S24：获取主屏幕的整体高度；
S25：利用所述主屏幕的整体高度减去所述输入框的高度与所述第三距离之和，得到第一距离。
如上述S21-S25所述，实现了对所述输入框底部与所述主屏幕底部之间的第一距离J1的检测。即通过所述输入框的ID获取所述输入框元素，根据所述输入框元素可获取所述输入框的高度，具体的，输入框的高度L1可通过编码el.offsetHeight获取；输入框顶部距离主屏幕顶部的第三距离L2，可通过编码el.offsetTop获取，主屏幕的整体高度H1，可通过编码window.innerHeight获取，当主屏幕的整体高度H1、所述输入框的高度L1、与所述第三距离L2都获取到之后，可通过主屏幕的整体高度H1、所述输入框的高度L1、与第三距离L2计算输入框底部与所述主屏幕底部之间的第一距离J1，即第一距离J1＝H1-L1-L2。
在本实施例中，所述若所述输入框接收到输入信号，则弹起软键盘并检测所述软键盘顶部与所述主屏幕底部之间的第二距离的步骤S3包括：
S31：持续监听输入框是否处于输入状态；
S32：若处于输入状态，在预设延时时间到达之后，获取主屏幕的整体高度与主屏幕内除所述软键盘外的高度；
S33：计算所述主屏幕的整体高度与所述主屏幕内除所述软键盘外的高度之间的差值，得到第二距离。。
如上述S31-S33所述，实现了对所述软键盘与所述主屏幕底部之间的第二距离J2的检测。具体的，在S31-32的步骤中，可设置一个变量isTyping＝true用来表示处于输入状态，同时由于软键盘弹起需要时间，因此在持续监听的过程中，当监听到输入框为输入状态时，可设置一定时器，定时器起到延时的作用，在本实施中，可设置定时器的定时时间为100ms，当100ms过后，软键盘则会完全弹起，此时再获取主屏幕内除所述软键盘外的高度，那么此高度会比较精确；在S33的步骤中，可通过编码window.innerHeigh来获取主屏幕内除所述软键盘外的高度H3，具体的，先使用编码window.innerHeigh来获取主屏幕的整体高度H1，再使用主屏幕的整体高度H1减去主屏幕内除所述软键盘外的高度H3，即可得到软键盘顶部与主屏幕底部之间的第二距离J2，即J2＝H1-H3。
在本实施例中，将所述当前最外层容器置于所述软键盘顶部，并控制页面的头部回滚到所述当前最外层容器的头部步骤S7包括：
S61：判断输入框与软键盘之间是否存在空白区域；
S62：若存在，将所述当前最外层容器置于所述软键盘顶部，并控制页面的头部回滚到所述当前最外层容器的头部，所述空白区域跟随所述页面向下回滚至所述软键盘的底层。
如上述S61-S62所述，判断输入框与软键盘之间是否存在空白区域；若存在，将当前最外层容器置于软键盘顶部，并控制页面的头部回滚到当前最外层容器的头部，空白区域跟随页面向下回滚至软键盘的底层；即可达到将主屏幕中向上滚动以至于飞出屏幕的展示内容使其向下回滚至主屏幕顶部。具体的，由于上述S6步骤中，将当前最外层容器的高度缩短了，那么其页面的展示内容也会随着当前最外层容器的高度缩短，需要注意的是，由于输入框固定在最外层容器的底部，因此，当前最外层容器的高度缩短后，输入框还是固定在当前最外层容器的底部；弹起软键盘后，由于软键盘将初始最外层容器整体向上顶，使其页面顶部的展示内容滚出主屏幕外，而此时软键盘的底层为空白区域，即空白区域内没有页面的展示内容，那么当当前最外层容器的高度缩短后，原本位于软键盘底部的空白区域会向当前最外层容器的方向发生滚动，而滚动的距离即是软键盘弹起的距离，且空白区域会位于软键盘与固定在当前最外层容器的底部的输入框之间，为了避免出现空白区域影响用户体验，将当前最外层容器置于软键盘顶部，并控制页面的头部回滚到当前最外层容器的头部，空白区域则跟随页面向下回滚至软键盘的底层；具体的，可将主屏幕顶部的左上角设为坐标原点，即建立二维坐标系，将主屏幕的高设为Y轴，宽设为X轴，获取主屏幕顶部左上角的位置，将其设置为坐标原点(0,0)，再将当前最外层容器的左上角滚动到坐标原点，即将飞出主屏幕的展示内容的顶部的左上角滚动到坐标原点，以使得原本向上滚动的展示内容向下滚动到原位，位于当前最外层容器下端的空白区域也会随之向下滚动，即会隐藏在软键盘之后。
在本实施例中，若在控制页面的头部回滚到当前最外层容器的头部之后，用户再手动将页面向上滚动，那么位于软键盘后面的空白区域还是会显示出来，这样会影响用户的使用体验，所以当用户自主滚动主屏幕时，可以将软键盘收起来，并将当前最外层容器的高度恢复到初始最外层容器的初始高度，这样可以达到隐藏空白区域的技术效果。具体的，所述将所述当前最外层容器置于所述软键盘顶部，并控制页面的头部回滚到所述当前最外层容器的头部的步骤S7之后，包括：
S71：判断输入框是否处于输入状态；
S72：若输入框处于输入状态，判断预先与页面执行滚动行为绑定的操作是否被执行；
S73：若所述页面执行滚动行为绑定的操作被执行，则收起所述软键盘；
S74：设置所述当前最外层容器的高度为所述初始最外层容器的初始高度。
在上述S71-S74的步骤中，可预先在浏览器页面初始化的时候对滚动行为进行绑定，绑定可通过编码window.onscroll来设置，由于页面无法控制软键盘的升起和消失，所以可通过输入框的失焦事件，去触发特定的代码来控制软键盘的消失；具体的，在输入框处于输入状态时，判断预先与页面执行滚动行为绑定的操作是否被执行，即页面是否发生了滚动行为，若发生滚动行为，则会触发输入框的失焦事件，失焦事件即自动认为输入框不处于输入状态，从而触发软键盘收起，此时设置当前最外层容器的实际高度为初始最外层容器的初始高度，从而使得主屏幕中页面的展示内容可以恢复到原状；其中，判断输入框是否处于输入状态可通过判断上文设置的变量isTyping是否为ture来实现，当为true时，判断页面是否发生滚动行为，若发生，可触发输入框失焦事件，并设置输入状态isTyping＝false，此时，软键盘将自动收起；最后将当前最外层容器的高度设为初始最外层容器的初始高度，可通过document.getElementById(‘app’).style.height＝‘100％’来实现。
在本实施例中，所述将所述当前最外层容器置于所述软键盘顶部，并控制页面的头部回滚到所述当前最外层容器的头部的步骤S7之后，还包括：
S74：获取所述主屏幕的宽度；
S75：获取所述页面的宽度；
S76：判断所述主屏幕的宽度与所述页面的宽度是否相等；
S77：若所述主屏幕的宽度与所述页面的宽度不相等，对所述页面进行排版，使得排版后的所述页面的宽度与所述主屏幕的宽度相匹配。
在上述S74-77中，通过获取所述主屏幕的宽度、与页面的宽度；并判断所述主屏幕的宽度与所述页面的宽度是否相等；若所述主屏幕的宽度与所述页面的宽度不相等，对所述页面进行排版，使得排版后的所述页面的宽度与所述主屏幕的宽度相匹配，解决了现有技术中由于页面中处于两侧的页面内容不能完全显示在主屏幕，用户需要左右拖动页面之后，才能查看到页面两侧的内容，信息获取效率低的问题；达到了排版后的页面中的内容可以完全显示，用户不需要左右拖动，进而提高信息获取效率的效果。
本申请还提供一种移动端页面布局的适配装置，包括：
第一判断模块1，用于判断移动端是否为ios系统；
第一检测模块2，用于若为ios系统，检测页面中的所述输入框底部至所述移动端的主屏幕底部之间的第一距离，并判断所述输入框是否接收到输入信号；
第二检测模块3，用于若所述输入框接收到输入信号，则弹起软键盘并检测所述软键盘顶部与所述主屏幕底部之间的第二距离；
第一获取模块4，用于判断第一距离是否小于第二距离，若是，获取初始最外层容器的初始高度，其中，所述初始最外层容器用于放置所述页面的展示内容；
第一计算模块5：用于计算所述初始最外层容器的初始高度与所述第二距离之间的差值，得到所述初始最外层容器的变化高度值；
第一设置模块6，用于基于所述初始最外层容器的变化高度值设置当前最外层容器，其中，所述当前最外层容器的高度为所述变化高度值，所述当前最外层容器的宽度与所述初始最外层容器的宽度相同；
回滚模块7，用于将所述当前最外层容器置于所述软键盘顶部，并控制页面的头部回滚到所述当前最外层容器的头部。
在本实施例中，所述第一检测模块2包括：
第一获取单元，用于通过所述输入框的ID获取所述输入框元素:
第二获取单元，用于根据所述输入框元素获取所述输入框的高度；
第三获取单元，用于获取输入框顶部距离主屏幕顶部的第三距离；
第四获取单元，用于获取主屏幕的整体高度；
第一计算单元，用于利用所述主屏幕的整体高度减去所述输入框的高度与所述第三距离之和，得到第一距离。
在本实施例中，所述第二检测模块3包括：
监听单元，用于持续监听输入框是否处于输入状态；
第五获取单元，用于若处于输入状态，在预设延时时间到达之后，获取主屏幕的整体高度与主屏幕内除所述软键盘外的高度；
第二计算单元，用于计算所述主屏幕的整体高度与所述主屏幕内除所述软键盘外的高度之间的差值，得到第二距离。
在本实施例中，回滚模块7包括：
第一判断单元，用于判断输入框与软键盘之间是否存在空白区域；
设置单元，用于若存在，将所述当前最外层容器置于所述软键盘顶部，并控制页面的头部回滚到所述当前最外层容器的头部，所述空白区域跟随所述页面向下回滚至所述软键盘的底层。
在本实施例中，移动端页面布局的适配装置还包括：
第二判断模块，用于判断输入框是否处于输入状态；
第三判断模块，用于用于若输入框处于输入状态，判断预先与页面执行滚动行为绑定的操作是否被执行；
执行模块，用于若所述页面执行滚动行为绑定的操作被执行，则收起所述软键盘；
第二设置模块，用于设置所述当前最外层容器的高度为所述初始最外层容器的初始高度。
在本实施例中，移动端页面布局的适配装置还包括：
第二获取模块，用于获取所述主屏幕的宽度；
第三获取模块，用于获取所述页面的宽度；
第四判断模块，用于判断所述主屏幕的宽度与所述页面的宽度是否相等；
排版模块，用于若所述主屏幕的宽度与所述页面的宽度不相等，对所述页面进行排版，使得排版后的所述页面的宽度与所述主屏幕的宽度相匹配。
上述各模块、各单元均是对应执行上述移动端页面布局的适配装置。
如图3所示，本申请还提供了一种计算机设备，该计算机设备可以是服务器，其内部结构可以如图3所示。该计算机设备包括通过系统总线连接的处理器、存储器、网络接口和数据库。其中，该计算机设计的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质、内存储器。该非易失性存储介质存储有操作系统、计算机程序和数据库。该内存器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的数据库用于存储移动端页面布局的适配方法的过程需要的所有数据。该计算机设备的网络接口用于与外部的终端通过网络连接通信。该计算机程序被处理器执行时以实现移动端页面布局的适配方法。
本领域技术人员可以理解，图3中示出的结构，仅仅是与本申请方案相关的部分结构的框图，并不构成对本申请方案所应用于其上的计算机设备的限定。
本申请一实施例还提供一种计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现上述任意一个移动端页面布局的适配方法。
本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储与一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本申请所提供的和实施例中所使用的对存储器、存储、数据库或其它介质的任何引用，均可包括非易失性和/或易失性存储器。非易失性存储器可以包括只读存储器(ROM)、可编程ROM(PROM)、电可编程ROM(EPROM)、电可擦除可编程ROM(EEPROM)或闪存。易失性存储器可包括随机存取存储器(RAM)或者外部高速缓冲存储器。作为说明而非局限，RAM通过多种形式可得，诸如静态RAM(SRAM)、动态RAM(DRAM)、同步DRAM(SDRAM)、双速据率SDRAM(SSRSDRAM)、增强型SDRAM(ESDRAM)、同步链路(Synchlink)DRAM(SLDRAM)、存储器总线(Rambus)直接RAM(RDRAM)、直接存储器总线动态RAM(DRDRAM)、以及存储器总线动态RAM(RDRAM)等。
需要说明的是，在本文中，术语“包括”、“包含”或者其任何其它变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、装置、物品或者方法不仅包括那些要素，而且还包括没有明确列出的其它要素，或者是还包括为这种过程、装置、物品或者方法所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括该要素的过程、装置、物品或者方法中还存在另外的相同要素。
以上所述仅为本申请的优选实施例，并非因此限制本申请的专利范围，凡是利用本申请说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本申请的专利保护范围内。

Claims (10)

1.一种移动端页面布局的适配方法，其特征在于，包括：
判断移动端是否为ios系统；
若为ios系统，检测页面中的输入框底部至所述移动端的主屏幕底部之间的第一距离，并判断所述输入框是否接收到输入信号；
若所述输入框接收到输入信号，则弹起软键盘并检测所述软键盘顶部与所述主屏幕底部之间的第二距离；
判断所述第一距离是否小于所述第二距离，若是，获取初始最外层容器的初始高度，其中，所述初始最外层容器用于放置所述页面的展示内容；
根据计算所述初始最外层容器的初始高度与所述第二距离之间的差值，得到所述初始最外层容器的变化高度值；
基于所述初始最外层容器的变化高度值设置当前最外层容器，其中，所述当前最外层容器的高度为所述变化高度值，所述当前最外层容器的宽度与所述初始最外层容器的宽度相同；
将所述当前最外层容器置于所述软键盘顶部，并控制页面的头部回滚到所述当前最外层容器的头部。
2.根据权利要求1所述的移动端页面布局的适配方法，其特征在于，所述检测页面中的输入框底部至所述移动端的主屏幕底部之间的第一距离的步骤包括：
通过所述输入框的ID获取所述输入框元素:
根据所述输入框元素获取所述输入框的高度；
获取所述输入框顶部距离所述主屏幕顶部的第三距离；以及，
获取主屏幕的整体高度；
利用所述主屏幕的整体高度减去所述输入框的高度与所述第三距离之和，得到第一距离。
3.根据权利要求1所述的移动端页面布局的适配方法，其特征在于，所述若所述输入框接收到输入信号，则弹起软键盘并检测所述软键盘顶部与所述主屏幕底部之间的第二距离的步骤包括：
持续监听输入框是否处于输入状态；
若处于输入状态，在预设延时时间到达之后，获取主屏幕的整体高度与主屏幕内除所述软键盘外的高度；
计算所述主屏幕的整体高度与所述主屏幕内除所述软键盘外的高度之间的差值，得到第二距离。
4.根据权利要求1所述的移动端页面布局的适配方法，其特征在于，将所述当前最外层容器置于所述软键盘顶部，并控制页面的头部回滚到所述当前最外层容器的头部的步骤包括：
判断输入框与软键盘之间是否存在空白区域；
若存在，将所述当前最外层容器置于所述软键盘顶部，并控制页面的头部回滚到所述当前最外层容器的头部，所述空白区域跟随所述页面向下回滚至所述软键盘的底层。
5.根据权利要求1所述的移动端页面布局的适配方法，其特征在于，所述将所述当前最外层容器置于所述软键盘顶部，并控制页面的头部回滚到所述当前最外层容器的头部的步骤之后，包括：
判断输入框是否处于输入状态；
若输入框处于输入状态，判断预先与页面执行滚动行为绑定的操作是否被执行；
若所述页面执行滚动行为绑定的操作被执行，则收起所述软键盘；
设置所述当前最外层容器的高度为所述初始最外层容器的初始高度。
6.根据权利要求1所述的移动端页面布局的适配方法，其特征在于，所述将所述当前最外层容器置于所述软键盘顶部，并控制页面的头部回滚到所述当前最外层容器的头部的步骤之后，还包括：
获取所述主屏幕的宽度；
获取所述页面的宽度；
判断所述主屏幕的宽度与所述页面的宽度是否相等；
若所述主屏幕的宽度与所述页面的宽度不相等，对所述页面进行排版，使得排版后的所述页面的宽度与所述主屏幕的宽度相匹配。
7.一种移动端页面布局的适配装置，其特征在于，包括：
第一判断模块，用于判断移动端是否为ios系统；
第一检测模块，用于若为ios系统，检测页面中的输入框底部至所述移动端的主屏幕底部之间的第一距离，并判断所述输入框是否接收到输入信号；
第二检测模块，用于若所述输入框接收到输入信号，则弹起软键盘并检测所述软键盘顶部与所述主屏幕底部之间的第二距离；
第一获取模块，用于判断所述第一距离是否小于所述第二距离，若是，获取初始最外层容器的初始高度，其中，所述初始最外层容器用于放置所述页面的展示内容；
第一计算模块：用于计算所述初始最外层容器的初始高度与所述第二距离之间的差值，得到所述初始最外层容器的变化高度值；
设置模块，用于基于所述初始最外层容器的变化高度值设置当前最外层容器，其中，所述当前最外层容器的高度为所述变化高度值，所述当前最外层容器的宽度与所述初始最外层容器的宽度相同；
回滚模块，用于将所述当前最外层容器置于所述软键盘顶部，并控制页面的头部回滚到所述当前最外层容器的头部。
8.根据权利要求7所述的移动端页面布局的适配装置，其特征在于，所述第一检测模块包括：
第一获取单元，用于通过所述输入框的ID获取所述输入框元素:
第二获取单元，用于根据所述输入框元素获取所述输入框的高度；
第三获取单元，用于获取所述输入框顶部距离所述主屏幕顶部的第三距离；
第四获取单元，用于获取主屏幕的整体高度；
第一计算单元，用于利用所述主屏幕的整体高度减去所述输入框的高度与所述第三距离之和，得到第一距离。
9.一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1至6中任一项所述移动端页面布局的适配方法的步骤。
10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1至6中任一项所述的移动端页面布局的适配方法的步骤。
CN202110738666.7A 2021-06-30 2021-06-30 移动端页面布局的适配方法、装置和计算机设备 Active CN113325984B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202110738666.7A CN113325984B (zh) 2021-06-30 2021-06-30 移动端页面布局的适配方法、装置和计算机设备

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202110738666.7A CN113325984B (zh) 2021-06-30 2021-06-30 移动端页面布局的适配方法、装置和计算机设备

Publications (2)

Publication Number Publication Date
CN113325984A true CN113325984A (zh) 2021-08-31
CN113325984B CN113325984B (zh) 2022-11-25

Family

ID=77425255

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202110738666.7A Active CN113325984B (zh) 2021-06-30 2021-06-30 移动端页面布局的适配方法、装置和计算机设备

Country Status (1)

Country Link
CN (1) CN113325984B (zh)

Citations (10)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20130332869A1 (en) * 2012-06-06 2013-12-12 Ken Ferry Graphical user interface layout
US20130331162A1 (en) * 2012-06-12 2013-12-12 Alexander Higgins Krivicich Match three gaming system and method
US20140165006A1 (en) * 2010-04-07 2014-06-12 Apple Inc. Device, Method, and Graphical User Interface for Managing Folders with Multiple Pages
CN104375666A (zh) * 2014-12-11 2015-02-25 上海触乐信息科技有限公司 跨设备的输入方法、处理装置、输入设备及智能显示设备
CN105204724A (zh) * 2014-06-26 2015-12-30 阿里巴巴集团控股有限公司 一种信息显示方法及装置
CN108170328A (zh) * 2016-12-07 2018-06-15 英业达科技有限公司 移动终端的操作界面及操作方法
CN109460360A (zh) * 2018-10-29 2019-03-12 北京云测信息技术有限公司 一种增强ios自动化测试输入稳定性和兼容性的方法
CN110442341A (zh) * 2019-07-23 2019-11-12 平安国际智慧城市科技股份有限公司 应用程序的界面配置方法、装置及终端设备
CN111208930A (zh) * 2020-01-20 2020-05-29 北京元心科技有限公司 一种键盘布局方法、装置、存储设备及终端设备
CN111625167A (zh) * 2020-05-28 2020-09-04 上海哔哩哔哩科技有限公司 页面切换方法、装置、计算机设备

Patent Citations (10)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20140165006A1 (en) * 2010-04-07 2014-06-12 Apple Inc. Device, Method, and Graphical User Interface for Managing Folders with Multiple Pages
US20130332869A1 (en) * 2012-06-06 2013-12-12 Ken Ferry Graphical user interface layout
US20130331162A1 (en) * 2012-06-12 2013-12-12 Alexander Higgins Krivicich Match three gaming system and method
CN105204724A (zh) * 2014-06-26 2015-12-30 阿里巴巴集团控股有限公司 一种信息显示方法及装置
CN104375666A (zh) * 2014-12-11 2015-02-25 上海触乐信息科技有限公司 跨设备的输入方法、处理装置、输入设备及智能显示设备
CN108170328A (zh) * 2016-12-07 2018-06-15 英业达科技有限公司 移动终端的操作界面及操作方法
CN109460360A (zh) * 2018-10-29 2019-03-12 北京云测信息技术有限公司 一种增强ios自动化测试输入稳定性和兼容性的方法
CN110442341A (zh) * 2019-07-23 2019-11-12 平安国际智慧城市科技股份有限公司 应用程序的界面配置方法、装置及终端设备
CN111208930A (zh) * 2020-01-20 2020-05-29 北京元心科技有限公司 一种键盘布局方法、装置、存储设备及终端设备
CN111625167A (zh) * 2020-05-28 2020-09-04 上海哔哩哔哩科技有限公司 页面切换方法、装置、计算机设备

Non-Patent Citations (2)

* Cited by examiner, † Cited by third party
Title
MINO吖: "ios移动端input输入框常见问题解决办法", 《HTTPS://BLOG.CSDN.NET/QQ_36157085/ARTICLE/DETAILS/105180795》 *
阳光天: "iOS 弹出键盘,输入框上移问题", 《HTTPS://WWW.CNBLOGS.COM/IOS-WYH/P/7064284.HTML》 *

Also Published As

Publication number Publication date
CN113325984B (zh) 2022-11-25

Similar Documents

Publication Publication Date Title
US10216352B2 (en) Method, device, and storage medium for selecting content of a webpage through automatically scrolling webpage content
CN105550356B (zh) 一种浏览内容预加载方法及终端
JP6430020B2 (ja) ウェブページのローディング方法およびシステム
CN104007909B (zh) 页面自动调整方法和装置
CN106033450B (zh) 一种广告拦截的方法、装置和浏览器
CN104881273A (zh) 一种网页渲染的分析方法和终端设备
CN113325984B (zh) 移动端页面布局的适配方法、装置和计算机设备
CN107038219A (zh) iOS中加载GIF动画的方法及装置
CN112395848A (zh) 富文本显示方法、装置、计算机设备和存储介质
CN103455492B (zh) 一种搜索网页的方法和装置
CN106874387B (zh) 一种自适应html滚屏展示实时信息的方法
CN108664310A (zh) 显示框处理方法、装置、计算机设备和存储介质
CN106201185B (zh) 一种浏览器中输入框的定位方法、装置及移动设备
CN112099706A (zh) 页面展示方法、装置、电子设备及计算机可读存储介质
CN107341234A (zh) 页面的显示方法、装置和计算机可读存储介质
CN115329226A (zh) 实现网页信息无缝滚动的处理方法、装置、设备及介质
CN107316203B (zh) 展示信息的探测方法及装置、计算机可读存储介质、终端
CN112463258B (zh) 开屏过渡显示方法、终端及计算机存储介质
CN106156292A (zh) 一种信息显示方法、设备及服务器
CN105512123A (zh) 用于创建网页特征图像和生成网页书签的方法和装置
CN104679786B (zh) 一种表单处理的方法及装置
CN111797344A (zh) 页面跳转显示方法、装置、计算机设备及存储介质
CN106126655A (zh) 网页保存处理方法及装置
CN113419784A (zh) 页面资源的缓存方法、装置、设备及介质
CN105224579A (zh) 一种历史页面导航方法和装置

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant