网页页面自适应调整方法和系统的制作方法_2

文档序号:8935016阅读:来源:国知局
该移动设备的网页页面。该网页页面自适应调整方法,无需针对不同的移动设备编写不同的网页,仅需一个页面就可适用所有的设备,自适应能力强,简化了网页开发的难度。且由于只需一个页面,降低了后期网页维护成本。
[0050]在另一具体的实施方式中,在步骤S102,还包括:获取移动终端的当前屏幕显示模式。
[0051]移动终端的当前屏幕显示模式包括横屏显示和竖屏显示。横屏显示和竖屏显示根据移动终端自带的重力感应器的感应结果进行切换,在具体的实施方式中,网页页面调整程序可直接读取系统中的屏幕旋转的值来获取当前屏幕显示程序,以安卓系统的移动终端为例,可读取android: screenOrientat1n的值来获取当前屏幕显示模式。
[0052]在本实施方式中,步骤S106还包括:根据移动终端的当前屏幕显示模式获取所述请求网页页面的高宽比。
[0053]终端具有两种显示模式,当获取到用户所使用的移动终端的设备参数后,再获取该移动终端的当前屏幕显示模式,即横屏显示模式或竖屏显示模式。
[0054]当前屏幕显示模式的不同,网页页面的显示的高宽比也不相同。可预先在位置数据库中对不同设备参数的移动设备的当前屏幕显示模式设置不同的高宽比。根据获取的设备参数和当前屏幕显示模式查找数据库,获取该移动设备的网页页面在当前显示模式下的高宽比。
[0055]根据网页页面的每个元素的坐标确定元素的位置,并将每个元素调整成与属性要求的高度和宽度,从而形成网页页面。再根据确定的高宽比将网页页面调整成适配的页面。
[0056]本实施方式的网页页面自适应调整方法,能够根据移动终端的当前显示模式自动调整成与当前显示模式适应的高宽比的网页页面,因此,该网页页面自适应调整方法,能够适应移动终端的横屏显示模式和竖屏显示模式,自适应调整以适应不同显示模式,从而提高了用户的体验。
[0057]在其它的实施方式中,移动终端的设备参数可以为移动终端的设备型号、屏幕尺寸和/或分辨率。
[0058]在其中一种实施方式中,步骤S106包括:根据所述位置数据库获取与所述移动终端的设备型号对应的每个所述元素的坐标和属性。可根据位置数据库获取与移动终端的设备型号获取每个元素的坐标和属性。在另一种实施方式中,步骤S106包括:根据所述位置数据库获取与所述移动终端的屏幕尺寸和/或分辨率对应的每个所述元素的坐标和属性。可根据位置数据库获取与移动终端的屏幕尺寸和/或分辨率获取每个元素的坐标和属性。
[0059]具体的,通过在位置数据库中预先建立移动终端的设备型号与每个元素的坐标和属性的映射关系,或者通过在位置数据库中建立移动终端的屏幕尺寸和/或分辨率与每个元素的坐标和属性的映射关系。当根据该网页页面调整程序获取到用户所使用的移动终端的设备型号、屏幕尺寸或分辨率时,通过查询数据库,可获取匹配的每个元素的坐标和属性。
[0060]在其中的一种实施方式中,在步骤S102,还包括步骤:
[0061]判断终端是否为移动终端。
[0062]若是,则根据所述网页页面调整程序获取移动终端的设备参数。
[0063]在本实施方式中,在网页页面调整程序在终端上运行后,获取移动终端的设备类型,并判断该终端是否为移动终端,当判定为移动终端时,才执行S102之后的步骤,S卩,只有当终端为移动终端时,才需要自适应对网页页面做自适应调整。若判定为PC终端,则无需进行自适应调整,因为,通常网页是针对PC端设计的。
[0064]该网页页面自适应调整方法,一方面,无需针对不同的移动设备编写不同的网页,仅需一个页面就可适用所有的设备,自适应能力强,简化了网页开发的难度。且由于只需一个页面,降低了后期网页维护成本。另一方面,能够根据移动终端的当前显示模式自动调整成与当前显示模式适应的高宽比的网页页面。
[0065]本发明还提供一种网页页面自适应调整系统,如图3所示,包括:
[0066]网页元素获取模块100,用于获取请求网页的网页内容中的网页元素。
[0067]具体的,网页元素获取模块100,包括:
[0068]网页内容获取单元,用于获取请求网页的网页内容。
[0069]用户通过移动设备在应用程序的浏览器界面中,通过输入网址或点击链接的方式,向对应的服务器发送访问请求,并从该服务器获取网页内容。在具体的实施方式中,网页内容可包括网页的HTML文件。
[0070]解析模块单元,用于解析网页内容获取网页的元素。
[0071]具体的,可通过对网页的HTML文件进行解析,从而得到网页内容中的每个元素,即网页的控件。在具体的实施方式中,网页的元素可以为图片、文字、视频等。
[0072]网页页面调整程序模块101,用于获取移动终端的设备参数。
[0073]该网页页面调整程序具体的可以为JS代码或CSS代码。可以将JS代码或CSS代码插入网页地址的尾部,在网页加载完成之后,该JS代码或CSS代码被终端的浏览器调用而开始运行。
[0074]通过在移动设备上运行的JS代码或CSS代码,获取该移动设备的设备参数。在具体的实施方式中,设备参数可包括移动设备的型号、屏幕尺寸和分辨率等。
[0075]位置数据库102,位置数据库包括所述请求网页的所述网页元素与所述移动终端的设备参数对应的布局位置。
[0076]预先在位置数据库中设置移动终端的设备参数与请求网页的网页元素的对应的布局位置,即对于不同的设备参数,预先设置请求网页的网页元素的布局位置。
[0077]调整模块103,用于根据所述移动终端的设备参数及所述位置数据库获取每个所述网页元素的坐标和属性,以形成适应所述移动终端设备的页面。
[0078]根据获取的移动终端的设备参数及位置数据库获取每个元素的坐标和属性,根据每个元素的坐标确定元素的位置,并将每个元素调整成与属性要求的高度和宽度,从而形成网页页面并显示在移动设备上。
[0079]该网页页面自适应调整系统,对于不同设备参数预先设置每个网页元素的布局位置,根据网页页面调整程序,能够自动获取不同移动设备的设备参数,从而根据设备参数匹配对应的每个元素的坐标和属性,根据确定的每个元素的坐标和属性形成自适应该移动设备的网页页面。该网页页面自适应调整方法,无需针对不同的移动设备编写不同的网页,仅需一个页面就可适用所有的设备,自适应能力强,简化了网页开发的难度。且由于只需一个页面,降低了后期网页维护成本。
[0080]在另一具体的实施方式中,网页页面调整程序101,还用于获取所述移动终端的当前屏幕显示模式。
[0081]移动终端的当前屏幕显示模式包括横屏显示和竖屏显示。横屏显示和竖屏显示根据移动终端自带的重力感应器的感应结果进行切换,在具体的实施方式中,网页页面调整程序可直接读取系统中的屏幕旋转的值来获取当前屏幕显示程序,以安卓系统的移动终端为例,可读取android: screenOrientat1n的值来获取当前屏幕显示模式。
[0082]本实施方式中,调整模块103,还用于根据移动终端的当前屏幕显示模式获取所述请求网页页面的高宽比。
[0083]终端具有两种显示模式,当获取到用户所使用的移动终端的设备参数后,再获取该移动终端的当前屏幕显示模式,即横屏显示模式或竖屏显示模式。
[0084]当前屏幕显示模式的不同,网页页面的显示的高宽比也不相同。可预先在位置数据库中对不同设备参数的移动设备的当前屏幕显示
当前第2页1 2 3 
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1