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

本发明专利技术公开一种页面布局自适应方法及装置，本发明专利技术实施例插入用于调整页面布局的程序代码；基于插入的所述程序代码，获取移动终端的屏幕显示宽度；根据获取的屏幕显示宽度，按照预设比例调整网页的页面显示宽度；根据所述页面显示宽度，调整组成网页页面的各元素的显示宽度，同时设置所述元素的显示位置为浮动显示；具有不需要重新设计修改网页即可使网页页面自适应移动终端显示屏幕的有益效果，且丝毫不影响原始网页的显示效果，提高了人机的可交互性；另外，由于仅需要插入对应的JS代码即可实现，节约了大量的人力；同时，若需要更改对应的视觉效果只需更改对应地代码即可，成本较低且便于后期的维护和升级。

【技术实现步骤摘要】
页面布局自适应方法及装置
[0001 ] 本专利技术涉及网页设计领域，尤其涉及一种页面布局自适应方法及装置。
技术介绍
鉴于移动终端的便携性，用户可以使用移动终端随时随地访问网页；受限于移动终端的屏幕尺寸，原始设计出的网页页面在移动终端上显示时的布局与在PC这类终端上显示时的布局有很大不同；而针对每种尺寸的移动终端均重新设计网页是很不现实的，因为移动终端的尺寸有多种且原始网页的数量也很庞大；由此，网页页面能够根据移动终端的显示尺寸自适应地布局页面上的元素便显得尤其重要。目前，某些网站提供了将原始网页转换为手机版或者触屏版的工具，利用该转换工具可以快速的把一个网页移动化，但这种方式能生成的模板格式有限，通常都是“导航+文章列表”的格式，丢失了原网页很多元素，包括背景、颜色、形象、图标、LOGO (商标)、内容、广告等，跟原网页风格几乎完全不同，只有文字和少量图片，而且也不支持JS(JavaSCript，程序语言)等动态效果，比如下拉菜单、弹出菜单等，原网站的广告内容也基本上被去掉了。
技术实现思路
鉴于此，有必要提供一种页面布局自适应方法及装置，以使网页页面能够根据移动终端自适应地布局页面元素。本专利技术实施例公开了一种页面布局自适应方法，包括以下步骤:插入用于调整页面布局的程序代码；基于插入的所述程序代码，获取移动终端的屏幕显示宽度；根据获取的屏幕显示宽度，按照预设比例调整网页的页面显示宽度；根据所述页面显示宽度，调整组成网页页面的各元素的显示宽度，同时设置所述元素的显示位置为浮动显示。优选地，所述插入用于调整页面布局的程序代码的步骤之后、获取移动终端的屏幕显示宽度的步骤之前，还包括:基于插入的所述程序代码，获取终端的类型，识别该终端是否为移动终端；在该终端为移动终端时，执行所述步骤:基于插入的所述程序代码，获取移动终端的屏幕显示宽度。优选地，所述根据获取的屏幕显示宽度，按照预设比例调整网页的页面显示宽度，包括:根据获取的屏幕显示宽度，将网页的页面显示宽度调整为与所述屏幕显示宽度相一致的显示尺寸。优选地，所述调整组成网页页面的各元素的显示宽度，包括:将某一元素的显示宽度调整为该元素对应的父元素的最大显示宽度。优选地，所述获取移动终端的屏幕显示宽度包括:获取移动终端的屏幕分辨率；根据获取的所述屏幕分辨率，获取所述屏幕显示宽度。本专利技术实施例还公开一种页面布局自适应装置，包括:代码插入模块，用于插入用于调整页面布局的程序代码；参数获取模块，用于基于插入的所述程序代码，获取移动终端的屏幕显示宽度；布局调整模块，用于根据获取的屏幕显示宽度，按照预设比例调整网页的页面显示宽度；根据所述页面显示宽度，调整组成网页页面的各元素的显示宽度，同时设置所述元素的显示位置为浮动显示。优选地，所述页面布局自适应装置还包括:类型识别模块，用于基于插入的所述程序代码，获取终端的类型，识别该终端是否为移动终端。优选地，所述布局调整模块还用于:根据获取的屏幕显示宽度，将网页的页面显示宽度调整为与所述屏幕显示宽度相一致的显示尺寸。优选地，所述布局调整模块还用于:将某一元素的显示宽度调整为该元素对应的父元素的最大显示宽度。优选地，所述参数获取模块还用于:获取移动终端的屏幕分辨率；根据获取的所述屏幕分辨率，获取所述屏幕显示宽度。本专利技术实施例获取移动终端的屏幕显示宽度；根据获取的屏幕显示宽度，按照预设比例调整网页的页面显示宽度；根据所述页面显示宽度，调整组成网页页面的各元素的显示宽度，同时设置所述元素的显示位置为浮动显示；相较于现有技术中，特地针对移动终端设计网页，或者利用转换工具统一转换各种类型的网页的方法，本专利技术实施例具有不需要重新设计修改网页即可使网页页面自适应移动终端显示屏幕的有益效果，且丝毫不影响原始网页的显示效果。【附图说明】图1是本专利技术页面布局自适应方法第一实施例流程示意图；图2是本专利技术页面布局自适应方法第二实施例流程示意图；图3是本专利技术页面布局自适应装置第一实施例功能模块示意图；图4是本专利技术页面布局自适应装置第二实施例功能模块示意图。本专利技术实施例目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。【具体实施方式】以下结合说明书附图及具体实施例进一步说明本专利技术的技术方案。应当理解，此处所描述的具体实施例仅仅用以解释本专利技术，并不用于限定本专利技术。[0041 ] 图1是本专利技术页面布局自适应方法第一实施例流程示意图；如图1所示，本专利技术页面布局自适应方法包括以下步骤:步骤SO1、插入用于调整页面布局的JS代码；本专利技术实施例中，页面布局自适应方法是通过部署的JS代码实现的。在具体的应用场景中，承载JS代码的设备如页面布局自适应装置可以部署在终端和服务器之间；承载JS代码的设备首先对http协议做代理，然后，对所需要在移动终端上显示的网页进行重组，且在该网页处于压缩状态时，对该网页进行解压；然后，在html页面的合适位置插入一段JS代码脚本，这里所述的合适位置指的是，插入的JS代码只要不打乱重组后该网页对应的链接地址即可；在一优选的方案中，可以将该JS代码插入网页地址的尾部，这样不影响该网页的加载速度。在网页加载完成后，插入的JS代码基于终端上的浏览器被终端调用并开始运行。JS代码在终端上运行，使加载的网页能够自适应终端的显示屏幕。 步骤S02、基于插入的JS代码，获取移动终端的屏幕显示宽度；本实施例中，由移动终端上运行的JS代码来获取移动终端的屏幕显示宽度；移动终端上运行的JS代码获取该移动终端的屏幕显示宽度可以通过以下方式实现:获取移动终端的型号，根据移动终端的型号查找数据库，调用与该型号对应的该移动终端的屏幕显示宽度；或者，获取移动终端的屏幕分辨率，根据获取的移动终端的屏幕分辩率，获取移动终端的屏幕显示宽度；或者，直接读取该移动终端所使用的显示屏的规格参数，获取该移动终端的屏幕显示宽度等。步骤S03、根据获取的屏幕显示宽度，按照预设比例调整网页的页面显示宽度；插入的JS代码获取到移动终端的屏幕显示宽度后，根据获取的屏幕显示宽度，按照预设的比例调整网页的页面显示宽度。该预设比例可以根据加载该网页的浏览器的类型以及获取的移动终端屏幕显示宽度确定，或者根据加载该网页的浏览器的类型及移动终端的分辨率来确定；或者，在获取移动终端的相应参数之前，在插入的JS代码中直接设定该预设比例。在一优选的实施例中，设置该预设比例为1.0,即设置网页页面的显示宽度为获取的该移动终端的屏幕显示宽度，也可以理解为:根据获取的屏幕显示宽度，将网页的页面显示宽度调整为与所述屏幕显示宽度相一致的显示尺寸。在具体的应用场景中，可以在网页地址的头部增加自适应的meta (元标签),如在网页代码的头部,加入一行viewport (视口)元标签，可以用下述代码实现:〈meta name=〃viewport〃content=〃width=device_width，initial-scale=l〃/> ；viewport表示网页默认的宽度和高度，“width=device_width”表示网页宽度默认等于屏幕宽度，“initial-scaled”表示缩放比例为1.0，即网页初始大小占屏幕面积的100%。目前所有主流浏览器都支持上述设置，包括IE9。对于一本文档来自技高网...

