CN103593196A

CN103593196A - 页面布局自适应方法及装置

Info

Publication number: CN103593196A
Application number: CN201310608370.9A
Authority: CN
Inventors: 陈钊毅
Original assignee: Sangfor Network Technology Shenzhen Co Ltd
Current assignee: Sangfor Network Technology Shenzhen Co Ltd
Priority date: 2013-11-25
Filing date: 2013-11-25
Publication date: 2014-02-19

Abstract

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

Description

页面布局自适应方法及装置

技术领域

本发明涉及网页设计领域，尤其涉及一种页面布局自适应方法及装置。

背景技术

鉴于移动终端的便携性，用户可以使用移动终端随时随地访问网页；受限于移动终端的屏幕尺寸，原始设计出的网页页面在移动终端上显示时的布局与在PC这类终端上显示时的布局有很大不同；而针对每种尺寸的移动终端均重新设计网页是很不现实的，因为移动终端的尺寸有多种且原始网页的数量也很庞大；由此，网页页面能够根据移动终端的显示尺寸自适应地布局页面上的元素便显得尤其重要。

目前，某些网站提供了将原始网页转换为手机版或者触屏版的工具，利用该转换工具可以快速的把一个网页移动化，但这种方式能生成的模板格式有限，通常都是“导航+文章列表”的格式，丢失了原网页很多元素，包括背景、颜色、形象、图标、LOGO（商标）、内容、广告等，跟原网页风格几乎完全不同，只有文字和少量图片，而且也不支持JS（JavaScript，程序语言）等动态效果，比如下拉菜单、弹出菜单等，原网站的广告内容也基本上被去掉了。

发明内容

鉴于此，有必要提供一种页面布局自适应方法及装置，以使网页页面能够根据移动终端自适应地布局页面元素。

本发明实施例公开了一种页面布局自适应方法，包括以下步骤：

插入用于调整页面布局的程序代码；

基于插入的所述程序代码，获取移动终端的屏幕显示宽度；

根据获取的屏幕显示宽度，按照预设比例调整网页的页面显示宽度；

根据所述页面显示宽度，调整组成网页页面的各元素的显示宽度，同时设置所述元素的显示位置为浮动显示。

优选地，所述插入用于调整页面布局的程序代码的步骤之后、获取移动终端的屏幕显示宽度的步骤之前，还包括：

基于插入的所述程序代码，获取终端的类型，识别该终端是否为移动终端；

在该终端为移动终端时，执行所述步骤：

基于插入的所述程序代码，获取移动终端的屏幕显示宽度。

优选地，所述根据获取的屏幕显示宽度，按照预设比例调整网页的页面显示宽度，包括：

根据获取的屏幕显示宽度，将网页的页面显示宽度调整为与所述屏幕显示宽度相一致的显示尺寸。

优选地，所述调整组成网页页面的各元素的显示宽度，包括：

将某一元素的显示宽度调整为该元素对应的父元素的最大显示宽度。

优选地，所述获取移动终端的屏幕显示宽度包括：

获取移动终端的屏幕分辨率；

根据获取的所述屏幕分辨率，获取所述屏幕显示宽度。

本发明实施例还公开一种页面布局自适应装置，包括：

代码插入模块，用于插入用于调整页面布局的程序代码；

参数获取模块，用于基于插入的所述程序代码，获取移动终端的屏幕显示宽度；

布局调整模块，用于根据获取的屏幕显示宽度，按照预设比例调整网页的页面显示宽度；根据所述页面显示宽度，调整组成网页页面的各元素的显示宽度，同时设置所述元素的显示位置为浮动显示。

优选地，所述页面布局自适应装置还包括：

类型识别模块，用于基于插入的所述程序代码，获取终端的类型，识别该终端是否为移动终端。

优选地，所述布局调整模块还用于：

优选地，所述参数获取模块还用于：

获取移动终端的屏幕分辨率；

根据获取的所述屏幕分辨率，获取所述屏幕显示宽度。

