移动终端上Web应用程序的界面动态适配方法及系统的制作方法
【专利摘要】本发明公开了一种移动终端上Web应用程序的界面动态适配方法及系统，方法包括：在Web应用程序的页面中嵌入扩展样式文件，扩展样式文件中保存有多个尺寸样式以及与尺寸样式对应的尺寸信息，尺寸信息包括对应设定的基准分辨率的基准尺寸信息；通过浏览器启动Web应用程序并加载Web应用程序的页面；提取页面中的扩展样式文件；获取移动终端的设备分辨率；利用基准分辨率和设备分辨率，调整扩展样式文件中保存的所有尺寸样式的尺寸信息；根据调整后的尺寸信息生成标准样式文件；由浏览器根据标准样式文件，刷新显示页面。应用本发明，可轻易地达到动态适配的目的，大大降低了界面适配的工作量，同时又能满足对不同设备分辨率进行精确界面适配的要求。
【专利说明】移动终端上Web应用程序的界面动态适配方法及系统
【技术领域】
[0001] 本发明涉及移动互联网【技术领域】，尤其涉及一种移动终端上Web应用程序的界面 动态适配方法及系统。
【背景技术】
[0002] 移动终端上Web应用程序指的是基于Web技术来开发应用程序的主体，直接运行 在浏览器或者运行于内嵌浏览器控件，以app方式存在的应用程序。
[0003] 目前市面上的移动终端多达上千款，设备分辨率多种多样，主流的设备分辨率有 240x320、320x480、480x800、540x640、640x960、720xl280、1080x1920 等，为了使同一种 Web 应用程序能够在具有不同的设备分辨率的移动终端上进行部署，开发者需要针对具有不同 的设备分辨率的移动终端分别开发不同版本的Web应用程序，即每种设备分辨率均对应一 种样式文件，在Web应用程序运行时，根据移动终端的设备分辨率加载相对应的样式资源。
[0004] 上述适配方式的优点是能够针对每种设备分辨率进行精确适配，缺陷在于适配工 作耗费开发人员的大量时间和精力，开发、维护工作量大，并且Web应用程序在未适配过的 设备分辨率的移动终端上显示错乱。
【发明内容】
[0005] 为了解决现有技术中的缺陷，本发明提供了一种移动终端上Web应用程序的界面 动态适配方法及系统，大大降低了界面适配的工作量，同时又能够满足对不同设备分辨率 进行精确界面适配的要求。
[0006] 为实现上述目的，本发明的技术方案为：
[0007] -种移动终端上Web应用程序的界面动态适配方法，包括：
[0008] 在Web应用程序的页面中嵌入扩展样式文件，所述扩展样式文件中保存有多个尺 寸样式以及与所述尺寸样式对应的尺寸信息，所述尺寸信息包括对应设定的基准分辨率的 基准尺寸信息；
[0009] 通过浏览器启动所述Web应用程序并加载所述Web应用程序的页面；
[0010] 提取所述页面中的扩展样式文件；
[0011] 获取移动终端的设备分辨率；
[0012] 利用所述基准分辨率和所述设备分辨率，调整所述扩展样式文件中保存的所有尺 寸样式的尺寸信息，并根据调整后的尺寸信息生成标准样式文件；
[0013] 由浏览器根据所述标准样式文件，刷新显示所述页面。
[0014] 优选的是，所述利用所述基准分辨率和所述设备分辨率，调整所述扩展样式文件 中保存的所有尺寸样式的尺寸信息包括：
[0015] 根据所述移动终端的设备分辨率和所述基准分辨率，确定缩放比例；
[0016] 利用所述缩放比例，依次调整所述扩展样式文件中保存的每个尺寸样式的基准尺 寸信息，并将调整后的基准尺寸信息作为所述尺寸样式的尺寸信息。
[0017] 优选的是，所述根据所述移动终端的设备分辨率和所述基准分辨率，确定缩放比 例包括：
[0018] 计算所述设备分辨率的宽度与所述基准分辨率的宽度的比值；
[0019] 将所述比值作为所述缩放比例。
[0020] 优选的是，所述扩展样式文件中保存的一个或多个尺寸样式的尺寸信息还包括对 应特定设备分辨率的特定尺寸信息；所述利用所述基准分辨率和所述设备分辨率，调整所 述扩展样式文件中保存的所有尺寸样式的尺寸信息还包括：
[0021] 在所述确定缩放比例之前，依次对所述扩展样式文件中保存的每个尺寸样式，检 查所述尺寸样式的尺寸信息是否包括特定设备分辨率，并且所述特定设备分辨率是否与所 述设备分辨率一致；
[0022] 如果是，则将对应所述特定设备分辨率的特定尺寸信息作为所述尺寸样式的尺寸 信息。
[0023] 优选的是，所述检查所述特定设备分辨率是否与所述设备分辨率一致包括：
[0024] 检查所述特定设备分辨率的宽度是否等于所述设备分辨率的宽度；
[0025] 如果是，则确定所述特定设备分辨率与所述设备分辨率一致；
[0026] 否则，确定所述特定设备分辨率与所述设备分辨率不一致。
[0027] 优选的是，所述扩展样式文件为CSS文件。
[0028] -种移动终端上Web应用程序的界面动态适配系统，包括：
[0029] 存储单元，用于存储Web应用程序的页面；
[0030] 扩展单元，用于在所述存储单元保存的所述页面中嵌入扩展样式文件，所述扩展 样式文件中保存有多个尺寸样式以及与所述尺寸样式对应的尺寸信息，所述尺寸信息包括 对应设定的基准分辨率的基准尺寸信息；
[0031] 浏览器，用于启动所述Web应用程序并加载所述Web应用程序的页面；
[0032] 扩展样式文件提取单元，用于提取所述存储单元保存的所述页面中的扩展样式文 件；
[0033] 设备分辨率获取单兀，用于获取移动终端的设备分辨率；
[0034] 调整单元，用于根据所述扩展样式文件提取单元提取的扩展样式文件中的基准分 辨率和所述设备分辨率获取单元获取的设备分辨率，调整所述扩展样式文件中保存的所有 尺寸样式的尺寸信息，并根据调整后的尺寸信息，生成标准样式文件；
[0035] 所述浏览器，还用于根据所述调整单元生成的标准样式文件，刷新显示所述页面。
[0036] 优选的是，所述调整单元包括：
[0037] 缩放比例确定子单元，用于根据所述移动终端的设备分辨率和所述基准分辨率， 确定缩放比例；
[0038] 调整子单元，用于利用所述缩放比例确定子单元确定的缩放比例，依次调整所述 扩展样式文件中保存的每个尺寸样式的基准尺寸信息，并将调整后的基准尺寸信息作为所 述尺寸样式的尺寸信息。
[0039] 优选的是，所述缩放比例确定子单元，具体用于计算所述设备分辨率的宽度与所 述基准分辨率的宽度的比值；将所述比值作为所述缩放比例。
[0040] 优选的是，所述扩展样式文件中保存的一个或多个尺寸样式的尺寸信息还包括对 应特定设备分辨率的特定尺寸信息；所述调整单元还包括：
[0041] 检查子单元，用于在所述缩放比例确定子单元确定缩放比例之前，依次对所述扩 展样式文件中保存的每个尺寸样式，检查所述尺寸样式的尺寸信息是否包括特定设备分辨 率，并检查所述特定设备分辨率是否与所述设备分辨率一致；
[0042] 特定尺寸确定子单元，用于在所述检查子单元检查到所述尺寸样式的尺寸信息包 括特定设备分辨率，并且所述特定设备分辨率与所述设备分辨率一致时，将对应所述特定 设备分辨率的特定尺寸信息作为所述尺寸样式的尺寸信息。
[0043] 优选的是，所述检查子单元通过检查所述特定设备分辨率的宽度是否等于所述设 备分辨率的宽度来确定所述特定设备分辨率与所述设备分辨率是否一致。
[0044] 优选的是，所述扩展样式文件为CSS文件。
[0045] 本发明的有益效果在于，应用本发明实施例移动终端上Web应用程序的界面动态 适配方法及系统，只需针对一套基准分辨率进行适配，在其它设备分辨率的移动终端上运 行时能够自动通过缩放比例或特定尺寸信息的调整方式调整样式文件，即可轻易地达到动 态适配的目的，大大降低了界面适配的工作量，同时又能够满足对不同设备分辨率进行精 确界面适配的要求。
【专利附图】
【附图说明】
[0046] 图1示出了本发明实施例移动终端上Web应用程序的界面动态适配方法的流程 图；
[0047] 图2示出了本发明实施例中利用所述基准分辨率和所述设备分辨率，调整所述扩 展样式文件中保存的所有尺寸样式的尺寸信息的一种流程图；
[0048] 图3示出了本发明实施例中利用所述基准分辨率和所述设备分辨率，调整所述扩 展样式文件中保存的所有尺寸样式的尺寸信息的另一种流程图；
[0049] 图4示出了本发明实施例移动终端上Web应用程序的界面动态适配系统的结构示 意图；
[0050] 图5示出了本发明实施例中调整单元的一种结构示意图；
[0051] 图6示出了本发明实施例中调整单元的另一种结构示意图。
【具体实施方式】
[0052] 下面详细描述本发明的实施例，所述实施例的示例在附图中示出，其中自始至终 相同或类似的标号表示相同或类似的元件或具有相同或类似功能的元件。下面通过参考附 图描述的实施例是示例性的，仅用于解释本发明，而不能解释为对本发明的限制。
[0053] 为了解决现有界面适配方法会耗费开发人员的大量时间和精力，开发、维护工作 量大，并且Web应用程序在未适配过的设备分辨率的移动终端上显示错乱的缺陷，本发明 实施例提出一种移动终端上Web应用程序的界面动态适配方法及系统，大大降低了界面适 配的工作量，同时又能够满足对不同设备分辨率进行精确界面适配的要求。
[0054] 如图1所示，是本发明实施例移动终端上Web应用程序的界面动态适配方法的流 程图，所述动态适配方法包括以下步骤：
[0055] 步骤101 :在Web应用程序的页面中嵌入扩展样式文件，所述扩展样式文件中保存 有多个尺寸样式以及与所述尺寸样式对应的尺寸信息，所述尺寸信息包括对应设定的基准 分辨率的基准尺寸信息。
[0056] 具体地，上述嵌入至Web应用程序的页面中的扩展样式文件中包括多个尺寸样 式、对应所述尺寸样式的尺寸信息以及可选的至少一个非尺寸样式，与尺寸样式相对应的 尺寸信息包括在基准分辨率情况下的基准尺寸信息，即：当目标移动终端的屏幕分辨率为 基准分辨率时，利用包括基准尺寸信息的扩展样式文件刷新显示所述页面的效果是最佳 的。特别地，扩展样式文件优选为CSS (Cascading Style Sheet,层叠样式表单）文件。
[0057] 在页面中嵌入扩展样式文件的方式可以采用与嵌入标准样式文件同样的方式，t匕 如：链入外部样式表（即在页面中用〈link〉标记链接到该扩展样式文件，〈link〉标记需要 放在页面的〈head〉区内）、内部样式表（即将扩展样式文件放到页面的〈head〉区里，扩展 样式文件是用〈style〉标记插入的）、导入外表样式表（即在内部样式表的〈style〉里导入 扩展样式文件）等。
[0058] 步骤102 :通过浏览器启动所述Web应用程序并加载所述Web应用程序的页面。
[0059] 具体地，所述浏览器为安装在移动终端上的浏览器，该浏览器用于启动Web应用 程序并加载Web应用程序的页面，这里，浏览器加载页面后是否显示所述页面，取决于Web 应用程序内的相应设置，优选地，为了用户的浏览舒适性，浏览器在加载Web应用程序的页 面后不进行显示。所述浏览器在加载页面后，根据由步骤103至步骤105生成的标准样式 文件刷新显示所述页面，即直接显示与移动终端的屏幕相匹配的页面。
[0060] 步骤103 :提取所述页面中的扩展样式文件。
[0061] 步骤104 :获取移动终端的设备分辨率。
[0062] 步骤105 :利用所述基准分辨率和所述设备分辨率，调整所述扩展样式文件中保 存的所有尺寸样式的尺寸信息，并根据调整后的尺寸信息生成标准样式文件。
[0063] 具体地，所述调整所述扩展样式文件中保存的所有尺寸样式的尺寸信息的方法将 在下文中结合图2进行详细地阐述。
[0064] 另外，所述根据调整后的尺寸信息生成标准样式文件的方法为：依次对扩展样式 文件中的每个尺寸样式，将所述尺寸样式的尺寸信息替换为相应的调整后的尺寸信息，通 过此方式对扩展样式文件进行调整，并将调整后的扩展样式文件称为标准样式文件。这里， 我们可以将标准样式文件中的样式内容，看成是在当前移动终端的屏幕上刷新显示所述 Web应用程序的最佳样式信息。
[0065] 步骤106 :由浏览器根据所述标准样式文件，刷新显示所述页面。
[0066] 如图2所示，是本发明实施例中利用所述基准分辨率和所述设备分辨率，调整所 述扩展样式文件中保存的所有尺寸样式的尺寸信息的一种流程图，所述调整所述扩展样式 文件中保存的所有尺寸样式的尺寸信息的方法包括以下步骤：
[0067] 步骤201 :根据所述移动终端的设备分辨率和所述基准分辨率，确定缩放比例。 [0068] 具体地，所述确定缩放比例的方法为：计算所述设备分辨率的宽度与所述基准 分辨率的宽度的比值；将所述比值作为所述缩放比例。例如，如果设定的基准分辨率为 320pxX480pX，基准分辨率的宽度为320px，设备分辨率（即当前移动终端屏幕的分辨 率）为480pxX800px，设备分辨率的宽度为480px，则可以得出缩放比例=^^ = !·5; 如果设备分辨率（即当前移动终端屏幕的分辨率）为640pxX960px，设备分辨率的宽度 为640px，则可以得出裝放比例=|^ = 2;如果设备分辨率的宽度720px，则可以得出 缩放比例=ig=2.25，其它设备分辨率以此类推。
[0069] 步骤202 :利用所述缩放比例，依次调整所述扩展样式文件中保存的每个尺寸样 式的基准尺寸信息，并将调整后的基准尺寸信息作为所述尺寸样式的尺寸信息。
[0070] 具体地，上述利用缩放比例，依次调整所述扩展样式文件中保存的每个尺寸样式 的基准尺寸信息可以解释为：利用缩放比例，依次对扩展样式文件中保存的每个尺寸样式 的基准尺寸信息进行比例缩放，即将每个尺寸样式的基准尺寸信息均乘以所述缩放比例。
[0071] 在本发明的一优选的实施例中，所述扩展样式文件的内容如下：
[0072] . main-item-icon {
[0073] vertical-align:middle ；
[0074] width:54dp ；
[0075] height :54dp ；
[0076] padding-top :4dp ；
[0077] padding-bottom:4dp ；
[0078] margin-left :6dp ；
[0079] margin-right:8dp ；}
[0080] 这里，dp是一种相对单位，其对应的换算公式为dp = scale Xpx，其中px表示 像素单位，scale表示所述缩放比例。在本实施例中，设定基准分辨率为320pxX480px， T20/7Y 设备分辨率的宽度720px，则可以得出缩放比例2.25 "从而，对于缩放比 例scale为2. 25的情况，上述扩展样式文件中保存的6种尺寸样式：宽度（width)、高度 (height)、上内边距（padding-top)、下内边距（padding-bottom)、左边距（margin-left) 和右边距（margin-right)，对应的尺寸信息依次被调整为：54X2. 25px = 121. 5px、 54Χ2·25ρχ = 121·5ρχ、4Χ2·25ρχ = 9ρχ、4Χ2·25ρχ = 9ρχ、6Χ2·25ρχ = 13·5ρχ 和 8X2. 25ρχ = 18ρχ，从而按照此种调整方式生成的标准样式文件保存的6种尺寸样式的尺 寸信息依次为：121. 5ρχ、121· 5ρχ、9ρχ、9ρχ、13· 5ρχ 和 18ρχ。
[0081] 在本发明的另一优选的实施例中，为了使某些特定的尺寸样式更好地适应特定的 设备分辨率，将特定尺寸样式的尺寸信息指定为特定尺寸信息。
[0082] 在本实施例中，在所述扩展样式文件中保存的一个或多个尺寸样式的尺寸信息还 包括对应特定设备分辨率的特定尺寸信息。例如，继续使用上述扩展样式文件的实例，加入 特定尺寸信息的扩展样式文件的内容如下：
[0083] · main-item-icon {
[0084] vertical-align:middle ；
[0085] width:54dp | 720:120px ；
[0086] height: 54dp | 720:120px ；
[0087] padding-top:4dp|720:lOpx ；
[0088] padding-bottom:4dpI 720:ΙΟρχ ;
[0089] margin-left:6dp|720:13px ；
[0090] margin-right:8dp ；}
[0091] 这里，扩展样式文件中的前5个尺寸信息：宽度（width)、高度（height)、上内边距 (padding-top)、下内边距（padding-bottom)和左边距（margin-left)的尺寸信息中除了 带有相对单位的尺寸信息之外，还包括对应特定设备分辨率的特定尺寸信息，即：对应宽度 (width)和高度（height)的特定尺寸信息均为720:120px，表示在特定设备分辨率（720px) 的条件下，宽度和高度的尺寸信息均具体特定为120px ;对应上内边距（padding-top)下内 边距（padding-bottom)的特定尺寸信息均为720:10px，表示在特定设备分辨率（720px) 的条件下，上内边距和下内边距的尺寸信息均具体特定为l〇px;类似地，对应左边距 (margin-left)的特定尺寸信息为720:13px，表示在特定设备分辨率（720px)的条件下，左 边距的尺寸信息具体特定为13px。
[0092] 如图3所示，是本发明实施例中利用所述基准分辨率和所述设备分辨率，调整所 述扩展样式文件中保存的所有尺寸样式的尺寸信息的另一种流程图，所述调整所述扩展样 式文件中保存的所有尺寸样式的尺寸信息的方法既包括步骤201和步骤202中所述的调整 方法，还包括以下步骤：
[0093] 步骤301 :在步骤201所述的确定缩放比例之前，依次对所述扩展样式文件中保存 的每个尺寸样式，检查所述尺寸样式的尺寸信息是否包括特定设备分辨率，并且所述特定 设备分辨率是否与所述设备分辨率一致。
[0094] 具体地，在确定缩放比例之前，需要检查扩展样式文件中是否存在特定尺寸样式 (即该尺寸样式的尺寸样式中包括特定设备分辨率），并且在确定存在特定尺寸样式的情 况下，需要进一步检查该特定尺寸样式对应的特定设备分辨率是否与当前移动终端的设备 分辨率相一致。
[0095] 所述检查所述特定设备分辨率是否与所述设备分辨率一致的方法为：检查所述特 定设备分辨率的宽度是否等于所述设备分辨率的宽度；如果是，则确定所述特定设备分辨 率与所述设备分辨率一致；否则，确定所述特定设备分辨率与所述设备分辨率不一致。 [0096] 步骤302 :如果所述尺寸样式的尺寸信息包括特定设备分辨率，并且所述特定设 备分辨率与所述设备分辨率一致，则将对应所述特定设备分辨率的特定尺寸信息作为所述 尺寸样式的尺寸信息。
[0097] 具体地，在上述扩展样式文件的实例中，特定尺寸样式分别为宽度、高度、上内边 距、下内边距和左边距，若当前移动终端的设备分辨率的宽度为720px，则可以得出宽度、高 度、上内边距、下内边距和左边距对应的尺寸信息依次为120?1、120?1、10?1、10?1和13?1。 [0098] 如果所述尺寸样式的尺寸信息未包括特定设备分辨率，或者所述特定设备分辨率 与所述设备分辨率不一致，则返回步骤201，顺序执行步骤201和步骤202。
[0099] 具体地，在上述扩展样式文件的实施例中，只有最后一个尺寸样式不是特定尺寸 样式，则该尺寸样式（右边距）的尺寸信息调整方式为步骤201和步骤202中所述的调整 方法，即右边距的尺寸信息被调整为。
[0100] 因此，在上述扩展样式文件的实施例中，根据调整后的尺寸信息生成标准样式文 件的内容如下：
[0101] . main_item_icon{
[0102] vertical-align:middle ；
[0103] width: 120px ；
[0104] height: 120px ；
[0105] padding-top:lOpx ；
[0106] padding-bottom:lOpx ；
[0107] margin-left:13px ；
[0108] margin-right: 18px ；}
[0109] 生成标准样式文件后，由浏览器根据所述标准样式文件，刷新显示所述页面。
[0110] 可见，应用本发明实施例移动终端上Web应用程序的界面动态适配方法，只需针 对一套基准分辨率进行适配，在其它设备分辨率的移动终端上运行时能够自动通过缩放比 例或特定尺寸信息的调整方式调整样式文件，即可轻易地达到动态适配的目的，大大降低 了界面适配的工作量，同时又能够满足对不同设备分辨率进行精确界面适配的要求。
[0111] 相应地，本发明实施例还提供一种移动终端上Web应用程序的界面动态适配系 统。
[0112] 如图4所示，是本发明实施例移动终端上Web应用程序的界面动态适配系统的结 构示意图，该系统包括：
[0113] 存储单元401，用于存储Web应用程序的页面；
[0114] 扩展单元402,用于在所述存储单元401保存的所述页面中嵌入扩展样式文件，所 述扩展样式文件中保存有多个尺寸样式以及与所述尺寸样式对应的尺寸信息，所述尺寸信 息包括对应设定的基准分辨率的基准尺寸信息；所述扩展样式文件优选为CSS文件；
[0115] 浏览器403,用于启动所述Web应用程序并加载所述Web应用程序的页面；
[0116] 扩展样式文件提取单元404,用于提取所述存储单元401保存的所述页面中的扩 展样式文件；
[0117] 设备分辨率获取单兀405,用于获取移动终端的设备分辨率；
[0118] 调整单元406,用于接收所述扩展样式文件提取单元404提取的扩展样式文件中 的基准分辨率和所述设备分辨率获取单元405获取的所述设备分辨率，调整所述扩展样式 文件中保存的所有尺寸样式的尺寸信息，并根据调整后的尺寸信息，生成标准样式文件；
[0119] 所述浏览器403,还用于根据所述调整单元406生成的标准样式文件，刷新显示所 述页面。
[0120] 如图5所示，是本发明实施例中调整单元406的一种结构示意图，所述调整单元 406包括：
[0121] 缩放比例确定子单元501，用于根据所述移动终端的设备分辨率和所述基准分辨 率，确定缩放比例。所述缩放比例确定子单元501具体用于：计算所述设备分辨率的宽度与 所述基准分辨率的宽度的比值；将所述比值作为所述缩放比例；
[0122] 调整子单元502,用于利用所述缩放比例确定子单元501确定的所述缩放比例，依 次调整所述扩展样式文件中保存的每个尺寸样式的基准尺寸信息，并将调整后的基准尺寸 信息作为所述尺寸样式的尺寸信息。
[0123] 如图6所示，是本发明实施例中调整单元406的另一种结构示意图，在本实施例 中，所述扩展样式文件中保存的一个或多个尺寸样式的尺寸信息还包括对应特定设备分辨 率的特定尺寸信息。相应地，所述调整单元406除了包括上述缩放比例确定子单元501和 调整子单元502之外，还包括：
[0124] 检查子单元601，用于在所述缩放比例确定子单元501确定缩放比例之前，依次对 所述扩展样式文件中保存的每个尺寸样式，检查所述尺寸样式的尺寸信息是否包括特定设 备分辨率，并检查所述特定设备分辨率是否与所述设备分辨率一致；
[0125] 特定尺寸确定子单元602,用于在所述检查子单元601检查到所述尺寸样式的尺 寸信息包括特定设备分辨率，并且所述特定设备分辨率与所述设备分辨率一致时，将对应 所述特定设备分辨率的特定尺寸信息作为所述尺寸样式的尺寸信息；在所述检查子单元 601检查到所述尺寸样式的尺寸信息未包括特定设备分辨率，或者所述特定设备分辨率与 所述设备分辨率不一致时，通知所述缩放比例确定子单元501根据所述移动终端的设备分 辨率和所述基准分辨率，确定缩放比例。
[0126] 在实际应用中，所述检查子单元601可以通过检查所述特定设备分辨率的宽度是 否等于所述设备分辨率的宽度来确定所述特定设备分辨率与所述设备分辨率是否一致。
[0127] 值得说明的是，上述各单元的具体处理过程可参照前面本发明实施例的方法中的 描述，在此不再赘述。
[0128] 综上，应用本发明实施例移动终端上Web应用程序的界面动态适配系统，只需针 对一套基准分辨率进行适配，在其它设备分辨率的移动终端上运行时能够自动通过缩放比 例或特定尺寸信息的调整方式调整样式文件，即可轻易地达到动态适配的目的，大大降低 了界面适配的工作量，同时又能够满足对不同设备分辨率进行精确界面适配的要求。
[0129] 以上所描述的系统实施例仅仅是示意性的，其中所述作为分离部件说明的单元可 以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单 元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其 中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性 劳动的情况下，即可以理解并实施。
[0130] 以上依据图式所示的实施例详细说明了本发明的构造、特征及作用效果，以上所 述仅为本发明的较佳实施例，但本发明不以图面所示限定实施范围，凡是依照本发明的构 想所作的改变，或修改为等同变化的等效实施例，仍未超出说明书与图示所涵盖的精神时， 均应在本发明的保护范围内。
【权利要求】
1. 一种移动终端上Web应用程序的界面动态适配方法，其特征在于，包括： 在Web应用程序的页面中嵌入扩展样式文件，所述扩展样式文件中保存有多个尺寸样 式以及与所述尺寸样式对应的尺寸信息，所述尺寸信息包括对应设定的基准分辨率的基准 尺寸信息； 通过浏览器启动所述Web应用程序并加载所述Web应用程序的页面； 提取所述页面中的扩展样式文件； 获取移动终端的设备分辨率； 利用所述基准分辨率和所述设备分辨率，调整所述扩展样式文件中保存的所有尺寸样 式的尺寸信息，并根据调整后的尺寸信息生成标准样式文件； 由浏览器根据所述标准样式文件，刷新显示所述页面。
2. 根据权利要求1所述的方法，其特征在于，所述利用所述基准分辨率和所述设备分 辨率，调整所述扩展样式文件中保存的所有尺寸样式的尺寸信息包括： 根据所述移动终端的设备分辨率和所述基准分辨率，确定缩放比例； 利用所述缩放比例，依次调整所述扩展样式文件中保存的每个尺寸样式的基准尺寸信 息，并将调整后的基准尺寸信息作为所述尺寸样式的尺寸信息。
3. 根据权利要求2所述的方法，其特征在于，所述根据所述移动终端的设备分辨率和 所述基准分辨率，确定缩放比例包括： 计算所述设备分辨率的宽度与所述基准分辨率的宽度的比值； 将所述比值作为所述缩放比例。
4. 根据权利要求2所述的方法，其特征在于，所述扩展样式文件中保存的一个或多个 尺寸样式的尺寸信息还包括对应特定设备分辨率的特定尺寸信息；所述利用所述基准分辨 率和所述设备分辨率，调整所述扩展样式文件中保存的所有尺寸样式的尺寸信息还包括： 在所述确定缩放比例之前，依次对所述扩展样式文件中保存的每个尺寸样式，检查所 述尺寸样式的尺寸信息是否包括特定设备分辨率，并且所述特定设备分辨率是否与所述设 备分辨率一致； 如果是，则将对应所述特定设备分辨率的特定尺寸信息作为所述尺寸样式的尺寸信 息。
5. 根据权利要求4所述的方法，其特征在于，所述检查所述特定设备分辨率是否与所 述设备分辨率一致包括： 检查所述特定设备分辨率的宽度是否等于所述设备分辨率的宽度； 如果是，则确定所述特定设备分辨率与所述设备分辨率一致； 否则，确定所述特定设备分辨率与所述设备分辨率不一致。
6. 根据权利要求1至5任一项所述的方法，其特征在于，所述扩展样式文件为CSS文 件。
7. -种移动终端上Web应用程序的界面动态适配系统，其特征在于，包括： 存储单元，用于存储Web应用程序的页面； 扩展单元，用于在所述存储单元保存的所述页面中嵌入扩展样式文件，所述扩展样式 文件中保存有多个尺寸样式以及与所述尺寸样式对应的尺寸信息，所述尺寸信息包括对应 设定的基准分辨率的基准尺寸信息； 浏览器，用于启动所述Web应用程序并加载所述Web应用程序的页面； 扩展样式文件提取单元，用于提取所述存储单元保存的所述页面中的扩展样式文件； 设备分辨率获取单元，用于获取移动终端的设备分辨率； 调整单元，用于根据所述扩展样式文件提取单元提取的扩展样式文件中的基准分辨率 和所述设备分辨率获取单元获取的设备分辨率，调整所述扩展样式文件中保存的所有尺寸 样式的尺寸信息，并根据调整后的尺寸信息，生成标准样式文件； 所述浏览器，还用于根据所述调整单元生成的标准样式文件，刷新显示所述页面。
8. 根据权利要求1所述的系统，其特征在于，所述调整单元包括： 缩放比例确定子单元，用于根据所述移动终端的设备分辨率和所述基准分辨率，确定 缩放比例； 调整子单元，用于利用所述缩放比例确定子单元确定的缩放比例，依次调整所述扩展 样式文件中保存的每个尺寸样式的基准尺寸信息，并将调整后的基准尺寸信息作为所述尺 寸样式的尺寸信息。
9. 根据权利要求8所述的系统，其特征在于，所述缩放比例确定子单元，具体用于计算 所述设备分辨率的宽度与所述基准分辨率的宽度的比值；将所述比值作为所述缩放比例。
10. 根据权利要求8所述的系统，其特征在于，所述扩展样式文件中保存的一个或多个 尺寸样式的尺寸信息还包括对应特定设备分辨率的特定尺寸信息；所述调整单元还包括： 检查子单元，用于在所述缩放比例确定子单元确定缩放比例之前，依次对所述扩展样 式文件中保存的每个尺寸样式，检查所述尺寸样式的尺寸信息是否包括特定设备分辨率， 并检查所述特定设备分辨率是否与所述设备分辨率一致； 特定尺寸确定子单元，用于在所述检查子单元检查到所述尺寸样式的尺寸信息包括特 定设备分辨率，并且所述特定设备分辨率与所述设备分辨率一致时，将对应所述特定设备 分辨率的特定尺寸信息作为所述尺寸样式的尺寸信息。
11. 根据权利要求10所述的系统，其特征在于， 所述检查子单元通过检查所述特定设备分辨率的宽度是否等于所述设备分辨率的宽 度来确定所述特定设备分辨率与所述设备分辨率是否一致。
12. 根据权利要求7至11任一项所述的系统，其特征在于，所述扩展样式文件为CSS文 件。
【文档编号】G06F3/0484GK104063148SQ201410259192
【公开日】2014年9月24日 申请日期:2014年6月11日 优先权日:2014年6月11日
【发明者】黄明登 申请人:科大讯飞股份有限公司