[发明专利]一种页面自适应调整方法及系统

说明书

技术领域

本发明涉及移动通信技术领域。具体地说涉及一种页面自适应调整方法及系统。

背景技术

在系统级的网页前端设计上，对可视空间的充分利用越来越被重视起来，这样就需要尽可能的减少常见的滚动效果。

目前业内常用的页面自适应调整方法主要包括以下三种类型：一、固定大小设计方法，具体方法为首先给整个页面设定固定宽度，然后超出宽度的地方通过背景颜色进行填充，上下根据内容多少和相应的显示器大小，自动出现滚动条。该方法的问题是，只能保证某一特定分辨率的显示效果为最佳，当显示器分辨率超出这一特定分辨率很大时，整个页面将会出现很大一片空白区域，空间无法充分利用起来，并且在很大的显示器下还是显示较小的文字、图片，视觉效果也不理想。二、编写多种分辨率的样式，按需引入的页面自适应调整方法，具体方法为首先给整个页面编写多种分辨率的css样式文件，再在页面加载的时候通过一定的计算引入相应的css文件。这一设计的问题是，因显示器大小类型繁多，需要编写的css样式也要很多，重复性的工作量很大，而且当窗口并没有占满整个显示器时或者进行缩放时，也无法找到完全对应的样式文件。三、响应式页面自适应调整方法，响应式网页设计的理念是页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。一切弹性化，图片的尺寸可以被自动调整，页面布局再不会被破坏。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。从效果上来说，响应式页面自适应调整方法在兼容多种分辨率的应用上无疑是比较好的选择，但这一方法的问题是，在追求弹性化的过程中，必然会导致部分内容无法在可视区域中展示，另，因不同显示器分辨率差别非常大，或者页面之间需要相互嵌套，导致需要编写大量的相似度极高的重复代码以使不同分辨率下的显示样式能够自动调整，且调整结果也并不理想

发明内容

为此，本发明所要解决的技术问题在于现有技术中，页面自适应调整方法需要编写大量的相似度极高的重复代码以使不同分辨率下的显示样式能够自适应调整，且调整结果也并不理想，从而提供一种能够减少重复代码编写并且自适应调整效果好的页面自适应调整方法及系统。

为解决上述技术问题，本发明的技术方案如下：

本发明提供了一种页面自适应调整方法，包括如下步骤；

设置页面在基准分辨率下的初始样式规则，所述初始样式规则包括需要动态计算的样式；

获取在当前可视窗口的分辨率下所述页面的宽度值、高度值的缩放比例；

根据所述缩放比例对初始样式规则中需要动态计算的样式进行更新。

本发明所述的页面自适应调整方法，所述设置页面在基准分辨率下的初始样式规则包括：

设置基准分辨率；

将基准分辨率下的页面划分为N个基础块样式，N为正整数，将每个所述基础块样式中包括的子元素样式的像素值由所述子元素样式占其所属的基础块样式的百分比表示；

将需要动态调整的基础块样式定义为需要动态计算的样式。

本发明所述的页面自适应调整方法，所述获取在当前可视窗口的分辨率下所述页面的宽度值、高度值的缩放比例包括：

获取当前可视窗口的分辨率；

根据当前可视窗口的分辨率的宽度值、高度值分别同所述基准分辨率的宽度值、高度值的比值计算出当前可视窗口的分辨率下所述页面的宽度值和高度值的缩放比例。

本发明所述的页面自适应调整方法，所述根据当前可视窗口的分辨率的宽度值、高度值分别同所述基准分辨率的宽度值、高度值的比值计算出当前可视窗口的分辨率下所述页面的宽度值和高度值的缩放比例包括：

计算当前可视窗口的分辨率的宽度值、高度值分别同所述基准分辨率的宽度值、高度值的比值；

当所述比值小于或等于1时，利用公式f＝1-(1-s)ⁿ来计算当前可视窗口的分辨率下所述页面的宽度值、高度值的缩小比例；

当所述比值大于1时，利用公式f＝1+(1-s)ⁿ来计算当前可视窗口的分辨率下所述页面的宽度值、高度值的放大比例；

其中s为当前可视窗口的分辨率的宽度值、高度值分别同所述基准分辨率的宽度值、高度值的比值，n为正整数。

本发明所述的页面自适应调整方法，所述根据所述缩放比例对初始样式规则中需要动态计算的样式进行更新的步骤，包括：

遍历并读取所述初始样式规则中需要动态计算的样式，将所述需要动态计算的样式作为初始值予以保存；

将所述初始值与所述缩放比例的乘积作为新样式；