本发明实施例获取移动终端的屏幕显示宽度；根据获取的屏幕显示宽度，按照预设比例调整网页的页面显示宽度；根据所述页面显示宽度，调整组成网页页面的各元素的显示宽度，同时设置所述元素的显示位置为浮动显示；相较于现有技术中，特地针对移动终端设计网页，或者利用转换工具统一转换各种类型的网页的方法，本发明实施例具有不需要重新设计修改网页即可使网页页面自适应移动终端显示屏幕的有益效果，且丝毫不影响原始网页的显示效果。

附图说明

图1是本发明页面布局自适应方法第一实施例流程示意图；

图2是本发明页面布局自适应方法第二实施例流程示意图；

图3是本发明页面布局自适应装置第一实施例功能模块示意图；

图4是本发明页面布局自适应装置第二实施例功能模块示意图。

本发明实施例目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。

具体实施方式

以下结合说明书附图及具体实施例进一步说明本发明的技术方案。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

图1是本发明页面布局自适应方法第一实施例流程示意图；如图1所示，本发明页面布局自适应方法包括以下步骤：

步骤S01、插入用于调整页面布局的JS代码；

本发明实施例中，页面布局自适应方法是通过部署的JS代码实现的。在具体的应用场景中，承载JS代码的设备如页面布局自适应装置可以部署在终端和服务器之间；承载JS代码的设备首先对http协议做代理，然后，对所需要在移动终端上显示的网页进行重组，且在该网页处于压缩状态时，对该网页进行解压；然后，在html页面的合适位置插入一段JS代码脚本，这里所述的合适位置指的是，插入的JS代码只要不打乱重组后该网页对应的链接地址即可；在一优选的方案中，可以将该JS代码插入网页地址的尾部，这样不影响该网页的加载速度。在网页加载完成后，插入的JS代码基于终端上的浏览器被终端调用并开始运行。JS代码在终端上运行，使加载的网页能够自适应终端的显示屏幕。

步骤S02、基于插入的JS代码，获取移动终端的屏幕显示宽度；

本实施例中，由移动终端上运行的JS代码来获取移动终端的屏幕显示宽度；移动终端上运行的JS代码获取该移动终端的屏幕显示宽度可以通过以下方式实现：获取移动终端的型号，根据移动终端的型号查找数据库，调用与该型号对应的该移动终端的屏幕显示宽度；或者，获取移动终端的屏幕分辨率，根据获取的移动终端的屏幕分辩率，获取移动终端的屏幕显示宽度；或者，直接读取该移动终端所使用的显示屏的规格参数，获取该移动终端的屏幕显示宽度等。

步骤S03、根据获取的屏幕显示宽度，按照预设比例调整网页的页面显示宽度；

插入的JS代码获取到移动终端的屏幕显示宽度后，根据获取的屏幕显示宽度，按照预设的比例调整网页的页面显示宽度。该预设比例可以根据加载该网页的浏览器的类型以及获取的移动终端屏幕显示宽度确定，或者根据加载该网页的浏览器的类型及移动终端的分辨率来确定；或者，在获取移动终端的相应参数之前，在插入的JS代码中直接设定该预设比例。

在一优选的实施例中，设置该预设比例为1.0，即设置网页页面的显示宽度为获取的该移动终端的屏幕显示宽度，也可以理解为：根据获取的屏幕显示宽度，将网页的页面显示宽度调整为与所述屏幕显示宽度相一致的显示尺寸。在具体的应用场景中，可以在网页地址的头部增加自适应的meta（元标签），如在网页代码的头部，加入一行viewport（视口）元标签，可以用下述代码实现：

viewport表示网页默认的宽度和高度，“width=device-width”表示网页宽度默认等于屏幕宽度，“initial-scale=1”表示缩放比例为1.0，即网页初始大小占屏幕面积的100%。目前所有主流浏览器都支持上述设置，包括IE9。对于一些IE6、IE7、IE8等浏览器可以使用css3-mediaqueries.js来实现：

步骤S04、根据所述页面显示宽度，调整组成网页页面的各元素的显示宽度，同时设置所述元素的显示位置为浮动显示。

