WO2012024979A1 - 页面布局自适应方法及装置 - Google Patents
页面布局自适应方法及装置 Download PDFInfo
- Publication number
- WO2012024979A1 WO2012024979A1 PCT/CN2011/076503 CN2011076503W WO2012024979A1 WO 2012024979 A1 WO2012024979 A1 WO 2012024979A1 CN 2011076503 W CN2011076503 W CN 2011076503W WO 2012024979 A1 WO2012024979 A1 WO 2012024979A1
- Authority
- WO
- WIPO (PCT)
- Prior art keywords
- width
- height
- page
- page document
- browser
- Prior art date
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
Definitions
- the screen display parameter is at least one of a screen resolution and a window size of the browser
- acquiring a height and a width of the page document of the current page according to the screen display parameter including: calculating, according to the screen display parameter Determining the height and width of the current browser window; obtaining a sum of heights and widths of the address bar, the menu bar, and the status bar in the current browser window; and subtracting the height and width of the current page from the height The sum of the widths, the height and width of the page document.
- the system when loading the current page, acquires the screen resolution of the local machine, and obtains the height and width of the page document of the current page according to the screen resolution, and then sets the page according to the height and width of the page document.
- the height and width of the variable area in the document and adjust the position of the fixed area in the page document, thereby realizing the same page content in different resolution screens, which is convenient for the user to view the page content and improve the user experience.
- the system obtains the height and width of the page document of the current page according to the window size of the browser, and ensures that the height and width of all the elements in the page document do not exceed the height and width of the page document.
- the system acquires the size of the current window, and obtains the height and width of the page document of the current page according to the size of the window, and then sets the height according to the height and width of the page document.
- the embodiment of the present invention provides a method for adapting a page layout.
- the embodiment of the present invention is an example of realizing page layout adaptation according to the type of the browser, and the method is specifically illustrated. As shown in FIG. 5, the method includes:
- the method for obtaining the height and width of the page document of the current page according to the type of the browser currently used by the user may use the following methods, including:
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Description
页面布局自适应方法及装置 本申请要求于 2010 年 8 月 24 日提交中国知识产权局、 申请号为 201010261903.7、 发明名称为 "页面布局自适应方法及装置" 的中国专利申请 的优先权， 在此并入其全部内容作为参考。
技术领域
本发明涉及网页设计领域， 尤其涉及一种页面布局自适应方法及装置。 背景技术 电子地图网站的主要功能， 在于将用户关心的信息结合地图的方式展现 出来， 以更直观的方式为用户提供诸如购物、 交通出行等生活信息服务。 但 是， 在显示地图页面时， 经常会遇到同一个地图页面， 在不同分辨率的显示 器中、 不同大小浏览器窗口中以及不同类型浏览器中， 显示的地图页面效果 不同的情况， 因此， 如何实现地图页面的自适应， 即如何将同一个地图页面 在不同分辨率的显示器中、 不同大小的浏览器窗口中以及不同类型的浏览器 中， 显示相同的地图页面效果， 成为衡量该地图网站质量好坏的重要指标。
目前较通用的实现页面布局自适应的方法， 主要是通过调整页面元素的 百分比相对高度和宽度实现， 该种方案包括： 当元素的父元素高度和宽度属 性发生变化时， 其相应属性的绝对值也跟着变化， 同时， 保留页面级别的滚 动条， 以保证浏览器的窗口大小发生变化时页面元素不至于发生变形而导致 布局混乱。
但是， 在发明人实施上述方案时， 由于页面中存在页面级的滚动条， 地 图大小不能自动伸缩， 当窗口变小时， 不能与之前窗口显示相同的内容， 用 户必须要手动滑动滚动条才能看到地图页面的全部内容， 使得用户查看信息 很不方便， 用户体验效果很差。
发明内容
本发明的实施例提供一种页面布局自适应方法及装置， 能够在不同分别 率的屏幕中、 不同类型浏览器以及不同大小浏览器窗口中， 显示相同的页面
内容， 方便用户查看页面内容， 提高了用户体验。
为达到上述目的， 本发明的实施例釆用如下技术方案：
一种页面布局自适应方法， 包括：
获取屏幕显示参数， 所述屏幕显示参数为以下参数中的至少一个参数， 该参数包括： 屏幕分辨率、 浏览器的窗口大小以及用户当前使用浏览器的类 型；
根据所述屏幕显示参数获取当前页面的页面文档的高度和宽度； 根据所述页面文档的高度和宽度以及所述页面文档中固定区域的高度和 宽度， 设置所述页面文档中可变区域的高度和宽度；
调整所述页面文档中固定区域的位置。
一种页面布局自适应装置， 包括：
第一获取单元， 用于获取屏幕显示参数， 所述屏幕显示参数为以下参数 中的至少一个参数， 该参数包括： 屏幕分辨率、 浏览器的窗口大小以及用户 当前使用浏览器的类型；
第二获取单元， 用于根据所述第一获取单元获取的所述屏幕显示参数， 获取当前页面的页面文档的高度和宽度；
设置单元， 用于根据所述第二获取单元获取的所述页面文档的高度和宽 度以及所述页面文档中固定区域的高度和宽度， 设置所述页面文档中可变区 域的高度和宽度；
调整单元， 用于调整所述页面文档中固定区域的位置。
本发明实施例提供的技术方案， 在显示当前页面时， 先获取屏幕分辨率、 浏览器的窗口大小以及用户当前使用浏览器的类型中的至少一个屏幕显示参 数， 并根据该屏幕显示参数， 获取当前页面的页面文档的高度和宽度， 进而 根据该页面文档的高度和宽度设置该页面文档中可变区域的高度和宽度， 并 调整页面文档中固定区域的位置， 从而实现了在不同分别率的屏幕中、 不同 类型浏览器以及不同大小浏览器窗口中， 显示相同的页面内容， 方便用户查 看页面内容， 提高了用户体验。
附图说明 为了更清楚地说明本发明实施例或现有技术中的技术方案， 下面将对实 施例或现有技术描述中所需要使用的附图作简单地介绍， 显而易见地， 下面 描述中的附图仅仅是本发明的一些实施例， 对于本领域普通技术人员来讲， 在不付出创造性劳动的前提下， 还可以根据这些附图获得其他的附图。
图 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、 根据所述页面文档的高度和宽度以及所述页面文档中固定区域的高 度和宽度， 设置所述页面文档中可变区域的高度和宽度。
其中， 所述根据所述页面文档的高度和宽度以及所述页面文档中固定区 域的高度和宽度， 设置所述页面文档中可变区域的高度和宽度的方法， 可以 参考实施例 1中的步骤 203中的相应描述， 本发明实施例此处将不再赘述。
304、 调整所述页面文档中固定区域的位置， 使所述页面文档的各区域撑 开。
其中， 调整所述页面文档中固定区域的位置的具体描述， 可以参考实施 例 1中的步骤 204中的相应描述， 本发明实施例此处将不再赘述。
本发明实施例中， 在显示当前页面的窗口变化时， 系统获取当前窗口的 大小， 并根据该窗口的大小获取当前页面的页面文档的高度和宽度， 进而根 据该页面文档的高度和宽度设置该页面文档中可变区域的高度和宽度， 并调
整页面文档中固定区域的位置， 从而实现了在不同大小的浏览窗口中， 显示 相同的页面内容， 方便用户查看页面内容， 提高了用户体验。
实施例 4
本发明实施例提供一种页面布局自适应方法， 本发明实施例以根据浏览 器的类型实现页面布局自适应为例， 具体阐述该方法， 如图 5 所示， 该方法 包括：
401、 系统获取用户当前使用浏览器的类型；
其中， 目前使用的主流浏览器的类型包括： IE (IE6, IE7, IE8) , Fi reFox3. 0 及以上， Safar i , 以及 Opera等， 上述不同类型的浏览器使用 W3C和微软 IE 标准。
402、 根据所述用户当前使用浏览器的类型获取当前页面的页面文档的高 度和宽度。
其中， 根据所述用户当前使用浏览器的类型获取当前页面的页面文档的 高度和宽度， 可以釆用以下方法， 包括：
根据所述浏览器的类型确定与所述浏览器的类型对应的页面布局中所包 含元素的样式参数； 根据所述元素的样式参数获取当前页面的页面文档的高 度和宽度， 具体根据预设的浏览器类型与页面布局中所包含元素的样式参数 的对应关系， 确定与所述浏览器的类型对应的页面布局中所包含元素的样式 宽度、 位置以及文字颜色、 背景颜色等参数， 但本发明实施例对此不进行限 制， 还可以是其他参数。
403、 根据所述页面文档的高度和宽度以及所述页面文档中固定区域的高 度和宽度， 设置所述页面文档中可变区域的高度和宽度。
其中， 所述根据所述页面文档的高度和宽度以及所述页面文档中固定区 域的高度和宽度， 设置所述页面文档中可变区域的高度和宽度的方法， 可以 参考实施例 1中的步骤 203中的相应描述， 本发明实施例此处将不再赘述。
404、 调整所述页面文档中固定区域的位置， 使所述页面文档的各区域撑
开。
其中， 调整所述页面文档中固定区域的位置的具体描述， 可以参考实施 例 1中的步骤 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计算得到 所述页面文档中可变区域的高度和宽度， 设置所述页面文档中可变区域的高 度和宽度。
本发明实施例中， 在显示当前页面时， 先获取屏幕分辨率、 浏览器的窗 口大小以及用户当前使用浏览器的类型中的至少一个屏幕显示参数， 并根据 该屏幕显示参数， 获取当前页面的页面文档的高度和宽度， 进而根据该页面 文档的高度和宽度设置该页面文档中可变区域的高度和宽度， 并调整页面文 档中固定区域的位置， 从而实现了在不同分辨率的屏幕中、 不同类型浏览器 以及不同大小的浏览窗口中， 显示相同的页面内容， 方便用户查看页面内容， 提高了用户体验。
通过以上的实施方式的描述， 所属领域的技术人员可以清楚地了解到本 发明可借助软件加必需的通用硬件的方式来实现， 当然也可以通过硬件， 但 很多情况下前者是更佳的实施方式。 基于这样的理解， 本发明的技术方案本 质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来， 该 计算机软件产品存储在可读取的存储介质中， 如计算机的软盘， 硬盘或光盘 等， 包括若干指令用以使得一台计算机设备（可以是个人计算机， 服务器， 或者网络设备等）执行本发明各个实施例所述的方法。
以上所述， 仅为本发明的具体实施方式， 但本发明的保护范围并不局限 于此， 任何熟悉本技术领域的技术人员在本发明揭露的技术范围内， 可轻易 想到变化或替换， 都应涵盖在本发明的保护范围之内。 因此， 本发明的保护
WO 2012/024979 范围应以所述权利要求的保护范围为准,
Claims
权 利 要求 书
1、 一种页面布局自适应方法， 其特征在于， 包括：
获取屏幕显示参数， 所述屏幕显示参数为以下参数中的至少一个参数， 该 参数包括： 屏幕分辨率、 浏览器的窗口大小以及用户当前使用浏览器的类型； 根据所述屏幕显示参数获取当前页面的页面文档的高度和宽度；
根据所述页面文档的高度和宽度以及所述页面文档中固定区域的高度和宽 度， 设置所述页面文档中可变区域的高度和宽度；
调整所述页面文档中固定区域的位置。
1、 根据权利要求 1所述的方法， 其特征在于， 当所述屏幕显示参数中包含 屏幕分辨率时， 所述根据所述屏幕显示参数获取当前页面的页面文档的高度和 宽度， 包括：
根据所述屏幕显示参数计算所述当前浏览器窗口的高度和宽度；
获取所述当前浏览器窗口中地址栏、 菜单栏和状态栏的高度之和、 宽度之 和；
将所述当前浏览器窗口的高度和宽度分别减去所述高度之和、 所述宽度之 和， 得到所述页面文档的高度和宽度。
3、 根据权利要求 1所述的方法， 其特征在于， 当所述屏幕显示参数中包含 浏览器的窗口大小时， 所述根据所述屏幕显示参数获取当前页面的页面文档的 高度和宽度， 包括：
获取所述当前浏览器窗口中地址栏、 菜单栏和状态栏的高度之和、 宽度之 和；
将所述当前浏览器窗口的高度和宽度分别减去所述高度之和、 所述宽度之 和， 得到所述页面文档的高度和宽度。
4、 根据权利要求 1所述的方法， 其特征在于， 当所述屏幕显示参数中包括 所述用户当前使用浏览器的类型时， 所述根据所述屏幕显示参数获取当前页面 的页面文档的高度和宽度， 包括：
根据所述浏览器的类型确定与所述浏览器的类型对应的页面布局中所包含
元素的样式参数；
根据所述元素的样式参数获取当前页面的页面文档的高度和宽度。
5、 根据权利要求 1所述的方法， 其特征在于， 所述根据所述页面文档的高 度和宽度以及所述页面文档中固定区域的高度和宽度， 设置所述页面文档中可 变区域的高度和宽度， 包括：
获取所述页面文档中固定区域的高度和宽度；
将所述页面文档的高度和宽度分别减去所述页面文档中固定区域的高度和 宽度， 得到所述页面文档中可变区域的高度和宽度；
按照所述得到所述页面文档中可变区域的高度和宽度， 设置所述页面文档 中可变区域的高度和宽度。
6、 一种页面布局自适应装置， 其特征在于， 包括：
第一获取单元， 用于获取屏幕显示参数， 所述屏幕显示参数为以下参数中 的至少一个参数， 该参数包括： 屏幕分辨率、 浏览器的窗口大小以及用户当前 使用浏览器的类型；
第二获取单元， 用于根据所述第一获取单元获取的所述屏幕显示参数， 获 取当前页面的页面文档的高度和宽度；
设置单元， 用于根据所述第二获取单元获取的所述页面文档的高度和宽度 以及所述页面文档中固定区域的高度和宽度， 设置所述页面文档中可变区域的 高度和宽度；
调整单元， 用于调整所述页面文档中固定区域的位置。
7、 根据权利要求 6所述的装置， 其特征在于， 当所述第一获取单元获取的 屏幕显示参数中包含屏幕分辨率时， 所述第二获取单元包括：
第一计算模块， 用于根据所述屏幕显示参数计算所述当前浏览器窗口的高 度和宽度；
第一获取模块， 用于获取所述第一计算模块得到的所述当前浏览器窗口中 地址栏、 菜单栏和状态栏的高度之和、 宽度之和；
第二计算模块， 用于将所述第一计算模块得到的所述当前浏览器窗口的高
度和宽度， 分别减去所述第一获取模块获取的所述高度之和、 所述宽度之和， 得到所述页面文档的高度和宽度。
8、 根据权利要求 6所述的装置， 其特征在于， 当所述第一获取单元获取的 屏幕显示参数中包含浏览器的窗口大小时， 所述第二获取单元包括：
第二获取模块， 用于获取所述当前浏览器窗口中地址栏、 菜单栏和状态栏 的高度之和、 宽度之和；
第三计算模块， 用于将所述当前浏览器窗口的高度和宽度分别减去所述第 二获取模块获取的所述高度之和、 所述宽度之和， 得到所述页面文档的高度和 宽度。
9、 根据权利要求 6所述的装置， 其特征在于， 当所述第一获取单元获取的 所述屏幕显示参数中包括所述用户当前使用浏览器的类型时， 所述第二获取单 元包括：
确定模块， 用于根据所述浏览器的类型确定与所述浏览器的类型对应的页 面布局中所包含元素的样式参数；
第三获取模块， 用于根据所述确定模块确定的所述元素的样式参数获取当 前页面的页面文档的高度和宽度。
10、 根据权利要求 6所述的装置， 其特征在于， 所述设置单元包括： 第二获取模块， 用于获取所述页面文档中固定区域的高度和宽度； 第三计算模块， 用于将所述第二计算模块计算得到的所述页面文档的高度 和宽度， 分别减去所述页面文档中固定区域的高度和宽度， 得到所述页面文档 中可变区域的高度和宽度；
设置模块， 用于按照所述第三计算模块计算得到所述页面文档中可变区域 的高度和宽度， 设置所述页面文档中可变区域的高度和宽度。
Applications Claiming Priority (2)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201010261903.7 | 2010-08-24 | ||
| CN2010102619037A CN101908076B (zh) | 2010-08-24 | 2010-08-24 | 页面布局自适应方法及装置 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| WO2012024979A1 true WO2012024979A1 (zh) | 2012-03-01 |
Family
ID=43263535
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| PCT/CN2011/076503 WO2012024979A1 (zh) | 2010-08-24 | 2011-06-28 | 页面布局自适应方法及装置 |
Country Status (2)
| Country | Link |
|---|---|
| CN (1) | CN101908076B (zh) |
| WO (1) | WO2012024979A1 (zh) |
Families Citing this family (45)
| 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 | 北京国双科技有限公司 | 图形界面的排列显示方法及装置 |
| CN105335154B (zh) * | 2015-10-19 | 2019-09-20 | 沈文策 | 一种面向多终端的自适应网页布局方法及装置 |
| 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 | 环球雅途集团有限公司 | 一种自适应屏幕尺寸的排版显示方法 |
| 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 | 山东英信计算机技术有限公司 | 一种智能配置监控首页的方法、装置、设备及存储介质 |
| CN112785659A (zh) * | 2021-01-28 | 2021-05-11 | 特赞（上海）信息科技有限公司 | 企业案例素材图片检测方法、装置、设备和存储介质 |
Citations (5)
| 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 |
| EP1255186A2 (en) * | 2001-04-30 | 2002-11-06 | Nokia Corporation | Web browser user interface for low-resolution displays |
| CN101477564A (zh) * | 2009-01-21 | 2009-07-08 | 北京千家悦网络科技有限公司 | 一种在窄屏幕设备上显示宽网页的智能布局方法 |
| CN101727495A (zh) * | 2009-12-31 | 2010-06-09 | 优视科技有限公司 | 一种用于移动通讯设备终端的网页页面缩放管理系统及其应用方法 |
| CN101908076A (zh) * | 2010-08-24 | 2010-12-08 | 北京世纪高通科技有限公司 | 页面布局自适应方法及装置 |
Family Cites Families (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| JP4250540B2 (ja) * | 2004-01-30 | 2009-04-08 | キヤノン株式会社 | レイアウト調整方法および装置およびレイアウト調整プログラム |
| US9116593B2 (en) * | 2007-07-06 | 2015-08-25 | Qualcomm Incorporated | Single-axis window manager |
| CN101146098A (zh) * | 2007-11-01 | 2008-03-19 | 武汉虹旭信息技术有限责任公司 | 一种基于网络脚本语言的页面布局方法 |
| CN101241416B (zh) * | 2008-02-21 | 2010-06-16 | 北大方正集团有限公司 | 一种适应屏幕分辨率的电子读物处理方法及系统 |
-
2010
- 2010-08-24 CN CN2010102619037A patent/CN101908076B/zh active Active
-
2011
- 2011-06-28 WO PCT/CN2011/076503 patent/WO2012024979A1/zh active Application Filing
Patent Citations (5)
| 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 |
| EP1255186A2 (en) * | 2001-04-30 | 2002-11-06 | Nokia Corporation | Web browser user interface for low-resolution displays |
| CN101477564A (zh) * | 2009-01-21 | 2009-07-08 | 北京千家悦网络科技有限公司 | 一种在窄屏幕设备上显示宽网页的智能布局方法 |
| CN101727495A (zh) * | 2009-12-31 | 2010-06-09 | 优视科技有限公司 | 一种用于移动通讯设备终端的网页页面缩放管理系统及其应用方法 |
| CN101908076A (zh) * | 2010-08-24 | 2010-12-08 | 北京世纪高通科技有限公司 | 页面布局自适应方法及装置 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN101908076B (zh) | 2012-09-12 |
| CN101908076A (zh) | 2010-12-08 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| WO2012024979A1 (zh) | 页面布局自适应方法及装置 | |
| US20200125789A1 (en) | Dynamic zooming of content with overlays | |
| US8522142B2 (en) | Adaptive media player size | |
| TWI540501B (zh) | 應用程式介面顯示控制方法及裝置 | |
| US20170220220A1 (en) | Advertisement generation apparatus and terminal device | |
| WO2015180433A1 (zh) | 自适应调整的界面流式布局显示的方法和系统 | |
| CA2781997C (en) | Recently viewed items display area | |
| US20140215308A1 (en) | Web Page Reflowed Text | |
| US20160275054A1 (en) | Webpage display method and device | |
| US20160217143A1 (en) | Method and device for displaying browser resources and computer readable storage medium | |
| WO2012159563A1 (zh) | 基于移动终端的网页排版方法和装置 | |
| CN102364460B (zh) | 基于移动终端的页面自动放大方法和系统 | |
| US10204079B2 (en) | Method and apparatus for displaying an extended function information area | |
| WO2012152080A1 (zh) | 在用户终端浏览器上按需显示图片的方法及装置 | |
| TWI545450B (zh) | 瀏覽器顯示子頁面的處理方法及瀏覽器 | |
| WO2014000346A1 (zh) | 一种网页自适应布局方法及装置 | |
| JP2012069014A5 (zh) | ||
| JP2002132410A (ja) | Ｗｗｗブラウザ | |
| CN108132716B (zh) | 浏览页的调整方法、设备及计算机可读存储介质 | |
| CN105389308A (zh) | 网页的显示处理方法及装置 | |
| JP2011095962A (ja) | 情報処理装置、情報処理方法、及びプログラム | |
| CN104715053B (zh) | 网页内容显示的实现方法、装置及浏览器 | |
| JP6203140B2 (ja) | 表示プログラム、端末装置、表示方法及び配信装置 | |
| US10846360B2 (en) | Display control apparatus and display control method | |
| KR100575437B1 (ko) | 단말기 모니터 영상의 해상도 조절 장치 및 그 방법 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| 121 | Ep: the epo has been informed by wipo that ep was designated in this application |
Ref document number: 11819354 Country of ref document: EP Kind code of ref document: A1 |
|
| WWE | Wipo information: entry into national phase |
Ref document number: 1201001918 Country of ref document: TH |
|
| NENP | Non-entry into the national phase |
Ref country code: DE |
|
| 32PN | Ep: public notification in the ep bulletin as address of the adressee cannot be established |
Free format text: NOTING OF LOSS OF RIGHTS PURSUANT TO RULE 112(1) EPC (EPO FORM 1205N DATED 020513) |
|
| 122 | Ep: pct application non-entry in european phase |
Ref document number: 11819354 Country of ref document: EP Kind code of ref document: A1 |