页面布局自适应方法及装置制造方法及图纸

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

【技术实现步骤摘要】

本专利技术涉及网页设计领域，尤其涉及一种页面布局自适应方法及装置。
技术介绍
电子地图网站的主要功能，在于将用户关心的信息结合地图的方式展现出来，以 更直观的方式为用户提供诸如购物、交通出行等生活信息服务。但是，在显示地图页面时， 经常会遇到同一个地图页面，在不同分辨率的显示器中、不同大小浏览器窗口中以及不同 类型浏览器中，显示的地图页面效果不同的情况，因此，如何实现地图页面的自适应，即如 何将同一个地图页面在不同分辨率的显示器中、不同大小的浏览器窗口中以及不同类型的 浏览器中，显示相同的地图页面效果，成为衡量该地图网站质量好坏的重要指标。目前较通用的实现页面布局自适应的方法，主要是通过调整页面元素的百分比相 对高度和宽度实现，该种方案包括当元素的父元素高度和宽度属性发生变化时，其相应属 性的绝对值也跟着变化，同时，保留页面级别的滚动条，以保证浏览器的窗口大小发生变化 时页面元素不至于发生变形而导致布局混乱。但是，在专利技术人实施上述方案时，由于页面中存在页面级的滚动条，地图大小不能 自动伸缩，当窗口变小时，不能与之前窗口显示相同的内容，用户必须要手动滑动滚动条才 能看到地图页面的全部内容，使得用户查看信息很不方便，用户体验效果很差。
技术实现思路
本专利技术的实施例提供一种页面布局自适应方法及装置，能够在不同分别率的屏幕 中、不同类型浏览器以及不同大小浏览器窗口中，显示相同的页面内容，方便用户查看页面 内容，提高了用户体验。为达到上述目的，本专利技术的实施例采用如下技术方案一种页面布局自适应方法，包括获取屏幕显示参数，所述屏幕显示参数为以下参数中的至少一个参数，该参数包 括屏幕分辨率、浏览器的窗口大小以及用户当前使用浏览器的类型；根据所述屏幕显示参数获取当前页面的页面文档的高度和宽度；根据所述页面文档的高度和宽度以及所述页面文档中固定区域的高度和宽度，设 置所述页面文档中可变区域的高度和宽度；调整所述页面文档中固定区域的位置。一种页面布局自适应装置，包括第一获取单元，用于获取屏幕显示参数，所述屏幕显示参数为以下参数中的至少 一个参数，该参数包括屏幕分辨率、浏览器的窗口大小以及用户当前使用浏览器的类型；第二获取单元，用于根据所述第一获取单元获取的所述屏幕显示参数，获取当前 页面的页面文档的高度和宽度；设置单元，用于根据所述第二获取单元获取的所述页面文档的高度和宽度以及所4述页面文档中固定区域的高度和宽度，设置所述页面文档中可变区域的高度和宽度；调整单元，用于调整所述页面文档中固定区域的位置。本专利技术实施例提供的技术方案，在显示当前页面时，先获取屏幕分辨率、浏览器的 窗口大小以及用户当前使用浏览器的类型中的至少一个屏幕显示参数，并根据该屏幕显示 参数，获取当前页面的页面文档的高度和宽度，进而根据该页面文档的高度和宽度设置该 页面文档中可变区域的高度和宽度，并调整页面文档中固定区域的位置，从而实现了在不 同分别率的屏幕中、不同类型浏览器以及不同大小浏览器窗口中，显示相同的页面内容，方 便用户查看页面内容，提高了用户体验。附图说明为了更清楚地说明本专利技术实施例或现有技术中的技术方案，下面将对实施例或现 有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本 专利技术的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以 根据这些附图获得其他的附图。图1为本专利技术实施例1中页面布局自适应方法的流程图；图2为本专利技术实施例2中页面的页面文档布局结构示意图；图3为本专利技术实施例2中页面布局自适应方法的流程图；图4为本专利技术实施例3中页面布局自适应方法的流程图；图5为本专利技术实施例4中页面布局自适应方法的流程图；图6为本专利技术实施例5中一种页面布局自适应装置的组成框图；图7为本专利技术实施例5中另一种页面布局自适应装置的组成框图；图8为本专利技术实施例5中另一种页面布局自适应装置的组成框图；图9为本专利技术实施例5中另一种页面布局自适应装置的组成框图；图10为本专利技术实施例5中另一种页面布局自适应装置的组成框图。具体实施例方式下面将结合本专利技术实施例中的附图，对本专利技术实施例中的技术方案进行清楚、完 整地描述，显然，所描述的实施例仅仅是本专利技术一部分实施例，而不是全部的实施例。基于 本专利技术中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他 实施例，都属于本专利技术保护的范围。实施例1本专利技术实施例提供一种页面布局自适应方法，如图1所示，该方法包括101、获取屏幕显示参数，所述屏幕显示参数为以下参数中的至少一个参数，该参 数包括屏幕分辨率、浏览器的窗口大小以及用户当前使用浏览器的类型。其中，当获取的是屏幕分辨率时，可以在当加载当前页面时获取；当获取的是浏览 器的窗口大小时，可以在加载页面时获取浏览器的窗口大小，也可以在浏览器的窗口大小 发生变化时获取所述浏览器的窗口大小；当获取的是用户当前使用浏览器的类型时，可以 在打开浏览器时获取所述用户当前使用浏览器的类型。102、根据所述屏幕显示参数获取当前页面的页面文档的高度和宽度。5其中，所述根据所述屏幕显示参数获取当前页面的页面文档的高度和宽度，可以 包括当所述屏幕显示参数为屏幕分辨率、浏览器的窗口大小中的至少一个参数时，根 据所述屏幕显示参数获取当前页面的页面文档的高度和宽度，包括根据所述屏幕显示参 数计算所述当前浏览器窗口的高度和宽度；获取所述当前浏览器窗口中地址栏、菜单栏和 状态栏的高度之和、宽度之和；将所述当前页面的高度和宽度分别减去所述高度之和、所述 宽度之和，得到所述页面文档的高度和宽度。当所述屏幕显示参数中包括所述用户当前使用浏览器的类型时，所述根据所述屏 幕显示参数获取当前页面的页面文档的高度和宽度，包括根据所述浏览器的类型确定与 所述浏览器的类型对应的页面布局中所包含元素的样式参数；根据所述元素的样式参数获 取当前页面的页面文档的高度和宽度。103、根据所述页面文档的高度和宽度以及所述页面文档中固定区域的高度和宽 度，设置所述页面文档中可变区域的高度和宽度。其中，所述根据所述页面文档的高度和宽度以及所述页面文档中固定区域的高度 和宽度，设置所述页面文档中可变区域的高度和宽度，可以包括获取所述页面文档中固定区域的高度和宽度；将所述页面文档的高度和宽度分 别减去所述页面文档中固定区域的高度和宽度，得到所述页面文档中可变区域的高度和宽 度；按照所述得到所述页面文档中可变区域的高度和宽度，设置所述页面文档中可变区域 的高度和宽度。104、调整所述页面文档中固定区域的位置。其中，所述调整所述页面文档中固定区域的位置，包括确定所述固定区域的水平 位置和垂直位置，并根据所述确定的水平位置和垂直位置调整所述页面文档中固定区域的 位置；其中，确定页面文档中与所述可变区域相邻的右侧固定区域的水平位置时，可以 通过确定该固定区域的左侧水平位置确定，而确定该固定区域的左侧水平位置，可以通过 以下公式确定，该公式为左侧水平位置=与所述可变区域相邻的左侧固定区域的宽度+ 可变区域的宽度；该左侧水平位置的单位为屏幕像素(PX)。确定页面文档中与所述可变区域相邻的下方固定区域的垂直位置时，可以通过确 定该固定区域的上端的垂直位置确定，而确定该固定区域的上端的垂直位置本文档来自技高网...

【技术保护点】
一种页面布局自适应方法，其特征在于，包括：获取屏幕显示参数，所述屏幕显示参数为以下参数中的至少一个参数，该参数包括：屏幕分辨率、浏览器的窗口大小以及用户当前使用浏览器的类型；根据所述屏幕显示参数获取当前页面的页面文档的高度和宽度；根据所述页面文档的高度和宽度以及所述页面文档中固定区域的高度和宽度，设置所述页面文档中可变区域的高度和宽度；调整所述页面文档中固定区域的位置。

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

【专利技术属性】
技术研发人员：蒋晟，薛明，郑小华，
申请(专利权)人：北京世纪高通科技有限公司，
类型：发明
国别省市：11[中国|北京]