CN101908076B - 页面布局自适应方法及装置 - Google Patents

页面布局自适应方法及装置 Download PDF

Info

Publication number
CN101908076B
CN101908076B CN2010102619037A CN201010261903A CN101908076B CN 101908076 B CN101908076 B CN 101908076B CN 2010102619037 A CN2010102619037 A CN 2010102619037A CN 201010261903 A CN201010261903 A CN 201010261903A CN 101908076 B CN101908076 B CN 101908076B
Authority
CN
China
Prior art keywords
width
height
page
page documents
documents
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Active
Application number
CN2010102619037A
Other languages
English (en)
Other versions
CN101908076A (zh
Inventor
蒋晟
薛明
郑小华
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Beijing Cennavi Technologies Co Ltd
Original Assignee
Beijing Cennavi Technologies Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Beijing Cennavi Technologies Co Ltd filed Critical Beijing Cennavi Technologies Co Ltd
Priority to CN2010102619037A priority Critical patent/CN101908076B/zh
Publication of CN101908076A publication Critical patent/CN101908076A/zh
Priority to PCT/CN2011/076503 priority patent/WO2012024979A1/zh
Application granted granted Critical
Publication of CN101908076B publication Critical patent/CN101908076B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/95Retrieval from the web
    • G06F16/957Browsing optimisation, e.g. caching or content distillation
    • G06F16/9577Optimising the visualization of content, e.g. distillation of HTML documents

Abstract

本发明实施例公开了一种页面布局自适应方法及装置,涉及网页设计领域,能够在不同分别率的屏幕中、不同类型的浏览器中以及不同大小的浏览器窗口中,显示相同的页面内容,方便用户查看页面内容,提高了用户体验。本发明方法包括:获取屏幕显示参数,所述屏幕显示参数为以下参数中的至少一个参数,该参数包括:屏幕分辨率、浏览器的窗口大小以及用户当前使用浏览器的类型;根据所述屏幕显示参数获取当前页面的页面文档的高度和宽度;根据所述页面文档的高度和宽度以及所述页面文档中固定区域的高度和宽度,设置所述页面文档中可变区域的高度和宽度;调整所述页面文档中固定区域的位置。本发明实施例主要用于页面的自适应过程中。

Description

页面布局自适应方法及装置
技术领域
本发明涉及网页设计领域,尤其涉及一种页面布局自适应方法及装置。
背景技术
电子地图网站的主要功能,在于将用户关心的信息结合地图的方式展现出来,以更直观的方式为用户提供诸如购物、交通出行等生活信息服务。但是,在显示地图页面时,经常会遇到同一个地图页面,在不同分辨率的显示器中、不同大小浏览器窗口中以及不同类型浏览器中,显示的地图页面效果不同的情况,因此,如何实现地图页面的自适应,即如何将同一个地图页面在不同分辨率的显示器中、不同大小的浏览器窗口中以及不同类型的浏览器中,显示相同的地图页面效果,成为衡量该地图网站质量好坏的重要指标。
目前较通用的实现页面布局自适应的方法,主要是通过调整页面元素的百分比相对高度和宽度实现,该种方案包括:当元素的父元素高度和宽度属性发生变化时,其相应属性的绝对值也跟着变化,同时,保留页面级别的滚动条,以保证浏览器的窗口大小发生变化时页面元素不至于发生变形而导致布局混乱。
但是,在发明人实施上述方案时,由于页面中存在页面级的滚动条,地图大小不能自动伸缩,当窗口变小时,不能与之前窗口显示相同的内容,用户必须要手动滑动滚动条才能看到地图页面的全部内容,使得用户查看信息很不方便,用户体验效果很差。
发明内容
本发明的实施例提供一种页面布局自适应方法及装置,能够在不同分别率的屏幕中、不同类型浏览器以及不同大小浏览器窗口中,显示相同的页面内容,方便用户查看页面内容,提高了用户体验。
为达到上述目的,本发明的实施例采用如下技术方案:
一种页面布局自适应方法,包括:
获取屏幕显示参数,所述屏幕显示参数为以下参数中的至少一个参数,该参数包括:屏幕分辨率、浏览器的窗口大小以及用户当前使用浏览器的类型;
根据所述屏幕显示参数获取当前页面的页面文档的高度和宽度;
根据所述页面文档的高度和宽度以及所述页面文档中固定区域的高度和宽度,设置所述页面文档中可变区域的高度和宽度;
调整所述页面文档中固定区域的位置。
一种页面布局自适应装置,包括:
第一获取单元,用于获取屏幕显示参数,所述屏幕显示参数为以下参数中的至少一个参数,该参数包括:屏幕分辨率、浏览器的窗口大小以及用户当前使用浏览器的类型;
第二获取单元,用于根据所述第一获取单元获取的所述屏幕显示参数,获取当前页面的页面文档的高度和宽度;
设置单元,用于根据所述第二获取单元获取的所述页面文档的高度和宽度以及所述页面文档中固定区域的高度和宽度,设置所述页面文档中可变区域的高度和宽度;
调整单元,用于调整所述页面文档中固定区域的位置。
本发明实施例提供的技术方案,在显示当前页面时,先获取屏幕分辨率、浏览器的窗口大小以及用户当前使用浏览器的类型中的至少一个屏幕显示参数,并根据该屏幕显示参数,获取当前页面的页面文档的高度和宽度,进而根据该页面文档的高度和宽度设置该页面文档中可变区域的高度和宽度,并调整页面文档中固定区域的位置,从而实现了在不同分别率的屏幕中、不同类型浏览器以及不同大小浏览器窗口中,显示相同的页面内容,方便用户查看页面内容,提高了用户体验。
附图说明
为了更清楚地说明本发明实施例或现有技术中的技术方案,下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本发明的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其他的附图。
图1为本发明实施例1中页面布局自适应方法的流程图;
图2为本发明实施例2中页面的页面文档布局结构示意图;
图3为本发明实施例2中页面布局自适应方法的流程图;
图4为本发明实施例3中页面布局自适应方法的流程图;
图5为本发明实施例4中页面布局自适应方法的流程图;
图6为本发明实施例5中一种页面布局自适应装置的组成框图;
图7为本发明实施例5中另一种页面布局自适应装置的组成框图;
图8为本发明实施例5中另一种页面布局自适应装置的组成框图;
图9为本发明实施例5中另一种页面布局自适应装置的组成框图;
图10为本发明实施例5中另一种页面布局自适应装置的组成框图。
具体实施方式
下面将结合本发明实施例中的附图,对本发明实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例仅仅是本发明一部分实施例,而不是全部的实施例。基于本发明中的实施例,本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例,都属于本发明保护的范围。
实施例1
本发明实施例提供一种页面布局自适应方法,如图1所示,该方法包括:
101、获取屏幕显示参数,所述屏幕显示参数为以下参数中的至少一个参数,该参数包括:屏幕分辨率、浏览器的窗口大小以及用户当前使用浏览器的类型。
其中,当获取的是屏幕分辨率时,可以在当加载当前页面时获取;当获取的是浏览器的窗口大小时,可以在加载页面时获取浏览器的窗口大小,也可以在浏览器的窗口大小发生变化时获取所述浏览器的窗口大小;当获取的是用户当前使用浏览器的类型时,可以在打开浏览器时获取所述用户当前使用浏览器的类型。
102、根据所述屏幕显示参数获取当前页面的页面文档的高度和宽度。
其中,所述根据所述屏幕显示参数获取当前页面的页面文档的高度和宽度,可以包括:
当所述屏幕显示参数为屏幕分辨率、浏览器的窗口大小中的至少一个参数时,根据所述屏幕显示参数获取当前页面的页面文档的高度和宽度,包括:根据所述屏幕显示参数计算所述当前浏览器窗口的高度和宽度;获取所述当前浏览器窗口中地址栏、菜单栏和状态栏的高度之和、宽度之和;将所述当前页面的高度和宽度分别减去所述高度之和、所述宽度之和,得到所述页面文档的高度和宽度。
当所述屏幕显示参数中包括所述用户当前使用浏览器的类型时,所述根据所述屏幕显示参数获取当前页面的页面文档的高度和宽度,包括:根据所述浏览器的类型确定与所述浏览器的类型对应的页面布局中所包含元素的样式参数;根据所述元素的样式参数获取当前页面的页面文档的高度和宽度。
103、根据所述页面文档的高度和宽度以及所述页面文档中固定区域的高度和宽度,设置所述页面文档中可变区域的高度和宽度。
其中,所述根据所述页面文档的高度和宽度以及所述页面文档中固定区域的高度和宽度,设置所述页面文档中可变区域的高度和宽度,可以包括:
获取所述页面文档中固定区域的高度和宽度;将所述页面文档的高度和宽度分别减去所述页面文档中固定区域的高度和宽度,得到所述页面文档中可变区域的高度和宽度;按照所述得到所述页面文档中可变区域的高度和宽度,设置所述页面文档中可变区域的高度和宽度。
104、调整所述页面文档中固定区域的位置。
其中,所述调整所述页面文档中固定区域的位置,包括确定所述固定区域的水平位置和垂直位置,并根据所述确定的水平位置和垂直位置调整所述页面文档中固定区域的位置;
其中,确定页面文档中与所述可变区域相邻的右侧固定区域的水平位置时,可以通过确定该固定区域的左侧水平位置确定,而确定该固定区域的左侧水平位置,可以通过以下公式确定,该公式为:左侧水平位置=与所述可变区域相邻的左侧固定区域的宽度+可变区域的宽度;该左侧水平位置的单位为屏幕像素(px)。
确定页面文档中与所述可变区域相邻的下方固定区域的垂直位置时,可以通过确定该固定区域的上端的垂直位置确定,而确定该固定区域的上端的垂直位置,可以通过以下公式确定,该公式为:左侧水平位置=与所述可变区域相邻的左侧固定区域的宽度+可变区域的宽度;该左侧水平位置的单位为屏幕像素(px)。
本发明实施例中,在显示当前页面时,先获取屏幕分辨率、浏览器的窗口大小以及用户当前使用浏览器的类型中的至少一个屏幕显示参数,并根据该屏幕显示参数,获取当前页面的页面文档的高度和宽度,进而根据该页面文档的高度和宽度设置该页面文档中可变区域的高度和宽度,并调整页面文档中固定区域的位置,从而实现了在不同分辨率的屏幕中、不同类型浏览器以及不同大小的浏览窗口中,显示相同的页面内容,方便用户查看页面内容,提高了用户体验。
实施例2
本发明实施例提供一种页面布局自适应方法,该方法具体以根据屏幕分辨率实现页面布局自适应,结合图2和图3具体阐述该方法。图2为本发明提供的自适应应用页面布局的页面文档结构示意图,该示意图中包括三部分,页面文档的上部包含公司Logo区域、模块导航区域以及自动扩展区域;页面文档的中部包含地图显示区域和文本显示区域两个部分;页面文档的底部则包含用于显示公司版权信息的公司版权区域;上述三个部分中根据区域是否可变,又可分为页面文档的固定区域和可变区域,该页面文档的固定区域包括:公司Logo区域、模块导航区、文本显示区域以及公司版权区域;该页面文档的可变区域包括:自动扩展区域和地图显示区域。该方法如图3所示,包括:
201、系统获取屏幕分辨率。
其中,当加载当前页面时,系统获取本机的屏幕分辨率。
202、所述系统根据所述屏幕分辨率获取当前页面的页面文档的高度和宽度,保证页面文档中的所有元素的高度和宽度均不超过所述页面文档的高度和宽度。
其中,所述系统在获取了本机的屏幕分辨率后,根据所述屏幕分辨率获取当前页面的页面文档的高度和宽度;所述根据所述屏幕分辨率获取当前页面的页面文档的高度和宽度,可以采用以下方法,该方法包括:
根据所述屏幕分别率计算所述当前浏览器窗口的高度和宽度;获取所述当前浏览器窗口中地址栏、菜单栏和状态栏的高度之和、宽度之和;将所述当前浏览器窗口的高度和宽度分别减去所述高度之和、所述宽度之和,得到所述页面文档的高度和宽度。
203、根据所述页面文档的高度和宽度以及所述页面文档中固定区域的高度和宽度,设置所述页面文档中可变区域的高度和宽度。
其中,所述根据所述页面文档的高度和宽度以及所述页面文档中固定区域的高度和宽度,设置所述页面文档中可变区域的高度和宽度,可以采用以下方法,该方法包括:
获取所述页面文档中固定区域的高度和宽度;将所述页面文档的高度和宽度分别减去所述页面文档中固定区域的高度和宽度,得到所述页面文档中可变区域的高度和宽度;按照所述得到所述页面文档中可变区域的高度和宽度,设置所述页面文档中可变区域的高度和宽度。
本发明实施例中,如图2所示的页面布局,其由三部分组成,所述设置所述页面文档中可变区域的高度和宽度可以为:
首先,系统获取所述页面文档的上部的固定区域的宽度,即获取Logo区域和模块导航区域的宽度之和,将所述页面文档的宽度减去所述页面文档中Logo区域和模块导航区域的宽度之和,得到自动扩展区域的宽度,并按照所述得到所述自动扩展区域的宽度设置所述自动扩展区域的宽度,并按照Logo区域的高度设置所述自动扩展区域的高度。
其次,系统获取所述页面文档的固定区域的高度,即获取Logo区域和公司版权区域的高度之和,将所述页面文档的高度减去所述页面文档中Logo区域和公司版权区域的高度之和,得到地图显示区域的高度;获取所述页面文档的中部的固定区域的宽度,即获取文本显示区域的宽度,将所述页面文档的宽度减去所述页面文档中文本显示区域的宽度,得到地图显示区域的宽度,按照所述获取的地图显示区域的高度和宽度,设置所述地图显示区域的高度和宽度。完成该设置后,所述页面文档的中部区域自动撑开。
204、调整所述页面文档中固定区域的位置,使所述页面文档的各区域撑开。
其中,本发明实施例中,所述调整所述页面文档中固定区域的位置,如图2所示,调整所述模块导航区域和文本显示区域两个部分的位置。根据实施例1中的步骤104中所述,确定所述模块导航区域的位置包括:确定该模块导航区域的左侧水平位置,确定该模块导航区域的左侧水平位置为:Logo区域的宽度+自动扩展区域的宽度;确定该模块导航区域的垂直位置为:Logo区域和自动扩展区域的垂直位置。
确定文本显示区域的位置包括:确定该文本显示区域的左侧水平位置,确定该文本显示区域的左侧水平位置为:地图显示区域的宽度;确定该文本显示区域的垂直位置为:该块模导航区域的高度。
本发明实施例中,在加载当前页面时,系统获取本机的屏幕分辨率,并根据该屏幕分辨率获取当前页面的页面文档的高度和宽度,进而根据该页面文档的高度和宽度设置该页面文档中可变区域的高度和宽度,并调整页面文档中固定区域的位置,从而实现了在不同分辨率的屏幕中,显示相同的页面内容,方便用户查看页面内容,提高了用户体验。
实施例3
本发明实施例提供一种页面布局自适应方法,该方法以根据器浏览器的窗口大小实现页面布局自适应为例,结合图2和图4具体阐述该方法,该方法如图4所示,包括:
301、系统获取浏览器的窗口大小。
其中,所述获取浏览器的窗口大小可以在加载页面时获取浏览器的窗口大小,也可以在浏览器的窗口大小发生变化时,获取所述浏览器的窗口大小。
302、所述系统根据所述浏览器的窗口大小获取当前页面的页面文档的高度和宽度,保证页面文档中的所有元素的高度和宽度均不超过所述页面文档的高度和宽度。
其中,所述系统在获取了浏览器的窗口大小后,根据所述浏览器的窗口大小,获取当前页面的页面文档的高度和宽度;所述根据浏览器的窗口大小,获取当前页面的页面文档的高度和宽度,可以采用以下方法,该方法包括:
获取所述当前浏览器窗口中地址栏、菜单栏和状态栏的高度之和、宽度之和;将所述当前浏览器窗口的高度和宽度分别减去所述高度之和、所述宽度之和,得到所述页面文档的高度和宽度。
303、根据所述页面文档的高度和宽度以及所述页面文档中固定区域的高度和宽度,设置所述页面文档中可变区域的高度和宽度。
其中,所述根据所述页面文档的高度和宽度以及所述页面文档中固定区域的高度和宽度,设置所述页面文档中可变区域的高度和宽度的方法,可以参考实施例2中的步骤203中的相应描述,本发明实施例此处将不再赘述。
304、调整所述页面文档中固定区域的位置,使所述页面文档的各区域撑开。
其中,调整所述页面文档中固定区域的位置的具体描述,可以参考实施例2中的步骤204中的相应描述,本发明实施例此处将不再赘述。
本发明实施例中,在显示当前页面的窗口变化时,系统获取当前窗口的大小,并根据该窗口的大小获取当前页面的页面文档的高度和宽度,进而根据该页面文档的高度和宽度设置该页面文档中可变区域的高度和宽度,并调整页面文档中固定区域的位置,从而实现了在不同大小的浏览窗口中,显示相同的页面内容,方便用户查看页面内容,提高了用户体验。
实施例4
本发明实施例提供一种页面布局自适应方法,本发明实施例以根据浏览器的类型实现页面布局自适应为例,具体阐述该方法,如图5所示,该方法包括:
401、系统获取用户当前使用浏览器的类型;
其中,目前使用的主流浏览器的类型包括:IE(IE6,IE7,IE8),FireFox 3.0及以上,Safari、以及Opera等,上述不同类型的浏览器使用W3C和微软IE标准。
402、根据所述用户当前使用浏览器的类型获取当前页面的页面文档的高度和宽度。
其中,根据所述用户当前使用浏览器的类型获取当前页面的页面文档的高度和宽度,可以采用以下方法,包括:
根据所述浏览器的类型确定与所述浏览器的类型对应的页面布局中所包含元素的样式参数;根据所述元素的样式参数获取当前页面的页面文档的高度和宽度,具体根据预设的浏览器类型与页面布局中所包含元素的样式参数的对应关系,确定与所述浏览器的类型对应的页面布局中所包含元素的样式参数。其中,所述页面布局中所包含元素的样式参数可以包含元素的高度、宽度、位置以及文字颜色、背景颜色等参数,但本发明实施例对此不进行限制,还可以是其他参数。
403、根据所述页面文档的高度和宽度以及所述页面文档中固定区域的高度和宽度,设置所述页面文档中可变区域的高度和宽度。
其中,所述根据所述页面文档的高度和宽度以及所述页面文档中固定区域的高度和宽度,设置所述页面文档中可变区域的高度和宽度的方法,可以参考实施例2中的步骤203中的相应描述,本发明实施例此处将不再赘述。
404、调整所述页面文档中固定区域的位置,使所述页面文档的各区域撑开。
其中,调整所述页面文档中固定区域的位置的具体描述,可以参考实施例2中的步骤204中的相应描述,本发明实施例此处将不再赘述。
本发明实施例中,当用户使用不同类型的浏览器时,系统根据预设的浏览器类型与页面布局中所包含元素的样式参数的对应关系,确定与所述浏览器的类型对应的页面布局中所包含元素的样式参数,并确定当前页面文档的高度和宽度,进而根据该页面文档的高度和宽度设置该页面文档中可变区域的高度和宽度,并调整页面文档中固定区域的位置,从而保证在不同类型的浏览器中,显示相同的页面内容,方便用户查看页面内容,提高了用户体验。
需要说明的是,用户在具体实施页面的自适应方案时,可以根据屏幕分辨率、浏览器的窗口大小或用户当前使用浏览器的类型中的一个参数,参考实施例2、实施例3以及实施例4,实现页面布局的自适应;当然,用户还可以根据屏幕分辨率、浏览器的窗口大小或用户当前使用浏览器的类型中的至少两个参数,实现页面布局的自适应,本发明实施例对此不进行限制。
实施例5
本发明实施例提供一种页面布局自适应装置,如图6所示,该装置包括:第一获取单元51、第二获取单元52、设置单元53和调整单元54。
第一获取单元51,用于屏幕显示参数,所述屏幕显示参数为以下参数中的至少一个参数,该参数包括:屏幕分辨率、浏览器的窗口大小以及用户当前使用浏览器的类型。其中,当第一获取单元51获取的是屏幕分辨率时,可以在当加载当前页面时获取;当第一获取单元51获取的是浏览器的窗口大小时,可以在加载页面时获取浏览器的窗口大小,也可以在浏览器的窗口大小发生变化时,获取所述浏览器的窗口大小;当获取的是用户当前使用浏览器的类型时,可以在打开浏览器时获取所述用户当前使用浏览器的类型。
第二获取单元52,用于根据所述第一获取单元51获取的所述屏幕显示参数,获取当前页面的页面文档的高度和宽度。
设置单元53,用于根据所述第二获取单元52获取的所述页面文档的高度和宽度以及所述页面文档中固定区域的高度和宽度,设置所述页面文档中可变区域的高度和宽度;
调整单元54,用于调整所述页面文档中固定区域的位置。
进一步的,如图7所示,当所述第一获取单元51获取的屏幕显示参数中包含屏幕分辨率时,所述第二获取单元52包括:第一计算模块521、第一获取模块522和第二计算模块523。
在所述第二获取单元52获取当前页面的页面文档的高度和宽度时,第一计算模块521,用于根据所述屏幕显示参数计算所述当前浏览器窗口的高度和宽度;第一获取模块522,用于获取所述第一计算模块得到的所述当前浏览器窗口中地址栏、菜单栏和状态栏的高度之和、宽度之和;第二计算模块523,用于将所述第一计算模块521得到的所述当前浏览器窗口的高度和宽度,分别减去所述第一获取模块522获取的所述高度之和、所述宽度之和,得到所述页面文档的高度和宽度。
进一步的,如图8所示,当所述第一获取单元51获取的屏幕显示参数中包含浏览器的窗口大小时,所述第二获取单元52包括:第二获取模块524和第三计算模块525。
在所述第二获取单元52获取当前页面的页面文档的高度和宽度时,第二获取模块524,用于获取所述当前浏览器窗口中地址栏、菜单栏和状态栏的高度之和、宽度之和;第三计算模块525,用于将所述当前浏览器窗口的高度和宽度分别减去所述第二获取模块524获取的所述高度之和、所述宽度之和,得到所述页面文档的高度和宽度。
进一步的,如图9所示,当所述第一获取单元51获取的所述屏幕显示参数中包括所述用户当前使用浏览器的类型时,所述第二获取单元52包括:确定模块526和第三获取模块527。
在所述第二获取单元52获取当前页面的页面文档的高度和宽度时,确定模块526,用于根据所述浏览器的类型确定与所述浏览器的类型对应的页面布局中所包含元素的样式参数;第三获取模块527,用于根据所述确定模块526确定的所述元素的样式参数获取当前页面的页面文档的高度和宽度。
进一步的,如图10所示,所述设置单元53包括:第二获取模块531、第三计算模块532和设置模块533。
在所述设置单元53设置所述页面文档中可变区域的高度和宽度时,第二获取模块531,用于获取所述页面文档中固定区域的高度和宽度;第三计算模块532,用于将所述第二计算模块531计算得到的所述页面文档的高度和宽度,分别减去所述页面文档中固定区域的高度和宽度,得到所述页面文档中可变区域的高度和宽度;设置模块533,用于按照所述第三计算模块532计算得到所述页面文档中可变区域的高度和宽度,设置所述页面文档中可变区域的高度和宽度。
本发明实施例中,在显示当前页面时,先获取屏幕分辨率、浏览器的窗口大小以及用户当前使用浏览器的类型中的至少一个屏幕显示参数,并根据该屏幕显示参数,获取当前页面的页面文档的高度和宽度,进而根据该页面文档的高度和宽度设置该页面文档中可变区域的高度和宽度,并调整页面文档中固定区域的位置,从而实现了在不同分辨率的屏幕中、不同类型浏览器以及不同大小的浏览窗口中,显示相同的页面内容,方便用户查看页面内容,提高了用户体验。
通过以上的实施方式的描述,所属领域的技术人员可以清楚地了解到本发明可借助软件加必需的通用硬件的方式来实现,当然也可以通过硬件,但很多情况下前者是更佳的实施方式。基于这样的理解,本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来,该计算机软件产品存储在可读取的存储介质中,如计算机的软盘,硬盘或光盘等,包括若干指令用以使得一台计算机设备(可以是个人计算机,服务器,或者网络设备等)执行本发明各个实施例所述的方法。
以上所述,仅为本发明的具体实施方式,但本发明的保护范围并不局限于此,任何熟悉本技术领域的技术人员在本发明揭露的技术范围内,可轻易想到变化或替换,都应涵盖在本发明的保护范围之内。因此,本发明的保护范围应以所述权利要求的保护范围为准。

Claims (10)

1.一种页面布局自适应方法,其特征在于,包括:
获取屏幕显示参数,所述屏幕显示参数为以下参数中的至少一个参数,该参数包括:屏幕分辨率、浏览器的窗口大小以及用户当前使用浏览器的类型;
根据所述屏幕显示参数获取当前页面的页面文档的高度和宽度;
根据所述页面文档的高度和宽度以及所述页面文档中固定区域的高度和宽度,设置所述页面文档中可变区域的高度和宽度;
调整所述页面文档中固定区域的位置。
2.根据权利要求1所述的方法,其特征在于,当所述屏幕显示参数中包含屏幕分辨率时,所述根据所述屏幕显示参数获取当前页面的页面文档的高度和宽度,包括:
根据所述屏幕显示参数计算当前浏览器窗口的高度和宽度;
获取所述当前浏览器窗口中地址栏、菜单栏和状态栏的高度之和、宽度之和;
将所述当前浏览器窗口的高度和宽度分别减去所述高度之和、所述宽度之和,得到所述页面文档的高度和宽度。
3.根据权利要求1所述的方法,其特征在于,当所述屏幕显示参数中包含浏览器的窗口大小时,所述根据所述屏幕显示参数获取当前页面的页面文档的高度和宽度,包括:
获取当前浏览器窗口中地址栏、菜单栏和状态栏的高度之和、宽度之和;
将所述当前浏览器窗口的高度和宽度分别减去所述高度之和、所述宽度之和,得到所述页面文档的高度和宽度。
4.根据权利要求1所述的方法,其特征在于,当所述屏幕显示参数中包括所述用户当前使用浏览器的类型时,所述根据所述屏幕显示参数获取当前页面的页面文档的高度和宽度,包括:
根据所述浏览器的类型确定与所述浏览器的类型对应的页面布局中所包含元素的样式参数;
根据所述元素的样式参数获取当前页面的页面文档的高度和宽度。
5.根据权利要求1所述的方法,其特征在于,所述根据所述页面文档的高度和宽度以及所述页面文档中固定区域的高度和宽度,设置所述页面文档中可变区域的高度和宽度,包括:
获取所述页面文档中固定区域的高度和宽度;
将所述页面文档的高度和宽度分别减去所述页面文档中固定区域的高度和宽度,得到所述页面文档中可变区域的高度和宽度;
按照所述得到所述页面文档中可变区域的高度和宽度,设置所述页面文档中可变区域的高度和宽度。
6.一种页面布局自适应装置,其特征在于,包括:
第一获取单元,用于获取屏幕显示参数,所述屏幕显示参数为以下参数中的至少一个参数,该参数包括:屏幕分辨率、浏览器的窗口大小以及用户当前使用浏览器的类型;
第二获取单元,用于根据所述第一获取单元获取的所述屏幕显示参数,获取当前页面的页面文档的高度和宽度;
设置单元,用于根据所述第二获取单元获取的所述页面文档的高度和宽度以及所述页面文档中固定区域的高度和宽度,设置所述页面文档中可变区域的高度和宽度;
调整单元,用于调整所述页面文档中固定区域的位置。
7.根据权利要求6所述的装置,其特征在于,当所述第一获取单元获取的屏幕显示参数中包含屏幕分辨率时,所述第二获取单元包括:
第一计算模块,用于根据所述屏幕显示参数计算当前浏览器窗口的高度和宽度;
第一获取模块,用于获取所述第一计算模块得到的所述当前浏览器窗口中地址栏、菜单栏和状态栏的高度之和、宽度之和;
第二计算模块,用于将所述第一计算模块得到的所述当前浏览器窗口的高度和宽度,分别减去所述第一获取模块获取的所述高度之和、所述宽度之和,得到所述页面文档的高度和宽度。
8.根据权利要求6所述的装置,其特征在于,当所述第一获取单元获取的屏幕显示参数中包含浏览器的窗口大小时,所述第二获取单元包括:
第二获取模块,用于获取当前浏览器窗口中地址栏、菜单栏和状态栏的高度之和、宽度之和;
第三计算模块,用于将所述当前浏览器窗口的高度和宽度分别减去所述第二获取模块获取的所述高度之和、所述宽度之和,得到所述页面文档的高度和宽度。
9.根据权利要求6所述的装置,其特征在于,当所述第一获取单元获取的所述屏幕显示参数中包括所述用户当前使用浏览器的类型时,所述第二获取单元包括:
确定模块,用于根据所述浏览器的类型确定与所述浏览器的类型对应的页面布局中所包含元素的样式参数;
第三获取模块,用于根据所述确定模块确定的所述元素的样式参数获取当前页面的页面文档的高度和宽度。
10.根据权利要求6所述的装置,其特征在于,所述设置单元包括:
第二获取模块,用于获取所述页面文档中固定区域的高度和宽度;
第三计算模块,用于将所述第二获取单元获取的所述页面文档的高度和宽度,分别减去所述页面文档中固定区域的高度和宽度,得到所述页面文档中可变区域的高度和宽度;
设置模块,用于按照所述第三计算模块计算得到所述页面文档中可变区域的高度和宽度,设置所述页面文档中可变区域的高度和宽度。
CN2010102619037A 2010-08-24 2010-08-24 页面布局自适应方法及装置 Active CN101908076B (zh)

Priority Applications (2)

Application Number Priority Date Filing Date Title
CN2010102619037A CN101908076B (zh) 2010-08-24 2010-08-24 页面布局自适应方法及装置
PCT/CN2011/076503 WO2012024979A1 (zh) 2010-08-24 2011-06-28 页面布局自适应方法及装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN2010102619037A CN101908076B (zh) 2010-08-24 2010-08-24 页面布局自适应方法及装置

Publications (2)

Publication Number Publication Date
CN101908076A CN101908076A (zh) 2010-12-08
CN101908076B true CN101908076B (zh) 2012-09-12

Family

ID=43263535

Family Applications (1)

Application Number Title Priority Date Filing Date
CN2010102619037A Active CN101908076B (zh) 2010-08-24 2010-08-24 页面布局自适应方法及装置

Country Status (2)

Country Link
CN (1) CN101908076B (zh)
WO (1) WO2012024979A1 (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105335154A (zh) * 2015-10-19 2016-02-17 沈文策 一种面向多终端的自适应网页布局方法及装置

Families Citing this family (44)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101908076B (zh) * 2010-08-24 2012-09-12 北京世纪高通科技有限公司 页面布局自适应方法及装置
CN102081600B (zh) * 2011-01-25 2012-10-10 珠海全志科技股份有限公司 电子书排版方法及其系统
EP2557505A1 (en) * 2011-03-07 2013-02-13 Showcase-Tv Inc. Web display program conversion system, web display program conversion method, and program for web display program conversion
CN103164118B (zh) * 2011-12-14 2017-05-03 腾讯科技(深圳)有限公司 一种移动终端多视图显示的方法及装置
CN103186505B (zh) * 2011-12-30 2015-12-02 北大方正集团有限公司 一种确定电子文档显示模式的方法和装置
CN102779167B (zh) * 2012-06-21 2016-01-06 北京奇虎科技有限公司 在移动终端中显示网页的方法及系统
CN103513979A (zh) * 2012-06-29 2014-01-15 百度在线网络技术(北京)有限公司 一种网页自适应布局方法及装置
CN103593331B (zh) * 2012-08-15 2018-09-18 腾讯科技(深圳)有限公司 一种页面排版方法及装置
CN102945122B (zh) * 2012-10-11 2015-08-05 百度在线网络技术(北京)有限公司 为移动终端提供适配的阅读界面的方法以及客户端
CN103941958B (zh) * 2013-01-23 2019-01-29 腾讯科技(深圳)有限公司 一种桌面管理的方法及终端设备
CN104102679A (zh) * 2013-04-15 2014-10-15 腾讯科技(深圳)有限公司 显示扩展功能信息区的方法和装置
CN104216898A (zh) * 2013-05-31 2014-12-17 腾讯科技(深圳)有限公司 一种浏览器导航方法、装置及终端设备
CN104426896B (zh) * 2013-09-10 2019-06-04 腾讯科技(北京)有限公司 一种专题页面制作方法和装置
CN103488777A (zh) * 2013-09-30 2014-01-01 乐视网信息技术(北京)股份有限公司 一种调节网页展示效果的方法及系统
WO2015051505A1 (en) * 2013-10-09 2015-04-16 Tsai Yi Chung Method and system for displaying web page on device by automatically adapting the web page to the size of browser of the device
CN103678497A (zh) * 2013-11-18 2014-03-26 乐视网信息技术(北京)股份有限公司 提供调整检索页浏览显示的方法和系统
CN103593196A (zh) * 2013-11-25 2014-02-19 深信服网络科技(深圳)有限公司 页面布局自适应方法及装置
CN103677720A (zh) * 2013-12-25 2014-03-26 乐视网信息技术(北京)股份有限公司 一种基于网站的图片显示方法及装置
US9608876B2 (en) * 2014-01-06 2017-03-28 Microsoft Technology Licensing, Llc Dynamically adjusting brand and platform interface elements
CN103761315B (zh) * 2014-01-27 2018-07-27 乐视网信息技术(北京)股份有限公司 一种显示网页内容的方法及系统
CN103970894B (zh) * 2014-05-27 2017-04-05 合一网络技术(北京)有限公司 自适应调整的界面流式布局显示的方法和系统
CN104007991B (zh) * 2014-06-06 2019-06-14 百度在线网络技术(北京)有限公司 应用程序界面布局调整方法和装置
CN104021766B (zh) * 2014-06-26 2016-06-08 西安诺瓦电子科技有限公司 媒体内容自适应显示方法和led显示控制器
US10055094B2 (en) 2014-10-29 2018-08-21 Xiaomi Inc. Method and apparatus for dynamically displaying device list
CN104461249B (zh) * 2014-12-15 2018-09-18 北京国双科技有限公司 图形界面的排列显示方法及装置
CN106610824B (zh) * 2015-10-23 2020-10-09 北京国双科技有限公司 一种页面高度自适应的方法及装置
CN106682046B (zh) * 2015-11-11 2020-04-21 北京国双科技有限公司 用于多Tab页的处理方法和装置
CN105468706B (zh) * 2015-11-18 2019-04-12 天脉聚源(北京)传媒科技有限公司 一种页面显示方法及装置
CN105335295A (zh) * 2015-12-01 2016-02-17 上海斐讯数据通信技术有限公司 响应式布局界面的测试方法、系统及浏览器
CN105975268A (zh) * 2016-05-03 2016-09-28 国家电网公司 一种用于pc端信息系统网页界面的宽度自适应的方法
CN106339437A (zh) * 2016-08-19 2017-01-18 合网络技术(北京)有限公司 浏览器的显示方法及装置
CN107861711B (zh) * 2016-09-22 2020-03-17 腾讯科技(深圳)有限公司 页面适配方法及装置
CN108228284B (zh) * 2016-12-14 2021-05-28 腾讯科技(深圳)有限公司 一种窗口显示方法及终端
CN107220351B (zh) * 2017-05-31 2020-09-29 北京京东尚科信息技术有限公司 页面留白宽度计算方法、装置、存储介质和电子设备
CN108733336B (zh) * 2018-05-21 2021-10-01 北京字节跳动网络技术有限公司 页面显示方法和装置
CN110673903B (zh) * 2018-07-02 2024-03-19 阿里巴巴(中国)有限公司 一种阅读软件的书架页面的显示方法和装置
CN109408179B (zh) * 2018-10-08 2023-03-24 北京金山安全软件有限公司 终端设备的全面屏确定方法及其装置
CN109656556B (zh) * 2018-12-13 2022-05-27 中国银行股份有限公司 一种自适应页面的生成方法及装置
CN109710121B (zh) * 2019-01-10 2020-07-03 环球雅途集团有限公司 一种自适应屏幕尺寸的排版显示方法
CN109814967A (zh) * 2019-01-17 2019-05-28 平安科技(深圳)有限公司 面签系统的显示方法、装置、计算机设备及可读存储介质
CN110263281B (zh) * 2019-06-17 2021-03-02 北京亚鸿世纪科技发展有限公司 一种数据可视化开发中页面分辨率自适应的装置及方法
CN110807164B (zh) * 2019-10-08 2022-07-22 北京字节跳动网络技术有限公司 图像区域的自动调节方法、装置、电子设备及计算机可读存储介质
CN111198668B (zh) * 2019-12-26 2023-06-16 成都中科合迅科技有限公司 一种基于浏览器的多屏系统和多屏交互方法
CN112083990A (zh) * 2020-08-28 2020-12-15 山东英信计算机技术有限公司 一种智能配置监控首页的方法、装置、设备及存储介质

Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN1648848A (zh) * 2004-01-30 2005-08-03 佳能株式会社 布局调整方法和装置
CN101146098A (zh) * 2007-11-01 2008-03-19 武汉虹旭信息技术有限责任公司 一种基于网络脚本语言的页面布局方法
CN101241416A (zh) * 2008-02-21 2008-08-13 北大方正集团有限公司 一种适应屏幕分辨率的电子读物处理方法及系统

Family Cites Families (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US6456305B1 (en) * 1999-03-18 2002-09-24 Microsoft Corporation Method and system for automatically fitting a graphical display of objects to the dimensions of a display window
US20020158908A1 (en) * 2001-04-30 2002-10-31 Kristian Vaajala Web browser user interface for low-resolution displays
US9116593B2 (en) * 2007-07-06 2015-08-25 Qualcomm Incorporated Single-axis window manager
CN101477564B (zh) * 2009-01-21 2011-05-04 北京千家悦网络科技有限公司 一种在窄屏幕设备上显示宽网页的智能布局方法
CN101727495B (zh) * 2009-12-31 2012-03-28 优视科技有限公司 一种用于移动通讯设备终端的网页页面缩放管理系统及其应用方法
CN101908076B (zh) * 2010-08-24 2012-09-12 北京世纪高通科技有限公司 页面布局自适应方法及装置

Patent Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN1648848A (zh) * 2004-01-30 2005-08-03 佳能株式会社 布局调整方法和装置
CN101146098A (zh) * 2007-11-01 2008-03-19 武汉虹旭信息技术有限责任公司 一种基于网络脚本语言的页面布局方法
CN101241416A (zh) * 2008-02-21 2008-08-13 北大方正集团有限公司 一种适应屏幕分辨率的电子读物处理方法及系统

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105335154A (zh) * 2015-10-19 2016-02-17 沈文策 一种面向多终端的自适应网页布局方法及装置
CN105335154B (zh) * 2015-10-19 2019-09-20 沈文策 一种面向多终端的自适应网页布局方法及装置

Also Published As

Publication number Publication date
WO2012024979A1 (zh) 2012-03-01
CN101908076A (zh) 2010-12-08

Similar Documents

Publication Publication Date Title
CN101908076B (zh) 页面布局自适应方法及装置
US8949707B2 (en) Adaptive document displaying apparatus and method
CN101984426B (zh) 用于对网页图片进行字符切分的方法及装置
CN102073650A (zh) 一种网页自适应调节的方法和设备
KR20140012664A (ko) 웹페이지 재배치 방법
CN102819560A (zh) 一种网页中图片的显示方法和装置
JP5186047B2 (ja) オブジェクト表示装置、オブジェクト表示方法、オブジェクト表示制御プログラム、及びそのプログラムを記録したコンピュータ読み取り可能な記録媒体
CN103678622A (zh) 瀑布流式图片动态呈现的方法及装置
KR20140114645A (ko) 하이퍼링크의 미리 보기 화면 표시 방법 및 그 장치
US20160217143A1 (en) Method and device for displaying browser resources and computer readable storage medium
CN102364460A (zh) 基于移动终端的页面自动放大方法和系统
CN105528408A (zh) 页面展示方法和装置
WO2015078159A1 (zh) 网页显示方法及装置
CN106502659A (zh) 一种移动设备网页单页面的布局方法及系统
CN102262627A (zh) 一种网页分割方法和网页分割系统
JP2007233659A (ja) ネットワークサービスにおける情報配信システム
CN101763234A (zh) 一种模拟各种屏幕分辨率的方法及其装置
CN112925957B (zh) 一种图谱中父节点位置的确定方法、装置、设备及介质
CN110598140A (zh) 页面调整方法、装置及服务器
CN103365968A (zh) 网页内容放大方法及网页内容放大镜
CN105389308B (zh) 网页的显示处理方法及装置
JP2013524375A (ja) 高解像度およびあらゆる画面に適合するインターネットコンテンツ用hd−web方法
CN105718228A (zh) 动态内容显示的方法和装置
CN105589883B (zh) 网页的页面元素的显示方法和装置
CN103365920A (zh) 显示网页的方法、浏览器及移动终端

Legal Events

Date Code Title Description
C06 Publication
PB01 Publication
C10 Entry into substantive examination
SE01 Entry into force of request for substantive examination
C14 Grant of patent or utility model
GR01 Patent grant