【技术保护点】
一种页面布局自适应方法，其特征在于，包括以下步骤：插入用于调整页面布局的程序代码；基于插入的所述程序代码，获取移动终端的屏幕显示宽度；根据获取的屏幕显示宽度，按照预设比例调整网页的页面显示宽度；根据所述页面显示宽度，调整组成网页页面的各元素的显示宽度，同时设置所述元素的显示位置为浮动显示。

【技术特征摘要】
1.一种页面布局自适应方法，其特征在于，包括以下步骤: 插入用于调整页面布局的程序代码； 基于插入的所述程序代码，获取移动终端的屏幕显示宽度； 根据获取的屏幕显示宽度，按照预设比例调整网页的页面显示宽度； 根据所述页面显示宽度，调整组成网页页面的各元素的显示宽度，同时设置所述元素的显示位置为浮动显示。2.如权利要求1所述的方法，其特征在于，所述插入用于调整页面布局的程序代码的步骤之后、获取移动终端的屏幕显示宽度的步骤之前，还包括: 基于插入的所述程序代码，获取终端的类型，识别该终端是否为移动终端； 在该终端为移动终端时，执行所述步骤: 基于插入的所述程序代码，获取移动终端的屏幕显示宽度。3.如权利要求1或2所述的方法，其特征在于，所述根据获取的屏幕显示宽度，按照预设比例调整网页的页面显示宽度，包括: 根据获取的屏幕显示宽度，将网页的页面显示宽度调整为与所述屏幕显示宽度相一致的显示尺寸。4.如权利要求1或2所述的方法，其特征在于，所述调整组成网页页面的各元素的显示览度，包括: 将某一元素的显示宽度调整为该元素对应的父元素的最大显示宽度。5.如权利要求1或2所述的方法，其特征在于，所述获取移动终端的...

【专利技术属性】
技术研发人员：陈钊毅，
申请(专利权)人：深信服网络科技深圳有限公司，
类型：发明
国别省市：