CN106503041A - 页面布局自适应方法及系统 - Google Patents

Abstract

本发明公开了一种页面布局自适应方法及系统，该页面布局自适应方法包括：创建页面容器；在页面容器的外部创建父容器，并设置父容器的宽度为页面的最大宽度；在父容器的外部创建外层容器；以及根据滚动条的状态设置外层容器的左偏移量。本发明通过依次创建页面容器、父容器，和外层容器，设置父容器的宽度为页面的最大宽度，并根据滚动条的状态设置外层容器的左偏移量，实现了对页面布局的控制，实现了在页面切换时的平滑显示，使同一页面不会因为滚动条的出现发生晃动现象。

Description

页面布局自适应方法及系统

技术领域

本发明涉及浏览器技术领域，具体来说，涉及一种页面布局自适应方法及系统。

背景技术

随着互联网的高速发展，在满足了大众可用性的基础上，用户体验显得越来越重要。良好的用户体验，会带来更高的用户粘性、用户回访率、以及更强的品牌竞争力。

在浏览页面时存在以下两种问题：诸如新浪微博等信息流页面，是从上往下push渲染的，开始只有头部一些信息加载没有滚动条，当加载更多内容时出现滚动条，由于滚动条会占据一定宽度导致主体元素会做偏移；网站通过导航进入不同功能页面，由于不同页面的内容长度不同，有些页面存在滚动条，有些页面没有滚动条。因此导致在切换过程中即页面跳转时会存在页面晃动现象。

现有的解决以上两种问题的方法有以下几种：

第一种解决方法是：利用CSS3计算表达式，首先利用计算页面内滚动条的宽度，设置页面的左偏移量为页面内滚动条的宽度；然后利用CSS3属性使页面水平居中。但是，这种方法只针对固定宽度的页面布局起作用，对于宽度不定的流体布局(自适应布局)方式，页面初始化时充满整个浏览器，当页面内容超出页面可视高度，出现纵向滚动条时，再设置页面向左偏移，就会出现页面晃动的现象。

第二种解决方法是：利用CSS2进行设置以使无论页面内高度如何变化，滚动条都会一直存在。在这种方法中，当页面高度不超过一屏时，滚动条的状态为灰色，不能进行拖动操作。因此会使页面整体风格不美观，还对用户操作带来不便，强制设置页面右侧出现隐形滚动条，不仅给用户打开页面第一视觉感受不友好，而且当页面内容高度很小时出现滚动条是毫无意义的。

第三种解决方法是：在页面初始化时固定好每个容器块的高度，无论页面如何加载请求内容都会出现在内容块内。这种方法只适用于固定高度，即事先把页面尺寸骨架布局好，然后填充数据。具有一定局限性，对于已知内容的页面该方案没有任何缺憾，但是对于页面内容不确定的情况，比如可能会根据时间变化监控队列一直增多的需求，则不能达到要求。

第四种解决方法是：首先获取要修改滚动条样式的内容区块，然后使用CSS隐藏掉默认滚动条，然后使用JavaScript添加很多HTML(Hypertext Markup Language，超文本标记语言)结构，再配合CSS做出一个滚动条的效果。然后再使用CSS创建滚动条的样式，使用JavaScript相应鼠标的滚动事件，产生滚动下滑的效果。用JavaScript的方式修改HTML结构模拟滚动条动作并配合CSS制作滚动条样式，需要加载大量脚本，对浏览器渲染速度有一定影响。因此会使代码量增多，且操作困难。

针对相关技术中的上述问题，目前尚未提出有效的解决方案。

发明内容

针对相关技术中的上述问题，本发明提出一种页面布局自适应方法及系统，能够使同一页面不会因为滚动条的出现而发生晃动现象。

本发明的技术方案是这样实现的：

根据本发明的一个方面，提供了一种页面布局自适应方法，包括：创建页面容器；在页面容器的外部创建父容器，并设置父容器的宽度为页面的最大宽度；在父容器的外部创建外层容器；以及根据滚动条的状态设置外层容器的左偏移量。

优选地，根据滚动条的状态设置外层容器的左偏移量，包括：在不出现滚动条的情况下，设置外层容器的左偏移量为0；以及在出现滚动条的情况下，设置外层容器的左偏移量为滚动条的宽度。

优选地，根据滚动条的状态设置外层容器的左偏移量，包括：在不出现滚动条的情况下，设置外层容器的左偏移量为0；以及在出现滚动条的情况下，根据屏幕宽度设置外层容器的左偏移量。

优选地，根据屏幕宽度设置外层容器的左偏移量为滚动条的宽度，包括：设置屏幕宽度参数；查询屏幕宽度；将屏幕宽度与屏幕宽度参数进行比对；以及根据比对的结果设置外层容器的左偏移量。

