一种页面自适应调整方法及系统技术方案

本发明专利技术提供了一种页面自适应调整方法及系统，通过设置页面在基准分辨率下的初始样式规则，且初始样式规则包括需要动态计算的样式，之后获取在当前可视窗口的分辨率下页面的宽度值、高度值的缩放比例，并根据缩放比例对初始样式规则中需要动态计算的样式进行更新，因为在初始样式规则中定义了需要动态计算的样式，在不同的可视窗口分辨率下，只需根据在当前可视窗口的分辨率下页面的宽度值、高度值的缩放比例来对初始样式规则中需要动态计算的样式进行更新，即可实现不同分辨率下页面的自适应调整，大大降低了页面自适应调整过程中的重复代码的编写，自适应调整效果好。

【技术实现步骤摘要】
一种页面自适应调整方法及系统
本专利技术涉及移动通信
。具体地说涉及一种页面自适应调整方法及系统。
技术介绍
在系统级的网页前端设计上，对可视空间的充分利用越来越被重视起来，这样就需要尽可能的减少常见的滚动效果。 目前业内常用的页面自适应调整方法主要包括以下三种类型:一、固定大小设计方法，具体方法为首先给整个页面设定固定宽度，然后超出宽度的地方通过背景颜色进行填充，上下根据内容多少和相应的显示器大小，自动出现滚动条。该方法的问题是，只能保证某一特定分辨率的显示效果为最佳，当显示器分辨率超出这一特定分辨率很大时，整个页面将会出现很大一片空白区域，空间无法充分利用起来，并且在很大的显示器下还是显示较小的文字、图片，视觉效果也不理想。二、编写多种分辨率的样式，按需引入的页面自适应调整方法，具体方法为首先给整个页面编写多种分辨率的CSS样式文件，再在页面加载的时候通过一定的计算引入相应的CSS文件。这一设计的问题是，因显示器大小类型繁多，需要编写的CSS样式也要很多，重复性的工作量很大，而且当窗口并没有占满整个显示器时或者进行缩放时，也无法找到完全对应的样式文件。三、响应式页面自适应调整方法，响应式网页设计的理念是页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。一切弹性化，图片的尺寸可以被自动调整，页面布局再不会被破坏。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSSmedia query的使用等。从效果上来说,响应式页面自适应调整方法在兼容多种分辨率的应用上无疑是比较好的选择，但这一方法的问题是，在追求弹性化的过程中，必然会导致部分内容无法在可视区域中展示，另，因不同显示器分辨率差别非常大，或者页面之间需要相互嵌套，导致需要编写大量的相似度极高的重复代码以使不同分辨率下的显示样式能够自动调整，且调整结果也并不理想
技术实现思路
为此，本专利技术所要解决的技术问题在于现有技术中，页面自适应调整方法需要编写大量的相似度极高的重复代码以使不同分辨率下的显示样式能够自适应调整，且调整结果也并不理想，从而提供一种能够减少重复代码编写并且自适应调整效果好的页面自适应调整方法及系统。 为解决上述技术问题，本专利技术的技术方案如下: 本专利技术提供了一种页面自适应调整方法，包括如下步骤； 设置页面在基准分辨率下的初始样式规则，所述初始样式规则包括需要动态计算的样式； 获取在当前可视窗口的分辨率下所述页面的宽度值、高度值的缩放比例； 根据所述缩放比例对初始样式规则中需要动态计算的样式进行更新。 本专利技术所述的页面自适应调整方法，所述设置页面在基准分辨率下的初始样式规则包括: 设置基准分辨率； 将基准分辨率下的页面划分为N个基础块样式，N为正整数，将每个所述基础块样式中包括的子元素样式的像素值由所述子元素样式占其所属的基础块样式的百分比表示； 将需要动态调整的基础块样式定义为需要动态计算的样式。 本专利技术所述的页面自适应调整方法，所述获取在当前可视窗口的分辨率下所述页面的宽度值、高度值的缩放比例包括: 获取当前可视窗口的分辨率； 根据当前可视窗口的分辨率的宽度值、高度值分别同所述基准分辨率的宽度值、高度值的比值计算出当前可视窗口的分辨率下所述页面的宽度值和高度值的缩放比例。 本专利技术所述的页面自适应调整方法，所述根据当前可视窗口的分辨率的宽度值、高度值分别同所述基准分辨率的宽度值、高度值的比值计算出当前可视窗口的分辨率下所述页面的宽度值和高度值的缩放比例包括: 计算当前可视窗口的分辨率的宽度值、高度值分别同所述基准分辨率的宽度值、高度值的比值； 当所述比值小于或等于I时，利用公式f = l-(l-s)n来计算当前可视窗口的分辨率下所述页面的宽度值、高度值的缩小比例； 当所述比值大于I时，利用公式f = l+(l_s)n来计算当前可视窗口的分辨率下所述页面的宽度值、高度值的放大比例； 其中s为当前可视窗口的分辨率的宽度值、高度值分别同所述基准分辨率的宽度值、高度值的比值，η为正整数。 本专利技术所述的页面自适应调整方法，所述根据所述缩放比例对初始样式规则中需要动态计算的样式进行更新的步骤，包括: 遍历并读取所述初始样式规则中需要动态计算的样式，将所述需要动态计算的样式作为初始值予以保存； 将所述初始值与所述缩放比例的乘积作为新样式； 将所述初始样式规则中需要动态计算的样式更新为新样式。 本专利技术所述的页面自适应调整方法，在所述设置页面在基准分辨率下的初始样式规则之后且在所述获取在当前可视窗口的分辨率下所述页面的宽度值、高度值的缩放比例之前还包括: 将所述需要动态计算的样式置于最后引入的所述初始样式规则的开始部分。 本专利技术所述的页面自适应调整方法，将所述需要动态计算的样式置于所述初始样式规则的开始部分之后且在所述获取在当前可视窗口的分辨率下所述页面的宽度值、高度值的缩放比例之前还包括: 在所述需要动态计算的样式上加上自适应计算标记。 本专利技术所述的页面自适应调整方法，在所述获取在当前可视窗口的分辨率下所述页面的宽度值、高度值的缩放比例之后且在所述根据所述缩放比例对初始样式规则中需要动态计算的样式进行更新之前还包括: 对所述页面的宽度值和高度值的缩放比例进行修正。 本专利技术所述的页面自适应调整方法，所述对所述页面的宽度值和高度值的缩放比例进行修正包括: 将所述页面的宽度值和高度值的缩放比例进行比较； 当所述页面的宽度值的缩放比例小于所述页面的高度值的缩放比例时，将所述页面的宽度值的缩放比例作为所述页面的宽度值和高度值的最终缩放比例；反之将所述页面的高度值的缩放比例作为所述页面的宽度值和高度值的最终缩放比例。 本专利技术还提供了一种页面自适应调整系统，包括: 设置单元，用于设置页面在基准分辨率下的初始样式规则，所述初始样式规则包括需要动态计算的样式； 获取单元，用于获取在当前可视窗口的分辨率下所述页面的宽度值、高度值的缩放比例； 更新单元，用于根据所述缩放比例对初始样式规则中需要动态计算的样式进行更新。 本专利技术所述的页面自适应调整系统，所述设置单元包括: 基准子单元，用于设置基准分辨率； 划分子单元，用于将基准分辨率下的页面划分为N个基础块样式，N为正整数，将每个所述基础块样式中包括的子元素样式的像素值由所述子元素样式占其所属的基础块样式的百分比表不; 动态定义子单元，用于将需要动态调整的基础块样式定义为需要动态计算的样式。 本专利技术所述的页面自适应调整系统，所述获取单元包括: 获取子单元，用于获取当前可视窗口的分辨率； 计算子单元，用于根据当前可视窗口的分辨率的宽度值、高度值分别同所述基准分辨率的宽度值、高度值的比值计算出当前可视窗口的分辨率下所述页面的宽度值和高度值的缩放比例。 本专利技术所述的页面自适应调整系统，所述计算子单元包括: 比值计算器计算当前可视窗口的分辨率的宽度值、高度值分别同所述基准分辨率的宽度值、高度值的比值； 第一计算器，用于当所述比值小于或等于I时，利用公式f = 1-(1_8广来计算当前可视窗口的分辨率下所述页面的宽度值、高度值的缩小比例； 本文档来自技高网...

【技术保护点】
一种页面自适应调整方法，其特征在于，包括如下步骤；设置页面在基准分辨率下的初始样式规则，所述初始样式规则包括需要动态计算的样式；获取在当前可视窗口的分辨率下所述页面的宽度值、高度值的缩放比例；根据所述缩放比例对初始样式规则中需要动态计算的样式进行更新。

【技术特征摘要】
1.一种页面自适应调整方法，其特征在于，包括如下步骤； 设置页面在基准分辨率下的初始样式规则，所述初始样式规则包括需要动态计算的样式； 获取在当前可视窗口的分辨率下所述页面的宽度值、高度值的缩放比例； 根据所述缩放比例对初始样式规则中需要动态计算的样式进行更新。2.根据权利要求1所述的页面自适应调整方法，其特征在于，所述设置页面在基准分辨率下的初始样式规则包括: 设置基准分辨率； 将基准分辨率下的页面划分为N个基础块样式，N为正整数，将每个所述基础块样式中包括的子元素样式的像素值由所述子元素样式占其所属的基础块样式的百分比表示； 将需要动态调整的基础块样式定义为需要动态计算的样式。3.根据权利要求1所述的页面自适应调整方法，其特征在于，所述获取在当前可视窗口的分辨率下所述页面的宽度值、高度值的缩放比例包括: 获取当前可视窗口的分辨率； 根据当前可视窗口的分辨率的宽度值、高度值分别同所述基准分辨率的宽度值、高度值的比值计算出当前可视窗口的分辨率下所述页面的宽度值和高度值的缩放比例。4.根据权利要求3所述的页面自适应调整方法，其特征在于，所述根据当前可视窗口的分辨率的宽度值、高度值分别同所述基准分辨率的宽度值、高度值的比值计算出当前可视窗口的分辨率下所述页面的宽度值和高度值的缩放比例包括: 计算当前可视窗口的分辨率的宽度值、高度值分别同所述基准分辨率的宽度值、高度值的比值； 当所述比值小于或等于I时，利用公式f = 1-(l_s)n来计算当前可视窗口的分辨率下所述页面的宽度值、高度值的缩小比例； 当所述比值大于I时，利用公式f = l+(l_s)n来计算当前可视窗口的分辨率下所述页面的宽度值、高度值的放大比例； 其中s为当前可视窗口的分辨率的宽度值、高度值分别同所述基准分辨率的宽度值、高度值的比值，η为正整数。5.根据权利要求1所述的页面自适应调整方法，其特征在于，所述根据所述缩放比例对初始样式规则中需要动态计算的样式进行更新的步骤，包括: 遍历并读取所述初始样式规则中需要动态计算的样式，将所述需要动态计算的样式作为初始值予以保存； 将所述初始值与所述缩放比例的乘积作为新样式； 将所述初始样式规则中需要动态计算的样式更新为新样式。6.根据权利要求1所述的页面自适应调整方法，其特征在于，在所述设置页面在基准分辨率下的初始样式规则之后且在所述获取在当前可视窗口的分辨率下所述页面的宽度值、高度值的缩放比例之前还包括: 将所述需要动态计算的样式置于最后引入的所述初始样式规则的开始部分。7.根据权利要求6所述的页面自适应调整方法，其特征在于，将所述需要动态计算的样式置于所述初始样式规则的开始部分之后且在所述获取在当前可视窗口的分辨率下所述页面的宽度值、高度值的缩放比例之前还包括: 在所述需要动态计算的样式上加上自适应计算标记。8.根据权利要求1所述的页面自适应调整方法，其特征在于，在所述获取在当前可视窗口的分辨率下所述页面的宽度值、高度值的缩放比例之后且在所述根据所述缩放比例对初始样式规则中需要动态计算的样式进行更新之前还包括: 对所述页面的宽度值和高度值的缩放比例进行修正。9.根据权利要求8所述的页面自适应调整方法，其特征在于，所述对所述页面的宽度值和高度值的缩放比例进行修正包括: 将所述页面的宽度值和高度值的缩放比例进行比较； 当所述页面的宽度值的缩放比例小于所述页面的高度值的缩放比例时，将所述页面的宽度值的缩放比例作为所述页面的...

【专利技术属性】
技术研发人员：尹章牛，陈卫东，
申请(专利权)人：苏州科达科技股份有限公司，
类型：发明
国别省市：江苏;32