移动终端上Web应用程序的界面动态适配方法及系统技术方案

本发明专利技术公开了一种移动终端上Web应用程序的界面动态适配方法及系统，方法包括：在Web应用程序的页面中嵌入扩展样式文件，扩展样式文件中保存有多个尺寸样式以及与尺寸样式对应的尺寸信息，尺寸信息包括对应设定的基准分辨率的基准尺寸信息；通过浏览器启动Web应用程序并加载Web应用程序的页面；提取页面中的扩展样式文件；获取移动终端的设备分辨率；利用基准分辨率和设备分辨率，调整扩展样式文件中保存的所有尺寸样式的尺寸信息；根据调整后的尺寸信息生成标准样式文件；由浏览器根据标准样式文件，刷新显示页面。应用本发明专利技术，可轻易地达到动态适配的目的，大大降低了界面适配的工作量，同时又能满足对不同设备分辨率进行精确界面适配的要求。

【技术实现步骤摘要】
移动终端上Web应用程序的界面动态适配方法及系统
本专利技术涉及移动互联网
，尤其涉及一种移动终端上Web应用程序的界面 动态适配方法及系统。
技术介绍
移动终端上Web应用程序指的是基于Web技术来开发应用程序的主体，直接运行 在浏览器或者运行于内嵌浏览器控件，以app方式存在的应用程序。 目前市面上的移动终端多达上千款，设备分辨率多种多样，主流的设备分辨率有 240x320、320x480、480x800、540x640、640x960、720xl280、1080x1920 等，为了使同一种 Web 应用程序能够在具有不同的设备分辨率的移动终端上进行部署，开发者需要针对具有不同 的设备分辨率的移动终端分别开发不同版本的Web应用程序，即每种设备分辨率均对应一 种样式文件，在Web应用程序运行时，根据移动终端的设备分辨率加载相对应的样式资源。 上述适配方式的优点是能够针对每种设备分辨率进行精确适配，缺陷在于适配工 作耗费开发人员的大量时间和精力，开发、维护工作量大，并且Web应用程序在未适配过的 设备分辨率的移动终端上显示错乱。
技术实现思路
为了解决现有技术中的缺陷，本专利技术提供了一种移动终端上Web应用程序的界面 动态适配方法及系统，大大降低了界面适配的工作量，同时又能够满足对不同设备分辨率 进行精确界面适配的要求。 为实现上述目的，本专利技术的技术方案为： -种移动终端上Web应用程序的界面动态适配方法，包括： 在Web应用程序的页面中嵌入扩展样式文件，所述扩展样式文件中保存有多个尺 寸样式以及与所述尺寸样式对应的尺寸信息，所述尺寸信息包括对应设定的基准分辨率的 基准尺寸信息； 通过浏览器启动所述Web应用程序并加载所述Web应用程序的页面； 提取所述页面中的扩展样式文件； 获取移动终端的设备分辨率； 利用所述基准分辨率和所述设备分辨率，调整所述扩展样式文件中保存的所有尺 寸样式的尺寸信息，并根据调整后的尺寸信息生成标准样式文件； 由浏览器根据所述标准样式文件，刷新显示所述页面。 优选的是，所述利用所述基准分辨率和所述设备分辨率，调整所述扩展样式文件 中保存的所有尺寸样式的尺寸信息包括： 根据所述移动终端的设备分辨率和所述基准分辨率，确定缩放比例； 利用所述缩放比例，依次调整所述扩展样式文件中保存的每个尺寸样式的基准尺 寸信息，并将调整后的基准尺寸信息作为所述尺寸样式的尺寸信息。 优选的是，所述根据所述移动终端的设备分辨率和所述基准分辨率，确定缩放比 例包括： 计算所述设备分辨率的宽度与所述基准分辨率的宽度的比值； 将所述比值作为所述缩放比例。 优选的是，所述扩展样式文件中保存的一个或多个尺寸样式的尺寸信息还包括对 应特定设备分辨率的特定尺寸信息；所述利用所述基准分辨率和所述设备分辨率，调整所 述扩展样式文件中保存的所有尺寸样式的尺寸信息还包括： 在所述确定缩放比例之前，依次对所述扩展样式文件中保存的每个尺寸样式，检 查所述尺寸样式的尺寸信息是否包括特定设备分辨率，并且所述特定设备分辨率是否与所 述设备分辨率一致； 如果是，则将对应所述特定设备分辨率的特定尺寸信息作为所述尺寸样式的尺寸 信息。 优选的是，所述检查所述特定设备分辨率是否与所述设备分辨率一致包括： 检查所述特定设备分辨率的宽度是否等于所述设备分辨率的宽度； 如果是，则确定所述特定设备分辨率与所述设备分辨率一致； 否则，确定所述特定设备分辨率与所述设备分辨率不一致。 优选的是，所述扩展样式文件为CSS文件。 -种移动终端上Web应用程序的界面动态适配系统，包括： 存储单元，用于存储Web应用程序的页面； 扩展单元，用于在所述存储单元保存的所述页面中嵌入扩展样式文件，所述扩展 样式文件中保存有多个尺寸样式以及与所述尺寸样式对应的尺寸信息，所述尺寸信息包括 对应设定的基准分辨率的基准尺寸信息； 浏览器，用于启动所述Web应用程序并加载所述Web应用程序的页面； 扩展样式文件提取单元，用于提取所述存储单元保存的所述页面中的扩展样式文 件； 设备分辨率获取单兀，用于获取移动终端的设备分辨率； 调整单元，用于根据所述扩展样式文件提取单元提取的扩展样式文件中的基准分 辨率和所述设备分辨率获取单元获取的设备分辨率，调整所述扩展样式文件中保存的所有 尺寸样式的尺寸信息，并根据调整后的尺寸信息，生成标准样式文件； 所述浏览器，还用于根据所述调整单元生成的标准样式文件，刷新显示所述页面。 优选的是，所述调整单元包括： 缩放比例确定子单元，用于根据所述移动终端的设备分辨率和所述基准分辨率， 确定缩放比例； 调整子单元，用于利用所述缩放比例确定子单元确定的缩放比例，依次调整所述 扩展样式文件中保存的每个尺寸样式的基准尺寸信息，并将调整后的基准尺寸信息作为所 述尺寸样式的尺寸信息。 优选的是，所述缩放比例确定子单元，具体用于计算所述设备分辨率的宽度与所 述基准分辨率的宽度的比值；将所述比值作为所述缩放比例。 优选的是，所述扩展样式文件中保存的一个或多个尺寸样式的尺寸信息还包括对 应特定设备分辨率的特定尺寸信息；所述调整单元还包括： 检查子单元，用于在所述缩放比例确定子单元确定缩放比例之前，依次对所述扩 展样式文件中保存的每个尺寸样式，检查所述尺寸样式的尺寸信息是否包括特定设备分辨 率，并检查所述特定设备分辨率是否与所述设备分辨率一致； 特定尺寸确定子单元，用于在所述检查子单元检查到所述尺寸样式的尺寸信息包 括特定设备分辨率，并且所述特定设备分辨率与所述设备分辨率一致时，将对应所述特定 设备分辨率的特定尺寸信息作为所述尺寸样式的尺寸信息。 优选的是，所述检查子单元通过检查所述特定设备分辨率的宽度是否等于所述设 备分辨率的宽度来确定所述特定设备分辨率与所述设备分辨率是否一致。 优选的是，所述扩展样式文件为CSS文件。 本专利技术的有益效果在于，应用本专利技术实施例移动终端上Web应用程序的界面动态 适配方法及系统，只需针对一套基准分辨率进行适配，在其它设备分辨率的移动终端上运 行时能够自动通过缩放比例或特定尺寸信息的调整方式调整样式文件，即可轻易地达到动 态适配的目的，大大降低了界面适配的工作量，同时又能够满足对不同设备分辨率进行精 确界面适配的要求。 【附图说明】 图1示出了本专利技术实施例移动终端上Web应用程序的界面动态适配方法的流程 图； 图2示出了本专利技术实施例中利用所述基准分辨率和所述设备分辨率，调整所述扩 展样式文件中保存的所有尺寸样式的尺寸信息的一种流程图； 图3示出了本专利技术实施例中利用所述基准分辨率和所述设备分辨率，调整所述扩 展样式文件中保存的所有尺寸样式的尺寸信息的另一种流程图； 图4示出了本专利技术实施例移动终端上Web应用程序的界面动态适配系统的结构示 意图； 图5示出了本专利技术实施例中调整单元的一种结构示意图； 图6示出了本专利技术实施例中调整单元的另一种结构示意图。 【具体实施方式】 下面详细描述本专利技术的实施本文档来自技高网...