根据获取的移动终端的页面显示宽度，插入该移动终端的JS代码调整组成该网页页面的各元素的显示宽度和显示位置；本实施例中，由于网页页面的显示宽度会根据移动终端的屏幕宽度来调整各元素的布局，因此设置各元素的宽度为相对于该网页页面宽度的相对宽度，而不使用各元素的绝对宽度进行布局，比如仅设置各元素相对于网页页面宽度的百分比宽度。本实施例中，插入移动终端的JS代码调整网页页面的字体、图片、视频等的大小也均采用相对大小；例如，设置网页页面的字体大小、图片大小和视频所占用的区域大小均为相对于网页页面宽度的百分比宽度。

插入该移动终端的JS代码设置各元素的显示位置为浮动显示，即各元素的显示位置不是固定不变的；比如，如果该网页页面的显示宽度较小，不能同时容置下两个元素，则后面的那个元素会自动滚动到前面元素的下方，而不会在水平方向上溢出，从而很好地避免了水平滚动条的出现，方便用户查看，有利于提高用户的使用满意度。

在一优选的实施例中，设定组成网页页面的部分元素的宽度为该元素对应的父元素的最大宽度，防止溢出；也可以将组成网页页面的所有元素所占用的宽度均设置为各元素对应的父元素的最大宽度。

采用上述设置方式，在JS代码的作用下，各网页均能够根据移动终端的屏幕显示宽度自适应布局组成该网页的元素，根本不需要重新设计修改原始已设计好的网页，省去了大量的人力成本；同时，原网站的风格、配色、显示元素、内容等，以及原网站的各种动态效果包括下拉菜单、图片轮播、插入的动态广告栏等效果均得以保留，使得用户能够在移动终端上享受与其他终端同样的视觉体验。

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

图2是本发明页面布局自适应方法第二实施例流程示意图；本实施例与图1所述实施例的区别是，增加了步骤S11；本实施例仅对步骤S11进行具体描述，有关本发明页面布局自适应方法所涉及的其他步骤请参照相关实施例的具体描述，在此不再赘述。

如图2所示，本发明页面布局自适应方法在步骤S01、插入用于调整页面布局的JS代码的步骤之后，步骤S02、基于插入的JS代码，获取移动终端的屏幕显示宽度之前，还包括：

步骤S11、基于插入的JS代码，获取终端的类型，识别该终端是否为移动终端；

在该终端为移动终端时，执行步骤S02：

基于插入的JS代码，获取移动终端的屏幕显示宽度。

本实施例中，在网页加载完成后，插入的JS代码基于终端上的浏览器被终端调用并开始运行时，JS代码首先获取终端的类型，并识别该JS代码当前所运行的环境即该终端是否为移动终端；若JS代码识别出该终端不是移动终端，则停止运行，不进行后的网页自适应的流程；因为，原始网页在一开始设计的时候，智能移动终端尚未问世，因此设计的原始网页通常是针对终端如PC机进行设计的，所以加载的网页当然适应除移动终端之外的终端，所以，再执行后续的网页自适应过程是没有意义的。

本发明实施例基于插入的程序代码，识别终端是否为移动终端，并在该终端为移动终端的情况下，再执行页面自适应程序，避免了不必要的代码运行所引起的系统资源的消耗。

当然，在某种情况下，比如设计的该网页针对某一浏览器类型如浏览器A设置的，终端上正在加载该网页的浏览器类型如浏览器B显示该网页的效果，比利用浏览器A显示该网页的效果稍差，则JS代码也可以根据浏览器B的类型使该网页的布局自适应该浏览器B；或者，某网页针对移动终端设计的，当PC机这类非移动终端加载该网页时，JS代码也可以使该网页的布局自适应PC机；或者其他类似情形。上述情形均包括在本发明的思想之内。

图3是本发明页面布局自适应装置第一实施例功能模块示意图；如图3所示，本发明页面布局自适应装置包括：代码插入模块01、参数获取模块02和布局调整模块03。

代码插入模块01，用于插入用于调整页面布局的程序代码；

