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

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

【技术实现步骤摘要】

本专利技术涉及浏览器
，具体来说，涉及一种页面布局自适应方法及系统。
技术介绍
随着互联网的高速发展，在满足了大众可用性的基础上，用户体验显得越来越重要。良好的用户体验，会带来更高的用户粘性、用户回访率、以及更强的品牌竞争力。在浏览页面时存在以下两种问题：诸如新浪微博等信息流页面，是从上往下push渲染的，开始只有头部一些信息加载没有滚动条，当加载更多内容时出现滚动条，由于滚动条会占据一定宽度导致主体元素会做偏移；网站通过导航进入不同功能页面，由于不同页面的内容长度不同，有些页面存在滚动条，有些页面没有滚动条。因此导致在切换过程中即页面跳转时会存在页面晃动现象。现有的解决以上两种问题的方法有以下几种：第一种解决方法是：利用CSS3计算表达式，首先利用计算页面内滚动条的宽度，设置页面的左偏移量为页面内滚动条的宽度；然后利用CSS3属性使页面水平居中。但是，这种方法只针对固定宽度的页面布局起作用，对于宽度不定的流体布局(自适应布局)方式，页面初始化时充满整个浏览器，当页面内容超出页面可视高度，出现纵向滚动条时，再设置页面向左偏移，就会出现页面晃动的现象。第二种解决方法是：利用CSS2进行设置以使无论页面内高度如何变化，滚动条都会一直存在。在这种方法中，当页面高度不超过一屏时，滚动条的状态为灰色，不能进行拖动操作。因此会使页面整体风格不美观，还对用户操作带来不便，强制设置页面右侧出现隐形滚动条，不仅给用户打开页面第一视觉感受不友好，而且当页面内容高度很小时出现滚动条是毫无意义的。第三种解决方法是：在页面初始化时固定好每个容器块的高度，无论页面如何加载请求内容都会出现在内容块内。这种方法只适用于固定高度，即事先把页面尺寸骨架布局好，然后填充数据。具有一定局限性，对于已知内容的页面该方案没有任何缺憾，但是对于页面内容不确定的情况，比如可能会根据时间变化监控队列一直增多的需求，则不能达到要求。第四种解决方法是：首先获取要修改滚动条样式的内容区块，然后使用CSS隐藏掉默认滚动条，然后使用JavaScript添加很多HTML(HypertextMarkupLanguage，超文本标记语言)结构，再配合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之后，还包括：设置页面容器的高度为自适应。在一个实施例中，页面的布局方式可为固定布局、流体布局、和弹性布局中的任意一种。本专利技术适用于页面的各种布本文档来自技高网...

【技术保护点】
一种页面布局自适应方法，其特征在于，包括：创建页面容器；在所述页面容器的外部创建父容器，并设置父容器的宽度为页面的最大宽度；在所述父容器的外部创建外层容器；以及根据滚动条的状态设置外层容器的左偏移量。

【技术特征摘要】
1.一种页面布局自适应方法，其特征在于，包括：创建页面容器；在所述页面容器的外部创建父容器，并设置父容器的宽度为页面的最大宽度；在所述父容器的外部创建外层容器；以及根据滚动条的状态设置外层容器的左偏移量。2.根据权利要求1所述的页面布局自适应方法，其特征在于，根据滚动条的状态设置外层容器的左偏移量，包括：在不出现滚动条的情况下，设置所述外层容器的左偏移量为0；以及在出现滚动条的情况下，设置所述外层容器的左偏移量为滚动条的宽度。3.根据权利要求1所述的页面布局自适应方法，其特征在于，根据滚动条的状态设置外层容器的左偏移量，包括：在不出现滚动条的情况下，设置所述外层容器的左偏移量为0；以及在出现滚动条的情况下，根据屏幕宽度设置所述外层容器的左偏移量。4.根据权利要求3所述的页面布局自适应方法，其特征在于，根据屏幕宽度设置所述外层容器的左偏移量为滚动条的宽度，包括：设置屏幕宽度参数并查询屏幕宽度；将所述屏幕宽度与所述屏幕宽度参数进行比对；以及根据比对的结果设置所述外层容器的左偏移...

【专利技术属性】
技术研发人员：王盈盈，张晋锋，孙金刚，程宝强，
申请(专利权)人：曙光信息产业北京有限公司，
类型：发明
国别省市：北京;11