[发明专利]一种界面显示方法和装置

说明书

本发明实施例提供一种界面显示方法和装置，其中，该方法包括：通过viewport‑fit设置目标网页在可视窗口中采用网页内容完全覆盖可视窗口的布局方式；通过constant将所述目标网页的网页内容的主体区域限定在显示界面的安全区域中；对所述目标网页底部的fixed元素进行适配；通过设置的布局方式、限定的显示界面和适配的fixed元素对所述目标网页在显示屏中进行显示。通过上述方案解决了现有的界面适配的灵活性低的技术问题，达到了高效实现界面适配的技术效果。

技术领域

本发明涉及互联网技术领域，尤其涉及一种界面显示方法和装置。

背景技术

苹果公司发布了特殊纪念版手机iphonex，该款手机的屏幕与传统手机的屏幕区别较大。主要就是在屏幕的顶部增加了“刘海”，在屏幕的底部增加了用于实现控制功能的“小黑条”，即，iphonx为了实现全面屏，取消了物理按键，增加了底部小黑条。

对于传统的网页(或者H5页面)而言，顶部刘海的适配问题绝大多数浏览器已经自动做出了处理，然而针对底部小黑条这一改动会导致网页出现比较尴尬的屏幕适配问题。尤其对于那些屏幕底端采用fixed属性(css属性)固定的tab的网站而言，不可避免的会出现tab和“小黑条”重叠的问题，这将会导致用户的观感和使用体验降低。

为了解决上述问题，目前大部分网站采用的是固定首屏主要元素宽高的方法，以使得页面的主要元素(包含底部tab在内)高度缩小且固定，从而预留出底部“小黑条”的空间。

然而，这种方式使用起来不够灵活，且会干扰前端固有页面的布局，对其它传统机型不适配。

针对上述问题，目前尚未提出有效的解决方案。

发明内容

本发明实施例提供一种界面显示方法和装置，以实现显示界面与目标机型适配的技术效果。

一方面，本发明实施例提供了一种界面显示方法，包括：

通过viewport-fit设置目标网页在可视窗口中采用网页内容完全覆盖可视窗口的布局方式；

通过constant将所述目标网页的网页内容的主体区域限定在显示界面的安全区域中；

对所述目标网页底部的fixed元素进行适配；

通过设置的布局方式、限定的显示界面和适配的fixed元素对所述目标网页在显示屏中进行显示。

在一个实施方式中，通过设置的布局方式、限定的显示界面和适配的fixed元素对所述目标网页在显示屏中进行显示，包括：

确定所述显示屏所在终端的机型是否为目标机型；

在确定为所述目标机型的情况下，通过设置的布局方式、限定的显示界面和适配的fixed元素对所述目标网页在显示屏中进行显示。

在一个实施方式中，通过constant将所述目标网页的网页内容的主体区域限定在显示界面的安全区域中，包括：

通过constant将安全区域距离底部边界距离设置为小黑条的高度。

在一个实施方式中，所述fixed元素包括以下至少之一：吸底的fixed元素和不吸底的fixed元素。

在一个实施方式中，对所述目标网页底部的fixed元素进行适配，包括：

在fixed元素为吸底的fixed元素的情况下，通过加内边距扩展高度或者根据需要调整实际高度；

在fixed元素为不吸底的fixed元素的情况下，通过外边距来提高该fixed元素的位置。

另一方面，本发明实施例提供了一种界面显示装置，包括：