优选地，根据比对的结果设置外层容器的左偏移量，包括：在屏幕宽度小于屏幕宽度参数的情况下，设置外层容器的左偏移量为0。

优选地，根据比对的结果设置外层容器的左偏移量，还包括：在屏幕宽度大于屏幕宽度参数的情况下，设置外层容器的左偏移量为滚动条的宽度。

优选地，页面的最大宽度为窗口宽度与滚动条宽度的差值。

优选地，在创建页面容器之后，还包括：设置页面容器的高度为自适应。

优选地，页面的布局方式为固定布局、流体布局、和弹性布局中的任意一种。

根据本发明的另一方面，提供了一种页面布局自适应系统，包括：创建模块，用于创建页面容器并创建外层容器；查询模块，用于查询滚动条的状态；以及设置模块，用于根据滚动条的状态设置外层容器的左偏移量。

本发明实现了对页面布局的控制，实现了在页面切换时的平滑显示，使同一页面不会因为滚动条的出现发生晃动现象。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是根据本发明实施例的页面布局自适应方法的流程图；

图2是根据本发明具体实施例的页面布局自适应方法的流程图；

图3是根据本发明实施例的页面布局自适应系统的框图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员所获得的所有其他实施例，都属于本发明保护的范围。

根据本发明的实施例，提供了一种布局自适应方法。

如图1所示，根据本发明实施例的页面布局自适应方法包括以下步骤：

S101，创建页面容器；

S103，在页面容器的外部创建父容器，并设置父容器的宽度为页面的最大宽度；

S105，在父容器的外部创建外层容器；以及

S107，根据滚动条的状态设置外层容器的左偏移量。

在本实施例中，浏览器可利用HTML的块元素(比如div元素)作为预设的页面容器、父容器及外层容器。

通过上述技术方案，实现了对页面布局的控制，实现了在页面切换时的平滑显示，使同一页面不会因为滚动条的出现发生晃动现象。

在一个实施例中，步骤S107包括：

在不出现滚动条的情况下，设置外层容器的左偏移量为0；以及

在出现滚动条的情况下，设置外层容器的左偏移量为滚动条的宽度。

在一个实施例中，S107包括：

在不出现滚动条的情况下，设置外层容器的左偏移量为0；以及

在出现滚动条的情况下，根据屏幕宽度设置外层容器的左偏移量。

进一步地，根据屏幕宽度设置外层容器的左偏移量，包括：

设置屏幕宽度参数；

查询屏幕宽度；

将屏幕宽度与屏幕宽度参数进行比对；以及

根据比对的结果设置外层容器的左偏移量。

更进一步地，根据比对的结果设置外层容器的左偏移量，包括：

在屏幕宽度小于屏幕宽度参数的情况下，设置外层容器的左偏移量为0。

在屏幕宽度大于屏幕宽度参数的情况下，设置外层容器的左偏移量为滚动条的宽度。

由于存在左偏移量，如果浏览器的分辨率过小会导致左右不居中的现象，通过根据屏幕宽度设置外层容器的左偏移量，只在屏幕宽度超过一定数值时设置左偏移量，能够避免屏幕过窄的浏览器出现左右不居中的现象。

在一个实施例中，页面的最大宽度为窗口宽度与滚动条宽度的差值。

在一个实施例中，在步骤S101之后，还包括：设置页面容器的高度为自适应。

在一个实施例中，页面的布局方式可为固定布局、流体布局、和弹性布局中的任意一种。

本发明适用于页面的各种布局方式，下面以流体布局为例进行具体说明。如图2所示，是根据本发明具体实施例的页面布局自适应方法的流程图，在本实施例中包括以下步骤：

步骤S201，创建一个流体布局的页面容器，设置页面容器的高度为自适应。其中，流体布局采用百分比方式来创建其宽度，以使流体布局的宽度可以根据情况实现自适应。

步骤S203，在页面容器外部创建一个父容器，设置父容器的宽度为页面内可以利用的最大宽度，页面内可以利用的最大宽度为窗口宽度与浏览器滚动条宽度的差值。在具体的应用场景中，可根据实际需要设置滚动条的宽度为适当的数值。

可以利用CSS(Cascading Style Sheets，层叠样式表)技术设置父容器的宽度为页面内可以利用的最大宽度。CSS3是CSS技术的升级版本。在本实施例中，通过CSS3的计算功能设置宽度属性为width：calc(100vw-55px)，其中，滚动条的宽度的单位是以像素数来计算的，滚动条的宽度的取值为55个像素。

