[发明专利]网页式应用的显示适配方法及装置

说明书

技术领域

本发明涉及移动终端屏幕适配领域，尤其涉及一种网页式应用的显示适 配方法及装置。

背景技术

轻应用是一种无需下载、即搜即用的全功能App，既有Native App的用 户体验，又具有Web App的可检索与智能开发的特性，将有效解决优质应用 和服务与移动用户需求对接的问题。由于轻应用所具有的特性，使其自诞生 以来，受到广大用户的一致好评，促使越来越多基于轻应用的APP的产生， 尤其是在移动终端上的应用。

现有应用于移动终端的轻应用，如LiveApp中，其Web页面及图片显示 过程中，由于移动终端的屏幕分辨率不同，Web页面及图片中移动终端显示过 程中，容易出现Web页面及图片变形和失真的现象，给用户带来不良的用户 体验。

发明内容

本发明要解决的技术问题在于，针对现有技术的缺陷，提供一种网页式 应用的显示适配方法及装置。

本发明解决其技术问题所采用的技术方案是：一种网页式应用的显示适 配方法，包括以下步骤：

S1：在移动终端上创设用于显示Web页面的虚拟窗口，并将所述虚拟窗 口的宽度分辨率设置为固定值；

S2：加载图片，设置所述图片的宽度分辨率与所述虚拟窗口的宽度分辨 率一致，并等比例缩放至所述图片的宽度与所述虚拟窗口的宽度一致；

S3：将所述图片设置成背景在所述虚拟窗口中显示。

优选地，所述步骤S1包括以下步骤：根据移动终端所使用的操作系统的 不同，通过HTML5的API接口在所述移动终端中设置兼容不同操作系统的虚 拟窗口，并将所述虚拟窗口的宽度分辨率设置为固定值。

优选地，所述步骤S1包括以下步骤：

S11：通过HTML5的API接口判断所述移动终端的操作系统是否为ANDROID 系统；若是，则执行步骤S12；若否，则执行步骤S13；

S12：再判断是否为ANDROID2.3以上系统，若是，则将所述移动终端中 创设的所述虚拟窗口的宽度分辨率设置为固定值，最大缩放和最小缩放设置 为所述移动终端的屏幕尺寸，屏幕像素密度设置为所述移动终端屏幕像素密 度；若否；则将所述移动终端中创设的所述虚拟窗口的宽度分辨率设置为固 定值，屏幕像素密度设置为所述移动终端屏幕像素密度；

S13：将所述移动终端中创设的所述虚拟窗口的宽度分辨率设置为固定 值，禁止用户手动调整缩放，屏幕像素密度设置为所述移动终端屏幕像素密 度。

优选地，所述步骤S2包括：判断所述图片的宽度分辨率与所述虚拟窗口 的宽度分辨率是否一致，若一致，则直接将所述图片等比例缩放至图片的宽 度与所述虚拟窗口的宽度一致；若不一致，则调整所述图片的宽度分辨率与 所述虚拟窗口的宽度分辨率一致，再将所述图片等比例缩放至图片的宽度与 所述虚拟窗口的宽度一致。

优选地，所述步骤S3包括：通过HTML5的API接口将所述图片的属性设 置为在显示过程中设置成背景且仅显示一次，并判断所述图片的高度是否大 于虚拟窗口的高度；若是，则将所述图片在所述虚拟窗口中局部显示；若否， 则将所述图片在虚拟窗口中直接显示。

优选地，所述“将所述图片在所述虚拟窗口中局部显示”包括：将所述 图片放置在所述虚拟窗口的左上角、右上角、左下角或右下角，显示所述图 片在所述虚拟窗口以内的部分。

本发明还提供一种网页式应用的显示适配装置，包括：

窗口设置单元：用于在移动终端上创设用于显示Web页面的虚拟窗口， 并将所述虚拟窗口的宽度分辨率设置为固定值；

图片加载单元：用于加载图片，设置所述图片的宽度分辨率与所述虚拟 窗口的宽度分辨率一致，并等比例缩放至所述图片的宽度与所述虚拟窗口的 宽度一致；

显示适配单元：用于将所述图片设置成背景在所述虚拟窗口中显示。

优选地，所述窗口设置单元包括：根据移动终端所使用的操作系统的不 同，通过HTML5的API接口在所述移动终端中设置兼容不同操作系统的虚拟 窗口，并将所述虚拟窗口的宽度分辨率设置为固定值。