著录项信息
专利名称 | 页面布局自适应方法及装置 |
申请号 | CN201010261903.7 | 申请日期 | 2010-08-24 |
法律状态 | 授权 | 申报国家 | 中国 |
公开/公告日 | 2010-12-08 | 公开/公告号 | CN101908076A |
优先权 | 暂无 | 优先权号 | 暂无 |
主分类号 | G06F17/30 | IPC分类号 | G;0;6;F;1;7;/;3;0查看分类表>
|
申请人 | 北京世纪高通科技有限公司 | 申请人地址 | 北京市海淀区学院路7号10层1002C室
变更
专利地址、主体等相关变化,请及时变更,防止失效 |
权利人 | 北京世纪高通科技有限公司 | 当前权利人 | 北京世纪高通科技有限公司 |
发明人 | 蒋晟;薛明;郑小华 |
代理机构 | 北京中博世达专利商标代理有限公司 | 代理人 | 申健 |
摘要
本发明实施例公开了一种页面布局自适应方法及装置,涉及网页设计领域,能够在不同分别率的屏幕中、不同类型的浏览器中以及不同大小的浏览器窗口中,显示相同的页面内容,方便用户查看页面内容,提高了用户体验。本发明方法包括:获取屏幕显示参数,所述屏幕显示参数为以下参数中的至少一个参数,该参数包括:屏幕分辨率、浏览器的窗口大小以及用户当前使用浏览器的类型;根据所述屏幕显示参数获取当前页面的页面文档的高度和宽度;根据所述页面文档的高度和宽度以及所述页面文档中固定区域的高度和宽度,设置所述页面文档中可变区域的高度和宽度;调整所述页面文档中固定区域的位置。本发明实施例主要用于页面的自适应过程中。
1.一种页面布局自适应方法,其特征在于,包括:
获取屏幕显示参数,所述屏幕显示参数为以下参数中的至少一个参数,该参数包括:屏幕分辨率、浏览器的窗口大小以及用户当前使用浏览器的类型;
根据所述屏幕显示参数获取当前页面的页面文档的高度和宽度;
根据所述页面文档的高度和宽度以及所述页面文档中固定区域的高度和宽度,设置所述页面文档中可变区域的高度和宽度;
调整所述页面文档中固定区域的位置。
2.根据权利要求1所述的方法,其特征在于,当所述屏幕显示参数中包含屏幕分辨率时,所述根据所述屏幕显示参数获取当前页面的页面文档的高度和宽度,包括:
根据所述屏幕显示参数计算当前浏览器窗口的高度和宽度;
获取所述当前浏览器窗口中地址栏、菜单栏和状态栏的高度之和、宽度之和;
将所述当前浏览器窗口的高度和宽度分别减去所述高度之和、所述宽度之和,得到所述页面文档的高度和宽度。
3.根据权利要求1所述的方法,其特征在于,当所述屏幕显示参数中包含浏览器的窗口大小时,所述根据所述屏幕显示参数获取当前页面的页面文档的高度和宽度,包括:
获取当前浏览器窗口中地址栏、菜单栏和状态栏的高度之和、宽度之和;
将所述当前浏览器窗口的高度和宽度分别减去所述高度之和、所述宽度之和,得到所述页面文档的高度和宽度。
4.根据权利要求1所述的方法,其特征在于,当所述屏幕显示参数中包括所述用户当前使用浏览器的类型时,所述根据所述屏幕显示参数获取当前页面的页面文档的高度和宽度,包括:
根据所述浏览器的类型确定与所述浏览器的类型对应的页面布局中所包含元素的样式参数;
根据所述元素的样式参数获取当前页面的页面文档的高度和宽度。
5.根据权利要求1所述的方法,其特征在于,所述根据所述页面文档的高度和宽度以及所述页面文档中固定区域的高度和宽度,设置所述页面文档中可变区域的高度和宽度,包括:
获取所述页面文档中固定区域的高度和宽度;
将所述页面文档的高度和宽度分别减去所述页面文档中固定区域的高度和宽度,得到所述页面文档中可变区域的高度和宽度;
按照所述得到所述页面文档中可变区域的高度和宽度,设置所述页面文档中可变区域的高度和宽度。
6.一种页面布局自适应装置,其特征在于,包括:
第一获取单元,用于获取屏幕显示参数,所述屏幕显示参数为以下参数中的至少一个参数,该参数包括:屏幕分辨率、浏览器的窗口大小以及用户当前使用浏览器的类型;
第二获取单元,用于根据所述第一获取单元获取的所述屏幕显示参数,获取当前页面的页面文档的高度和宽度;
设置单元,用于根据所述第二获取单元获取的所述页面文档的高度和宽度以及所述页面文档中固定区域的高度和宽度,设置所述页面文档中可变区域的高度和宽度;
调整单元,用于调整所述页面文档中固定区域的位置。
7.根据权利要求6所述的装置,其特征在于,当所述第一获取单元获取的屏幕显示参数中包含屏幕分辨率时,所述第二获取单元包括:
第一计算模块,用于根据所述屏幕显示参数计算当前浏览器窗口的高度和宽度;
第一获取模块,用于获取所述第一计算模块得到的所述当前浏览器窗口中地址栏、菜单栏和状态栏的高度之和、宽度之和;
第二计算模块,用于将所述第一计算模块得到的所述当前浏览器窗口的高度和宽度,分别减去所述第一获取模块获取的所述高度之和、所述宽度之和,得到所述页面文档的高度和宽度。
8.根据权利要求6所述的装置,其特征在于,当所述第一获取单元获取的屏幕显示参数中包含浏览器的窗口大小时,所述第二获取单元包括:
第二获取模块,用于获取当前浏览器窗口中地址栏、菜单栏和状态栏的高度之和、宽度之和;
第三计算模块,用于将所述当前浏览器窗口的高度和宽度分别减去所述第二获取模块获取的所述高度之和、所述宽度之和,得到所述页面文档的高度和宽度。
9.根据权利要求6所述的装置,其特征在于,当所述第一获取单元获取的所述屏幕显示参数中包括所述用户当前使用浏览器的类型时,所述第二获取单元包括:
确定模块,用于根据所述浏览器的类型确定与所述浏览器的类型对应的页面布局中所包含元素的样式参数;
第三获取模块,用于根据所述确定模块确定的所述元素的样式参数获取当前页面的页面文档的高度和宽度。
10.根据权利要求6所述的装置,其特征在于,所述设置单元包括:
第二获取模块,用于获取所述页面文档中固定区域的高度和宽度;
第三计算模块,用于将所述第二获取单元获取的所述页面文档的高度和宽度,分别减去所述页面文档中固定区域的高度和宽度,得到所述页面文档中可变区域的高度和宽度;
设置模块,用于按照所述第三计算模块计算得到所述页面文档中可变区域的高度和宽度,设置所述页面文档中可变区域的高度和宽度。
页面布局自适应方法及装置\n技术领域\n[0001] 本发明涉及网页设计领域,尤其涉及一种页面布局自适应方法及装置。\n背景技术\n[0002] 电子地图网站的主要功能,在于将用户关心的信息结合地图的方式展现出来,以更直观的方式为用户提供诸如购物、交通出行等生活信息服务。但是,在显示地图页面时,经常会遇到同一个地图页面,在不同分辨率的显示器中、不同大小浏览器窗口中以及不同类型浏览器中,显示的地图页面效果不同的情况,因此,如何实现地图页面的自适应,即如何将同一个地图页面在不同分辨率的显示器中、不同大小的浏览器窗口中以及不同类型的浏览器中,显示相同的地图页面效果,成为衡量该地图网站质量好坏的重要指标。\n[0003] 目前较通用的实现页面布局自适应的方法,主要是通过调整页面元素的百分比相对高度和宽度实现,该种方案包括:当元素的父元素高度和宽度属性发生变化时,其相应属性的绝对值也跟着变化,同时,保留页面级别的滚动条,以保证浏览器的窗口大小发生变化时页面元素不至于发生变形而导致布局混乱。\n[0004] 但是,在发明人实施上述方案时,由于页面中存在页面级的滚动条,地图大小不能自动伸缩,当窗口变小时,不能与之前窗口显示相同的内容,用户必须要手动滑动滚动条才能看到地图页面的全部内容,使得用户查看信息很不方便,用户体验效果很差。\n发明内容\n[0005] 本发明的实施例提供一种页面布局自适应方法及装置,能够在不同分别率的屏幕中、不同类型浏览器以及不同大小浏览器窗口中,显示相同的页面内容,方便用户查看页面内容,提高了用户体验。\n[0006] 为达到上述目的,本发明的实施例采用如下技术方案:\n[0007] 一种页面布局自适应方法,包括:\n[0008] 获取屏幕显示参数,所述屏幕显示参数为以下参数中的至少一个参数,该参数包括:屏幕分辨率、浏览器的窗口大小以及用户当前使用浏览器的类型;\n[0009] 根据所述屏幕显示参数获取当前页面的页面文档的高度和宽度;\n[0010] 根据所述页面文档的高度和宽度以及所述页面文档中固定区域的高度和宽度,设置所述页面文档中可变区域的高度和宽度;\n[0011] 调整所述页面文档中固定区域的位置。\n[0012] 一种页面布局自适应装置,包括:\n[0013] 第一获取单元,用于获取屏幕显示参数,所述屏幕显示参数为以下参数中的至少一个参数,该参数包括:屏幕分辨率、浏览器的窗口大小以及用户当前使用浏览器的类型;\n[0014] 第二获取单元,用于根据所述第一获取单元获取的所述屏幕显示参数,获取当前页面的页面文档的高度和宽度;\n[0015] 设置单元,用于根据所述第二获取单元获取的所述页面文档的高度和宽度以及所述页面文档中固定区域的高度和宽度,设置所述页面文档中可变区域的高度和宽度;\n[0016] 调整单元,用于调整所述页面文档中固定区域的位置。\n[0017] 本发明实施例提供的技术方案,在显示当前页面时,先获取屏幕分辨率、浏览器的窗口大小以及用户当前使用浏览器的类型中的至少一个屏幕显示参数,并根据该屏幕显示参数,获取当前页面的页面文档的高度和宽度,进而根据该页面文档的高度和宽度设置该页面文档中可变区域的高度和宽度,并调整页面文档中固定区域的位置,从而实现了在不同分别率的屏幕中、不同类型浏览器以及不同大小浏览器窗口中,显示相同的页面内容,方便用户查看页面内容,提高了用户体验。\n附图说明\n[0018] 为了更清楚地说明本发明实施例或现有技术中的技术方案,下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本发明的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其他的附图。\n[0019] 图1为本发明实施例1中页面布局自适应方法的流程图;\n[0020] 图2为本发明实施例2中页面的页面文档布局结构示意图;\n[0021] 图3为本发明实施例2中页面布局自适应方法的流程图;\n[0022] 图4为本发明实施例3中页面布局自适应方法的流程图;\n[0023] 图5为本发明实施例4中页面布局自适应方法的流程图;\n[0024] 图6为本发明实施例5中一种页面布局自适应装置的组成框图;\n[0025] 图7为本发明实施例5中另一种页面布局自适应装置的组成框图;\n[0026] 图8为本发明实施例5中另一种页面布局自适应装置的组成框图;\n[0027] 图9为本发明实施例5中另一种页面布局自适应装置的组成框图;\n[0028] 图10为本发明实施例5中另一种页面布局自适应装置的组成框图。\n具体实施方式\n[0029] 下面将结合本发明实施例中的附图,对本发明实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例仅仅是本发明一部分实施例,而不是全部的实施例。基于本发明中的实施例,本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例,都属于本发明保护的范围。\n[0030] 实施例1\n[0031] 本发明实施例提供一种页面布局自适应方法,如图1所示,该方法包括:\n[0032] 101、获取屏幕显示参数,所述屏幕显示参数为以下参数中的至少一个参数,该参数包括:屏幕分辨率、浏览器的窗口大小以及用户当前使用浏览器的类型。\n[0033] 其中,当获取的是屏幕分辨率时,可以在当加载当前页面时获取;当获取的是浏览器的窗口大小时,可以在加载页面时获取浏览器的窗口大小,也可以在浏览器的窗口大小发生变化时获取所述浏览器的窗口大小;当获取的是用户当前使用浏览器的类型时,可以在打开浏览器时获取所述用户当前使用浏览器的类型。\n[0034] 102、根据所述屏幕显示参数获取当前页面的页面文档的高度和宽度。\n[0035] 其中,所述根据所述屏幕显示参数获取当前页面的页面文档的高度和宽度,可以包括:\n[0036] 当所述屏幕显示参数为屏幕分辨率、浏览器的窗口大小中的至少一个参数时,根据所述屏幕显示参数获取当前页面的页面文档的高度和宽度,包括:根据所述屏幕显示参数计算所述当前浏览器窗口的高度和宽度;获取所述当前浏览器窗口中地址栏、菜单栏和状态栏的高度之和、宽度之和;将所述当前页面的高度和宽度分别减去所述高度之和、所述宽度之和,得到所述页面文档的高度和宽度。\n[0037] 当所述屏幕显示参数中包括所述用户当前使用浏览器的类型时,所述根据所述屏幕显示参数获取当前页面的页面文档的高度和宽度,包括:根据所述浏览器的类型确定与所述浏览器的类型对应的页面布局中所包含元素的样式参数;根据所述元素的样式参数获取当前页面的页面文档的高度和宽度。\n[0038] 103、根据所述页面文档的高度和宽度以及所述页面文档中固定区域的高度和宽度,设置所述页面文档中可变区域的高度和宽度。\n[0039] 其中,所述根据所述页面文档的高度和宽度以及所述页面文档中固定区域的高度和宽度,设置所述页面文档中可变区域的高度和宽度,可以包括:\n[0040] 获取所述页面文档中固定区域的高度和宽度;将所述页面文档的高度和宽度分别减去所述页面文档中固定区域的高度和宽度,得到所述页面文档中可变区域的高度和宽度;按照所述得到所述页面文档中可变区域的高度和宽度,设置所述页面文档中可变区域的高度和宽度。\n[0041] 104、调整所述页面文档中固定区域的位置。\n[0042] 其中,所述调整所述页面文档中固定区域的位置,包括确定所述固定区域的水平位置和垂直位置,并根据所述确定的水平位置和垂直位置调整所述页面文档中固定区域的位置;\n[0043] 其中,确定页面文档中与所述可变区域相邻的右侧固定区域的水平位置时,可以通过确定该固定区域的左侧水平位置确定,而确定该固定区域的左侧水平位置,可以通过以下公式确定,该公式为:左侧水平位置=与所述可变区域相邻的左侧固定区域的宽度+可变区域的宽度;该左侧水平位置的单位为屏幕像素(px)。\n[0044] 确定页面文档中与所述可变区域相邻的下方固定区域的垂直位置时,可以通过确定该固定区域的上端的垂直位置确定,而确定该固定区域的上端的垂直位置,可以通过以下公式确定,该公式为:左侧水平位置=与所述可变区域相邻的左侧固定区域的宽度+可变区域的宽度;该左侧水平位置的单位为屏幕像素(px)。\n[0045] 本发明实施例中,在显示当前页面时,先获取屏幕分辨率、浏览器的窗口大小以及用户当前使用浏览器的类型中的至少一个屏幕显示参数,并根据该屏幕显示参数,获取当前页面的页面文档的高度和宽度,进而根据该页面文档的高度和宽度设置该页面文档中可变区域的高度和宽度,并调整页面文档中固定区域的位置,从而实现了在不同分辨率的屏幕中、不同类型浏览器以及不同大小的浏览窗口中,显示相同的页面内容,方便用户查看页面内容,提高了用户体验。\n[0046] 实施例2\n[0047] 本发明实施例提供一种页面布局自适应方法,该方法具体以根据屏幕分辨率实现页面布局自适应,结合图2和图3具体阐述该方法。图2为本发明提供的自适应应用页面布局的页面文档结构示意图,该示意图中包括三部分,页面文档的上部包含公司Logo区域、模块导航区域以及自动扩展区域;页面文档的中部包含地图显示区域和文本显示区域两个部分;页面文档的底部则包含用于显示公司版权信息的公司版权区域;上述三个部分中根据区域是否可变,又可分为页面文档的固定区域和可变区域,该页面文档的固定区域包括:\n公司Logo区域、模块导航区、文本显示区域以及公司版权区域;该页面文档的可变区域包括:自动扩展区域和地图显示区域。该方法如图3所示,包括:\n[0048] 201、系统获取屏幕分辨率。\n[0049] 其中,当加载当前页面时,系统获取本机的屏幕分辨率。\n[0050] 202、所述系统根据所述屏幕分辨率获取当前页面的页面文档的高度和宽度,保证页面文档中的所有元素的高度和宽度均不超过所述页面文档的高度和宽度。\n[0051] 其中,所述系统在获取了本机的屏幕分辨率后,根据所述屏幕分辨率获取当前页面的页面文档的高度和宽度;所述根据所述屏幕分辨率获取当前页面的页面文档的高度和宽度,可以采用以下方法,该方法包括:\n[0052] 根据所述屏幕分别率计算所述当前浏览器窗口的高度和宽度;获取所述当前浏览器窗口中地址栏、菜单栏和状态栏的高度之和、宽度之和;将所述当前浏览器窗口的高度和宽度分别减去所述高度之和、所述宽度之和,得到所述页面文档的高度和宽度。\n[0053] 203、根据所述页面文档的高度和宽度以及所述页面文档中固定区域的高度和宽度,设置所述页面文档中可变区域的高度和宽度。\n[0054] 其中,所述根据所述页面文档的高度和宽度以及所述页面文档中固定区域的高度和宽度,设置所述页面文档中可变区域的高度和宽度,可以采用以下方法,该方法包括:\n[0055] 获取所述页面文档中固定区域的高度和宽度;将所述页面文档的高度和宽度分别减去所述页面文档中固定区域的高度和宽度,得到所述页面文档中可变区域的高度和宽度;按照所述得到所述页面文档中可变区域的高度和宽度,设置所述页面文档中可变区域的高度和宽度。\n[0056] 本发明实施例中,如图2所示的页面布局,其由三部分组成,所述设置所述页面文档中可变区域的高度和宽度可以为:\n[0057] 首先,系统获取所述页面文档的上部的固定区域的宽度,即获取Logo区域和模块导航区域的宽度之和,将所述页面文档的宽度减去所述页面文档中Logo区域和模块导航区域的宽度之和,得到自动扩展区域的宽度,并按照所述得到所述自动扩展区域的宽度设置所述自动扩展区域的宽度,并按照Logo区域的高度设置所述自动扩展区域的高度。\n[0058] 其次,系统获取所述页面文档的固定区域的高度,即获取Logo区域和公司版权区域的高度之和,将所述页面文档的高度减去所述页面文档中Logo区域和公司版权区域的高度之和,得到地图显示区域的高度;获取所述页面文档的中部的固定区域的宽度,即获取文本显示区域的宽度,将所述页面文档的宽度减去所述页面文档中文本显示区域的宽度,得到地图显示区域的宽度,按照所述获取的地图显示区域的高度和宽度,设置所述地图显示区域的高度和宽度。完成该设置后,所述页面文档的中部区域自动撑开。\n[0059] 204、调整所述页面文档中固定区域的位置,使所述页面文档的各区域撑开。\n[0060] 其中,本发明实施例中,所述调整所述页面文档中固定区域的位置,如图2所示,调整所述模块导航区域和文本显示区域两个部分的位置。根据实施例1中的步骤104中所述,确定所述模块导航区域的位置包括:确定该模块导航区域的左侧水平位置,确定该模块导航区域的左侧水平位置为:Logo区域的宽度+自动扩展区域的宽度;确定该模块导航区域的垂直位置为:Logo区域和自动扩展区域的垂直位置。\n[0061] 确定文本显示区域的位置包括:确定该文本显示区域的左侧水平位置,确定该文本显示区域的左侧水平位置为:地图显示区域的宽度;确定该文本显示区域的垂直位置为:该块模导航区域的高度。\n[0062] 本发明实施例中,在加载当前页面时,系统获取本机的屏幕分辨率,并根据该屏幕分辨率获取当前页面的页面文档的高度和宽度,进而根据该页面文档的高度和宽度设置该页面文档中可变区域的高度和宽度,并调整页面文档中固定区域的位置,从而实现了在不同分辨率的屏幕中,显示相同的页面内容,方便用户查看页面内容,提高了用户体验。\n[0063] 实施例3\n[0064] 本发明实施例提供一种页面布局自适应方法,该方法以根据器浏览器的窗口大小实现页面布局自适应为例,结合图2和图4具体阐述该方法,该方法如图4所示,包括:\n[0065] 301、系统获取浏览器的窗口大小。\n[0066] 其中,所述获取浏览器的窗口大小可以在加载页面时获取浏览器的窗口大小,也可以在浏览器的窗口大小发生变化时,获取所述浏览器的窗口大小。\n[0067] 302、所述系统根据所述浏览器的窗口大小获取当前页面的页面文档的高度和宽度,保证页面文档中的所有元素的高度和宽度均不超过所述页面文档的高度和宽度。\n[0068] 其中,所述系统在获取了浏览器的窗口大小后,根据所述浏览器的窗口大小,获取当前页面的页面文档的高度和宽度;所述根据浏览器的窗口大小,获取当前页面的页面文档的高度和宽度,可以采用以下方法,该方法包括:\n[0069] 获取所述当前浏览器窗口中地址栏、菜单栏和状态栏的高度之和、宽度之和;将所述当前浏览器窗口的高度和宽度分别减去所述高度之和、所述宽度之和,得到所述页面文档的高度和宽度。\n[0070] 303、根据所述页面文档的高度和宽度以及所述页面文档中固定区域的高度和宽度,设置所述页面文档中可变区域的高度和宽度。\n[0071] 其中,所述根据所述页面文档的高度和宽度以及所述页面文档中固定区域的高度和宽度,设置所述页面文档中可变区域的高度和宽度的方法,可以参考实施例2中的步骤\n203中的相应描述,本发明实施例此处将不再赘述。\n[0072] 304、调整所述页面文档中固定区域的位置,使所述页面文档的各区域撑开。\n[0073] 其中,调整所述页面文档中固定区域的位置的具体描述,可以参考实施例2中的步骤204中的相应描述,本发明实施例此处将不再赘述。\n[0074] 本发明实施例中,在显示当前页面的窗口变化时,系统获取当前窗口的大小,并根据该窗口的大小获取当前页面的页面文档的高度和宽度,进而根据该页面文档的高度和宽度设置该页面文档中可变区域的高度和宽度,并调整页面文档中固定区域的位置,从而实现了在不同大小的浏览窗口中,显示相同的页面内容,方便用户查看页面内容,提高了用户体验。\n[0075] 实施例4\n[0076] 本发明实施例提供一种页面布局自适应方法,本发明实施例以根据浏览器的类型实现页面布局自适应为例,具体阐述该方法,如图5所示,该方法包括:\n[0077] 401、系统获取用户当前使用浏览器的类型;\n[0078] 其中,目前使用的主流浏览器的类型包括:IE(IE6,IE7,IE8),FireFox 3.0及以上,Safari、以及Opera等,上述不同类型的浏览器使用W3C和微软IE标准。\n[0079] 402、根据所述用户当前使用浏览器的类型获取当前页面的页面文档的高度和宽度。\n[0080] 其中,根据所述用户当前使用浏览器的类型获取当前页面的页面文档的高度和宽度,可以采用以下方法,包括:\n[0081] 根据所述浏览器的类型确定与所述浏览器的类型对应的页面布局中所包含元素的样式参数;根据所述元素的样式参数获取当前页面的页面文档的高度和宽度,具体根据预设的浏览器类型与页面布局中所包含元素的样式参数的对应关系,确定与所述浏览器的类型对应的页面布局中所包含元素的样式参数。其中,所述页面布局中所包含元素的样式参数可以包含元素的高度、宽度、位置以及文字颜色、背景颜色等参数,但本发明实施例对此不进行限制,还可以是其他参数。\n[0082] 403、根据所述页面文档的高度和宽度以及所述页面文档中固定区域的高度和宽度,设置所述页面文档中可变区域的高度和宽度。\n[0083] 其中,所述根据所述页面文档的高度和宽度以及所述页面文档中固定区域的高度和宽度,设置所述页面文档中可变区域的高度和宽度的方法,可以参考实施例2中的步骤\n203中的相应描述,本发明实施例此处将不再赘述。\n[0084] 404、调整所述页面文档中固定区域的位置,使所述页面文档的各区域撑开。\n[0085] 其中,调整所述页面文档中固定区域的位置的具体描述,可以参考实施例2中的步骤204中的相应描述,本发明实施例此处将不再赘述。\n[0086] 本发明实施例中,当用户使用不同类型的浏览器时,系统根据预设的浏览器类型与页面布局中所包含元素的样式参数的对应关系,确定与所述浏览器的类型对应的页面布局中所包含元素的样式参数,并确定当前页面文档的高度和宽度,进而根据该页面文档的高度和宽度设置该页面文档中可变区域的高度和宽度,并调整页面文档中固定区域的位置,从而保证在不同类型的浏览器中,显示相同的页面内容,方便用户查看页面内容,提高了用户体验。\n[0087] 需要说明的是,用户在具体实施页面的自适应方案时,可以根据屏幕分辨率、浏览器的窗口大小或用户当前使用浏览器的类型中的一个参数,参考实施例2、实施例3以及实施例4,实现页面布局的自适应;当然,用户还可以根据屏幕分辨率、浏览器的窗口大小或用户当前使用浏览器的类型中的至少两个参数,实现页面布局的自适应,本发明实施例对此不进行限制。\n[0088] 实施例5\n[0089] 本发明实施例提供一种页面布局自适应装置,如图6所示,该装置包括:第一获取单元51、第二获取单元52、设置单元53和调整单元54。\n[0090] 第一获取单元51,用于屏幕显示参数,所述屏幕显示参数为以下参数中的至少一个参数,该参数包括:屏幕分辨率、浏览器的窗口大小以及用户当前使用浏览器的类型。其中,当第一获取单元51获取的是屏幕分辨率时,可以在当加载当前页面时获取;当第一获取单元51获取的是浏览器的窗口大小时,可以在加载页面时获取浏览器的窗口大小,也可以在浏览器的窗口大小发生变化时,获取所述浏览器的窗口大小;当获取的是用户当前使用浏览器的类型时,可以在打开浏览器时获取所述用户当前使用浏览器的类型。\n[0091] 第二获取单元52,用于根据所述第一获取单元51获取的所述屏幕显示参数,获取当前页面的页面文档的高度和宽度。\n[0092] 设置单元53,用于根据所述第二获取单元52获取的所述页面文档的高度和宽度以及所述页面文档中固定区域的高度和宽度,设置所述页面文档中可变区域的高度和宽度;\n[0093] 调整单元54,用于调整所述页面文档中固定区域的位置。\n[0094] 进一步的,如图7所示,当所述第一获取单元51获取的屏幕显示参数中包含屏幕分辨率时,所述第二获取单元52包括:第一计算模块521、第一获取模块522和第二计算模块523。\n[0095] 在所述第二获取单元52获取当前页面的页面文档的高度和宽度时,第一计算模块521,用于根据所述屏幕显示参数计算所述当前浏览器窗口的高度和宽度;第一获取模块522,用于获取所述第一计算模块得到的所述当前浏览器窗口中地址栏、菜单栏和状态栏的高度之和、宽度之和;第二计算模块523,用于将所述第一计算模块521得到的所述当前浏览器窗口的高度和宽度,分别减去所述第一获取模块522获取的所述高度之和、所述宽度之和,得到所述页面文档的高度和宽度。\n[0096] 进一步的,如图8所示,当所述第一获取单元51获取的屏幕显示参数中包含浏览器的窗口大小时,所述第二获取单元52包括:第二获取模块524和第三计算模块525。\n[0097] 在所述第二获取单元52获取当前页面的页面文档的高度和宽度时,第二获取模块524,用于获取所述当前浏览器窗口中地址栏、菜单栏和状态栏的高度之和、宽度之和;\n第三计算模块525,用于将所述当前浏览器窗口的高度和宽度分别减去所述第二获取模块\n524获取的所述高度之和、所述宽度之和,得到所述页面文档的高度和宽度。\n[0098] 进一步的,如图9所示,当所述第一获取单元51获取的所述屏幕显示参数中包括所述用户当前使用浏览器的类型时,所述第二获取单元52包括:确定模块526和第三获取模块527。\n[0099] 在所述第二获取单元52获取当前页面的页面文档的高度和宽度时,确定模块\n526,用于根据所述浏览器的类型确定与所述浏览器的类型对应的页面布局中所包含元素的样式参数;第三获取模块527,用于根据所述确定模块526确定的所述元素的样式参数获取当前页面的页面文档的高度和宽度。\n[0100] 进一步的,如图10所示,所述设置单元53包括:第二获取模块531、第三计算模块\n532和设置模块533。\n[0101] 在所述设置单元53设置所述页面文档中可变区域的高度和宽度时,第二获取模块531,用于获取所述页面文档中固定区域的高度和宽度;第三计算模块532,用于将所述第二计算模块531计算得到的所述页面文档的高度和宽度,分别减去所述页面文档中固定区域的高度和宽度,得到所述页面文档中可变区域的高度和宽度;设置模块533,用于按照所述第三计算模块532计算得到所述页面文档中可变区域的高度和宽度,设置所述页面文档中可变区域的高度和宽度。\n[0102] 本发明实施例中,在显示当前页面时,先获取屏幕分辨率、浏览器的窗口大小以及用户当前使用浏览器的类型中的至少一个屏幕显示参数,并根据该屏幕显示参数,获取当前页面的页面文档的高度和宽度,进而根据该页面文档的高度和宽度设置该页面文档中可变区域的高度和宽度,并调整页面文档中固定区域的位置,从而实现了在不同分辨率的屏幕中、不同类型浏览器以及不同大小的浏览窗口中,显示相同的页面内容,方便用户查看页面内容,提高了用户体验。\n[0103] 通过以上的实施方式的描述,所属领域的技术人员可以清楚地了解到本发明可借助软件加必需的通用硬件的方式来实现,当然也可以通过硬件,但很多情况下前者是更佳的实施方式。基于这样的理解,本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来,该计算机软件产品存储在可读取的存储介质中,如计算机的软盘,硬盘或光盘等,包括若干指令用以使得一台计算机设备(可以是个人计算机,服务器,或者网络设备等)执行本发明各个实施例所述的方法。\n[0104] 以上所述,仅为本发明的具体实施方式,但本发明的保护范围并不局限于此,任何熟悉本技术领域的技术人员在本发明揭露的技术范围内,可轻易想到变化或替换,都应涵盖在本发明的保护范围之内。因此,本发明的保护范围应以所述权利要求的保护范围为准。
法律信息
- 2012-09-12
- 2011-01-19
实质审查的生效
IPC(主分类): G06F 17/30
专利申请号: 201010261903.7
申请日: 2010.08.24
- 2010-12-08
引用专利(该专利引用了哪些专利)
序号 | 公开(公告)号 | 公开(公告)日 | 申请日 | 专利名称 | 申请人 |
1
| |
2005-08-03
|
2005-01-28
| | |
2
| |
2008-08-13
|
2008-02-21
| | |
3
| |
2008-03-19
|
2007-11-01
| | |
被引用专利(该专利被哪些专利引用)
序号 | 公开(公告)号 | 公开(公告)日 | 申请日 | 专利名称 | 申请人 | 1 | | 2015-10-19 | 2015-10-19 | | |