步骤S205，在父容器的外部创建一个外层容器，并设置外层容器的左偏移量为滚动条的宽度。当没有滚动条时，外层容器的宽度为0，外层容器的左偏移量也为0。

具体的，可通过CSS3的计算功能设置属性margin-left：calc(100vw-100％)，以使外层容器的左偏移量为滚动条的宽度。需要说明的是，其中，100vw表示的是包括滚动条宽度的浏览器的内部宽度，100％表示的是浏览器的可用宽度，该可用宽度中不包括滚动条的宽度。

由于存在左偏移量，如果浏览器的分辨率过小，会出现左右不居中现象。因此，进一步地，可只在屏幕宽度超过一定数值时设置外层容器的左偏移量。

在具体的应用场景中，可通过CSS3的媒体查询功能，实现只在屏幕宽度超过一定数值时设置外层容器的左偏移量。例如，要实现只在屏幕宽度超过1150个像素时设置外层容器的左偏移量，则可通过设置CSS3属性为@media screen and(min-width:1150px)来实现。

在本实施例中，通过CSS技术可实现对页面布局的控制，从而将站点上所有可能出现滚动条的网页都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的行，那么整个站点的所有页面都会随之发生变动。能够用较少的代码实现页面切换时的平滑显示，避免了晃动现象的产生，从视觉上提高用户体验；另一方面，通过采用CSS技术还能够提高页面渲染的速度。

如图3所示，根据本发明的实施例，还提供了一种页面布局自适应系统，包括：

创建模块31，用于创建页面容器并创建外层容器；

查询模块32，用于查询滚动条的状态；以及

设置模块33，用于根据滚动条的状态设置外层容器的左偏移量。

综上所述，借助于本发明的上述技术方案，通过依次创建页面容器、父容器，和外层容器，设置父容器的宽度为页面的最大宽度，并根据滚动条的状态设置外层容器的左偏移量，实现了对页面布局的控制，实现了在页面切换时的平滑显示，使同一页面不会因为滚动条的出现发生晃动现象；通过根据屏幕宽度设置外层容器的左偏移量，只在屏幕宽度超过一定数值时设置左偏移量，避免了屏幕过窄的浏览器出现左右不居中的现象；还通过CSS技术实现了对页面布局的控制，能够用较少的代码实现页面切换时的平滑显示，提高了页面渲染的速度。

以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (10)

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

创建页面容器；

在所述页面容器的外部创建父容器，并设置父容器的宽度为页面的最大宽度；

在所述父容器的外部创建外层容器；以及

根据滚动条的状态设置外层容器的左偏移量。

2.根据权利要求1所述的页面布局自适应方法，其特征在于，根据滚动条的状态设置外层容器的左偏移量，包括：

在不出现滚动条的情况下，设置所述外层容器的左偏移量为0；以及

在出现滚动条的情况下，设置所述外层容器的左偏移量为滚动条的宽度。

3.根据权利要求1所述的页面布局自适应方法，其特征在于，根据滚动条的状态设置外层容器的左偏移量，包括：

在不出现滚动条的情况下，设置所述外层容器的左偏移量为0；以及

在出现滚动条的情况下，根据屏幕宽度设置所述外层容器的左偏移量。

4.根据权利要求3所述的页面布局自适应方法，其特征在于，根据屏幕宽度设置所述外层容器的左偏移量为滚动条的宽度，包括：

设置屏幕宽度参数并查询屏幕宽度；

将所述屏幕宽度与所述屏幕宽度参数进行比对；以及

根据比对的结果设置所述外层容器的左偏移量。

5.根据权利要求4所述的页面布局自适应方法，其特征在于，根据比对的结果设置所述外层容器的左偏移量，包括：

在所述屏幕宽度小于所述屏幕宽度参数的情况下，设置所述外层容器的左偏移量为0。

6.根据权利要求5所述的页面布局自适应方法，其特征在于，根据比对的结果设置所述外层容器的左偏移量，还包括：

在所述屏幕宽度大于所述屏幕宽度参数的情况下，设置所述外层容器的左偏移量为滚动条的宽度。

7.根据权利要求1所述的页面布局自适应方法，其特征在于，

所述页面的最大宽度为窗口宽度与滚动条宽度的差值。

8.根据权利要求7所述的页面布局自适应方法，其特征在于，在创建页面容器之后，还包括：

设置页面容器的高度为自适应。

9.根据权利要求1所述的页面布局自适应方法，其特征在于，

页面的布局方式为固定布局、流体布局、和弹性布局中的任意一种。

10.一种页面布局自适应系统，其特征在于，包括：

创建模块，用于创建页面容器并创建外层容器；

查询模块，用于查询滚动条的状态；以及

设置模块，用于根据滚动条的状态设置外层容器的左偏移量。