本发明实施例中，页面布局自适应装置是通过代码插入模块01插入已部署的JS代码实现的。在具体的应用场景中，承载JS代码的设备如页面布局自适应装置可以部署在终端和服务器之间；承载JS代码的设备首先对http协议做代理，然后，对所需要在移动终端上显示的网页进行重组，且在该网页处于压缩状态时，对该网页进行解压；然后，代码插入模块01在html页面的合适位置插入一段JS代码脚本，这里所述的合适位置指的是，代码插入模块01插入的JS代码只要不打乱重组后该网页对应的链接地址即可；在一优选的方案中，代码插入模块01可以将该JS代码插入网页地址的尾部，这样不影响该网页的加载速度。在网页加载完成后，代码插入模块01插入的JS代码基于终端上的浏览器被终端调用并开始运行。JS代码在终端上运行，使加载的网页能够自适应终端的显示屏幕。

参数获取模块02，用于基于插入的JS代码，获取移动终端的屏幕显示宽度；

本实施例中，参数获取模块02来获取移动终端的屏幕显示宽度；参数获取模块02获取该移动终端的屏幕显示宽度可以通过以下方式实现：获取移动终端的型号，根据移动终端的型号查找数据库，调用与该型号对应的该移动终端的屏幕显示宽度；或者，获取移动终端的屏幕分辨率，根据获取的移动终端的屏幕分辩率，获取移动终端的屏幕显示宽度；或者，直接读取该移动终端所使用的显示屏的规格参数，获取该移动终端的屏幕显示宽度等。

布局调整模块03，用于根据获取的屏幕显示宽度，按照预设比例调整网页的页面显示宽度；根据所述页面显示宽度，调整组成网页页面的各元素的显示宽度，同时设置所述元素的显示位置为浮动显示。

参数获取模块02获取到移动终端的屏幕显示宽度后，布局调整模块03根据获取的屏幕显示宽度，按照预设的比例调整网页的页面显示宽度。该预设比例可以根据加载该网页的浏览器的类型以及获取的移动终端屏幕显示宽度确定，或者根据加载该网页的浏览器的类型及移动终端的分辨率来确定；或者，在获取移动终端的相应参数之前，在插入的JS代码中直接设定该预设比例。

在一优选的实施例中，布局调整模块03设置该预设比例为1.0，即设置网页页面的显示宽度为获取的该移动终端的屏幕显示宽度，也可以理解为：根据获取的屏幕显示宽度，布局调整模块03将网页的页面显示宽度调整为与所述屏幕显示宽度相一致的显示尺寸。在具体的应用场景中，可以在网页地址的头部增加自适应的meta（元标签），如在网页代码的头部，加入一行viewport（视口）元标签，可以用下述代码实现：

布局调整模块03根据获取的移动终端的页面显示宽度，调整组成该网页页面的各元素的显示宽度和显示位置；本实施例中，由于网页页面的显示宽度会根据移动终端的屏幕宽度来调整各元素的布局，因此布局调整模块03设置各元素的宽度为相对于该网页页面宽度的相对宽度，而不使用各元素的绝对宽度进行布局，比如仅设置各元素相对于网页页面宽度的百分比宽度。本实施例中，布局调整模块03插入移动终端的JS代码调整网页页面的字体、图片、视频等的大小也均采用相对大小；例如，布局调整模块03设置网页页面的字体大小、图片大小和视频所占用的区域大小均为相对于网页页面宽度的百分比宽度。

布局调整模块03设置各元素的显示位置为浮动显示，即各元素的显示位置不是固定不变的；比如，如果该网页页面的显示宽度较小，不能同时容置下两个元素，则后面的那个元素会通过布局调整模块03的调整自动滚动到前面元素的下方，而不会在水平方向上溢出，从而很好地避免了水平滚动条的出现，方便用户查看，有利于提高用户的使用满意度。

在一优选的实施例中，布局调整模块03设定组成网页页面的部分元素的宽度为该元素对应的父元素的最大宽度，防止溢出；布局调整模块03也可以将组成网页页面的所有元素所占用的宽度均设置为各元素对应的父元素的最大宽度。