【技术保护点】
一种移动终端上Web应用程序的界面动态适配方法，其特征在于，包括：在Web应用程序的页面中嵌入扩展样式文件，所述扩展样式文件中保存有多个尺寸样式以及与所述尺寸样式对应的尺寸信息，所述尺寸信息包括对应设定的基准分辨率的基准尺寸信息；通过浏览器启动所述Web应用程序并加载所述Web应用程序的页面；提取所述页面中的扩展样式文件；获取移动终端的设备分辨率；利用所述基准分辨率和所述设备分辨率，调整所述扩展样式文件中保存的所有尺寸样式的尺寸信息，并根据调整后的尺寸信息生成标准样式文件；由浏览器根据所述标准样式文件，刷新显示所述页面。

【技术特征摘要】
1. 一种移动终端上Web应用程序的界面动态适配方法，其特征在于，包括： 在Web应用程序的页面中嵌入扩展样式文件，所述扩展样式文件中保存有多个尺寸样 式以及与所述尺寸样式对应的尺寸信息，所述尺寸信息包括对应设定的基准分辨率的基准 尺寸信息； 通过浏览器启动所述Web应用程序并加载所述Web应用程序的页面； 提取所述页面中的扩展样式文件； 获取移动终端的设备分辨率； 利用所述基准分辨率和所述设备分辨率，调整所述扩展样式文件中保存的所有尺寸样 式的尺寸信息，并根据调整后的尺寸信息生成标准样式文件； 由浏览器根据所述标准样式文件，刷新显示所述页面。2. 根据权利要求1所述的方法，其特征在于，所述利用所述基准分辨率和所述设备分 辨率，调整所述扩展样式文件中保存的所有尺寸样式的尺寸信息包括： 根据所述移动终端的设备分辨率和所述基准分辨率，确定缩放比例； 利用所述缩放比例，依次调整所述扩展样式文件中保存的每个尺寸样式的基准尺寸信 息，并将调整后的基准尺寸信息作为所述尺寸样式的尺寸信息。3. 根据权利要求2所述的方法，其特征在于，所述根据所述移动终端的设备分辨率和 所述基准分辨率，确定缩放比例包括： 计算所述设备分辨率的宽度与所述基准分辨率的宽度的比值； 将所述比值作为所述缩放比例。4. 根据权利要求2所述的方法，其特征在于，所述扩展样式文件中保存的一个或多个 尺寸样式的尺寸信息还包括对应特定设备分辨率的特定尺寸信息；所述利用所述基准分辨 率和所述设备分辨率，调整所述扩展样式文件中保存的所有尺寸样式的尺寸信息还包括： 在所述确定缩放比例之前，依次对所述扩展样式文件中保存的每个尺寸样式，检查所 述尺寸样式的尺寸信息是否包括特定设备分辨率，并且所述特定设备分辨率是否与所述设 备分辨率一致； 如果是，则将对应所述特定设备分辨率的特定尺寸信息作为所述尺寸样式的尺寸信 息。5. 根据权利要求4所述的方法，其特征在于，所述检查所述特定设备分辨率是否与所 述设备分辨率一致包括： 检查所述特定设备分辨率的宽度是否等于所述设备分辨率的宽度； 如果是，则确定所述特定设备分辨率与所述设备分辨率一致； 否则，确定所述特定设备分辨率与所述设备分辨率不一致。6. 根据权利要求1至5任一项所述的方法，其特征在于，所述扩展样式文件为CSS文 件。7. -种移动终端上Web应用程序的界面动态适配系统，其特征在于，包括： 存储单元，用...

【专利技术属性】
技术研发人员：黄明登，
申请(专利权)人：科大讯飞股份有限公司，
类型：发明
国别省市：安徽;34