网页页面自适应调整方法和系统的制作方法
【技术领域】
[0001]本发明涉移动互联网技术领域，特别是涉及一种网页页面自适应调整方法和系统。
【背景技术】
[0002]随着移动终端的普及和互联网技术的发展，越来越多的人喜欢用移动设备上网。不同品牌不同型号的移动终端屏幕尺寸不一，为使网页页面适应不同屏幕尺寸的移动终端，现有的方法是放大或者缩小网页页面来适应不同屏幕尺寸的移动终端，但这种解决方式会降低网页的分辨率，网页显示效果差，用户体验度差，而且必须针对具体设备或屏幕编写单独的网页，不能实现一个页面适用于所有设备，这样使得编程难度增大，后期程序维护开销增加。
【发明内容】
[0003]基于此，有必要的提供一种显示效果好且维护成本低的网页页面自适应调整方法和系统。
[0004]一种网页页面自适应调整方法，包括:
[0005]获取请求网页的网页内容中的网页元素；
[0006]设置网页页面调整程序，用于获取移动终端的设备参数；
[0007]预设位置数据库，所述位置数据库包括所述请求网页的所述网页元素与所述移动终端的设备参数对应的布局位置；
[0008]根据所述移动终端的设备参数及所述位置数据库获取每个所述网页元素的坐标和属性，以形成适应所述移动终端设备的页面。
[0009]在其中一种实施方式中，所述设置网页页面调整程序，用于获取移动终端的设备参数的步骤，还包括:
[0010]获取所述移动终端的当前屏幕显示模式，所述屏幕显示模式包括横屏显示和竖屏显不;以及
[0011]所述根据所述移动终端的设备参数及所述位置数据库获取每个所述网页元素的坐标和属性的步骤还包括:
[0012]根据移动终端的当前屏幕显示模式获取所述请求网页页面的高宽比。
[0013]在其中一种实施方式中，所述设备参数包括移动终端的设备型号，所述根据所述移动终端的设备参数及所述位置数据库获取每个所述元素的坐标和属性的步骤包括:
[0014]根据所述位置数据库获取与所述移动终端的设备型号对应的每个所述元素的坐标和属性。
[0015]在其中一种实施方式中，所述设备参数还包括屏幕尺寸和/或分辨率；
[0016]所述根据所述移动终端的设备参数及所述位置数据库获取每个所述元素的坐标和属性的步骤包括:
[0017]根据所述位置数据库获取与所述移动终端的屏幕尺寸和/或分辨率对应的每个所述元素的坐标和属性。
[0018]在其中一种实施方式中，在所述设置网页页面调整程序，用于获取移动终端的设备参数的步骤中，还包括步骤:
[0019]判断终端是否为移动终端；
[0020]若是，则根据所述网页页面调整程序获取所述移动终端的设备参数。
[0021]—种网页页面自适应调整系统，包括:
[0022]网页元素获取模块，用于获取请求网页的网页内容中的网页元素；
[0023]网页页面调整程序，用于获取移动终端的设备参数；
[0024]位置数据库，所述位置数据库包括所述请求网页的所述网页元素与所述移动终端的设备参数对应的布局位置；
[0025]调整模块，用于根据所述移动终端的设备参数及所述位置数据库获取每个所述网页元素的坐标和属性，以形成适应所述移动终端设备的页面。
[0026]在其中一种实施方式中，所述网页页面调整程序，还用于获取所述移动终端的当前屏幕显示模式，所述屏幕显示模式包括横屏显示和竖屏显示；
[0027]所述调整模块，还用于根据移动终端的当前屏幕显示模式获取所述请求网页页面的高宽比。
[0028]在其中一种实施方式中，所述设备参数包括移动终端的设备型号，所述调整模块，具体用于根据所述位置数据库获取与所述移动终端的设备型号获取对应的每个所述元素的坐标和属性。
[0029]在其中一种实施方式中，所述设备参数还包括屏幕尺寸和/或分辨率；所述调整模块，具体用于根据所述位置数据库获取与所述移动终端的屏幕尺寸和/或分辨率获取对应的每个所述元素的坐标和属性。
[0030]在其中一种实施方式中，所述网页页面调整程序，还用于判断终端是否为移动终端；并在判定结果为是时，根据所述网页页面调整程序获取所述移动终端的设备参数。
[0031]该网页页面自适应调整方法，对于不同设备参数预先设置网页元素布局位置，根据网页页面调整程序，能够自动获取不同移动设备的设备参数，从而根据设备参数匹配对应的每个元素的坐标和属性，根据确定的每个元素的坐标和属性形成自适应该移动设备的网页页面。该网页页面自适应调整方法，无需针对不同的移动设备编写不同的网页，仅需一个页面就可适用所有的设备，自适应能力强，简化了网页开发的难度。且由于只需一个页面，降低了后期网页维护成本。
【附图说明】
[0032]图1为一种实施方式的网页页面自适应调整方法的流程图；
[0033]图2为网页页面自适应调整方法的时序图；
[0034]图3为一种实施方式的网页页面自适应调整系统的功能模块图示意图。
【具体实施方式】
[0035]如图1和图2所示，一种网页页面自适应调整方法，包括步骤:
[0036]SlOO:获取请求网页的网页内容中的网页元素。
[0037]具体的，步骤SlOO包括:
[0038]S1001:获取请求网页的网页内容。
[0039]用户通过移动设备在应用程序的浏览器界面中，通过输入网址或点击链接的方式，向对应的服务器发送访问请求，并从该服务器获取网页内容。在具体的实施方式中，网页内容可包括网页的HTML文件。
[0040]S1002:解析网页内容获取网页元素。
[0041]具体的，可通过对网页的HTML文件进行解析，从而得到网页内容中的每个元素，即网页的控件。在具体的实施方式中，网页的元素可以为图片、文字、视频等。
[0042]S102:设置网页页面调整程序，用于获取移动终端的设备参数。
[0043]该网页页面调整程序具体的可以为JS代码或CSS代码。可以将JS代码或CSS代码插入网页地址的尾部，在网页加载完成之后，该JS代码或CSS代码被终端的浏览器调用而开始运行。
[0044]通过在移动设备上运行的JS代码或CSS代码，获取该移动设备的设备参数。在具体的实施方式中，设备参数可包括移动设备的型号、屏幕尺寸和分辨率等。
[0045]S104:预设位置数据库，位置数据库包括请求网页的网页元素与移动终端的设备参数对应的布局位置。
[0046]预先在位置数据库中设置移动终端的设备参数与请求网页的网页元素的对应的布局位置，即对于不同的设备参数，预先设置请求网页的网页元素的布局位置。
[0047]S106:根据移动终端的设备参数及位置数据库获取每个网页元素的坐标和属性，以形成适应移动终端设备的页面。
[0048]根据获取的移动终端的设备参数及位置数据库获取每个元素的坐标和属性，根据每个元素的坐标确定元素的位置，并将每个元素调整成与属性要求的高度和宽度，从而形成网页页面并显示在移动设备上。
[0049]该网页页面自适应调整方法，对于不同设备参数预先设置网页元素布局位置，根据网页页面调整程序，能够自动获取不同移动设备的设备参数，从而根据设备参数匹配对应的每个元素的坐标和属性，根据确定的每个元素的坐标和属性形成自适应