采用上述设置方式，各网页均能够根据移动终端的屏幕显示宽度自适应布局组成该网页的元素，根本不需要重新设计修改原始已设计好的网页，省去了大量的人力成本；同时，原网站的风格、配色、显示元素、内容等，以及原网站的各种动态效果包括下拉菜单、图片轮播、插入的动态广告栏等效果均得以保留，使得用户能够在移动终端上享受与其他终端同样的视觉体验。

图4是本发明页面布局自适应装置第二实施例功能模块示意图，本实施例与图3所述实施例的区别是，增加了类型识别模块04；本实施例仅对类型识别模块04进行描述，有关本发明页面布局自适应装置所涉及的其他模块请参照上述相关实施例的具体描述，在此不再赘述。

如图4所示，本发明页面布局自适应装置还包括：

类型识别模块04，用于基于插入的JS代码，获取终端的类型，识别该终端是否为移动终端。

本实施例中，在网页加载完成后，代码插入模块01插入的JS代码基于终端上的浏览器被终端调用并开始运行时，类型识别模块04首先获取终端的类型，并识别该JS代码当前所运行的环境即该终端是否为移动终端；若类型识别模块04识别出该终端不是移动终端，则停止运行，不进行后的网页自适应的流程；因为，原始网页在一开始设计的时候，智能移动终端尚未问世，因此设计的原始网页通常是针对终端如PC机进行设计的，所以加载的网页当然适应除移动终端之外的终端，所以，再执行后续的网页自适应过程是没有意义的。

本发明实施例识别终端是否为移动终端，并在该终端为移动终端的情况下，再执行页面自适应程序，避免了不必要的代码运行所引起的系统资源的消耗。

需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者装置不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者装置所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括该要素的过程、方法、物品或者装置中还存在另外的相同要素。

上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，比如上述的JS代码可以存储在一个存储介质（如ROM/RAM、磁碟、光盘）中，且上述存储介质中也包括若干指令用以使得一台终端设备（可以是手机，计算机，服务器，或者网络设备，或者图3、图4所述的页面布局自适应装置等）执行本发明各个实施例所述的方法。

以上所述仅为本发明的优选实施例，并非因此限制其专利范围，凡是利用本发明说明书及附图内容所作的等效结构或等效流程变换，直接或间接运用在其他相关的技术领域，均同理包括在本发明的专利保护范围内。

Claims

1.一种页面布局自适应方法，其特征在于，包括以下步骤：

插入用于调整页面布局的程序代码；

基于插入的所述程序代码，获取移动终端的屏幕显示宽度；

2.如权利要求1所述的方法，其特征在于，所述插入用于调整页面布局的程序代码的步骤之后、获取移动终端的屏幕显示宽度的步骤之前，还包括：

在该终端为移动终端时，执行所述步骤：

基于插入的所述程序代码，获取移动终端的屏幕显示宽度。

3.如权利要求1或2所述的方法，其特征在于，所述根据获取的屏幕显示宽度，按照预设比例调整网页的页面显示宽度，包括：

4.如权利要求1或2所述的方法，其特征在于，所述调整组成网页页面的各元素的显示宽度，包括：

5.如权利要求1或2所述的方法，其特征在于，所述获取移动终端的屏幕显示宽度包括：

获取移动终端的屏幕分辨率；

根据获取的所述屏幕分辨率，获取所述屏幕显示宽度。

6.一种页面布局自适应装置，其特征在于，包括：

代码插入模块，用于插入用于调整页面布局的程序代码；

7.如权利要求6所述的装置，其特征在于，还包括：

8.如权利要求6或7所述的装置，其特征在于，所述布局调整模块还用于：

9.如权利要求6或7所述的装置，其特征在于，所述布局调整模块还用于：

10.如权利要求6或7所述的装置，其特征在于，所述参数获取模块还用于：

获取移动终端的屏幕分辨率；

根据获取的所述屏幕分辨率，获取所述屏幕显示宽度。