CN104317968A - 一种页面自适应调整方法及系统 - Google Patents

一种页面自适应调整方法及系统 Download PDF

Info

Publication number
CN104317968A
CN104317968A CN201410659363.6A CN201410659363A CN104317968A CN 104317968 A CN104317968 A CN 104317968A CN 201410659363 A CN201410659363 A CN 201410659363A CN 104317968 A CN104317968 A CN 104317968A
Authority
CN
China
Prior art keywords
page
pattern
scaling
resolution
value
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN201410659363.6A
Other languages
English (en)
Inventor
尹章牛
陈卫东
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Suzhou Keda Technology Co Ltd
Original Assignee
Suzhou Keda Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Suzhou Keda Technology Co Ltd filed Critical Suzhou Keda Technology Co Ltd
Priority to CN201410659363.6A priority Critical patent/CN104317968A/zh
Publication of CN104317968A publication Critical patent/CN104317968A/zh
Pending legal-status Critical Current

Links

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/95Retrieval from the web
    • G06F16/957Browsing optimisation, e.g. caching or content distillation

Landscapes

  • Engineering & Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Data Mining & Analysis (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Image Analysis (AREA)

Abstract

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

Description

一种页面自适应调整方法及系统
技术领域
本发明涉及移动通信技术领域。具体地说涉及一种页面自适应调整方法及系统。
背景技术
在系统级的网页前端设计上,对可视空间的充分利用越来越被重视起来,这样就需要尽可能的减少常见的滚动效果。
目前业内常用的页面自适应调整方法主要包括以下三种类型:一、固定大小设计方法,具体方法为首先给整个页面设定固定宽度,然后超出宽度的地方通过背景颜色进行填充,上下根据内容多少和相应的显示器大小,自动出现滚动条。该方法的问题是,只能保证某一特定分辨率的显示效果为最佳,当显示器分辨率超出这一特定分辨率很大时,整个页面将会出现很大一片空白区域,空间无法充分利用起来,并且在很大的显示器下还是显示较小的文字、图片,视觉效果也不理想。二、编写多种分辨率的样式,按需引入的页面自适应调整方法,具体方法为首先给整个页面编写多种分辨率的css样式文件,再在页面加载的时候通过一定的计算引入相应的css文件。这一设计的问题是,因显示器大小类型繁多,需要编写的css样式也要很多,重复性的工作量很大,而且当窗口并没有占满整个显示器时或者进行缩放时,也无法找到完全对应的样式文件。三、响应式页面自适应调整方法,响应式网页设计的理念是页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。一切弹性化,图片的尺寸可以被自动调整,页面布局再不会被破坏。具体的实践方式由多方面组成,包括弹性网格和布局、图片、CSS media query的使用等。从效果上来说,响应式页面自适应调整方法在兼容多种分辨率的应用上无疑是比较好的选择,但这一方法的问题是,在追求弹性化的过程中,必然会导致部分内容无法在可视区域中展示,另,因不同显示器分辨率差别非常大,或者页面之间需要相互嵌套,导致需要编写大量的相似度极高的重复代码以使不同分辨率下的显示样式能够自动调整,且调整结果也并不理想
发明内容
为此,本发明所要解决的技术问题在于现有技术中,页面自适应调整方法需要编写大量的相似度极高的重复代码以使不同分辨率下的显示样式能够自适应调整,且调整结果也并不理想,从而提供一种能够减少重复代码编写并且自适应调整效果好的页面自适应调整方法及系统。
为解决上述技术问题,本发明的技术方案如下:
本发明提供了一种页面自适应调整方法,包括如下步骤;
设置页面在基准分辨率下的初始样式规则,所述初始样式规则包括需要动态计算的样式;
获取在当前可视窗口的分辨率下所述页面的宽度值、高度值的缩放比例;
根据所述缩放比例对初始样式规则中需要动态计算的样式进行更新。
本发明所述的页面自适应调整方法,所述设置页面在基准分辨率下的初始样式规则包括:
设置基准分辨率;
将基准分辨率下的页面划分为N个基础块样式,N为正整数,将每个所述基础块样式中包括的子元素样式的像素值由所述子元素样式占其所属的基础块样式的百分比表示;
将需要动态调整的基础块样式定义为需要动态计算的样式。
本发明所述的页面自适应调整方法,所述获取在当前可视窗口的分辨率下所述页面的宽度值、高度值的缩放比例包括:
获取当前可视窗口的分辨率;
根据当前可视窗口的分辨率的宽度值、高度值分别同所述基准分辨率的宽度值、高度值的比值计算出当前可视窗口的分辨率下所述页面的宽度值和高度值的缩放比例。
本发明所述的页面自适应调整方法,所述根据当前可视窗口的分辨率的宽度值、高度值分别同所述基准分辨率的宽度值、高度值的比值计算出当前可视窗口的分辨率下所述页面的宽度值和高度值的缩放比例包括:
计算当前可视窗口的分辨率的宽度值、高度值分别同所述基准分辨率的宽度值、高度值的比值;
当所述比值小于或等于1时,利用公式f=1-(1-s)n来计算当前可视窗口的分辨率下所述页面的宽度值、高度值的缩小比例;
当所述比值大于1时,利用公式f=1+(1-s)n来计算当前可视窗口的分辨率下所述页面的宽度值、高度值的放大比例;
其中s为当前可视窗口的分辨率的宽度值、高度值分别同所述基准分辨率的宽度值、高度值的比值,n为正整数。
本发明所述的页面自适应调整方法,所述根据所述缩放比例对初始样式规则中需要动态计算的样式进行更新的步骤,包括:
遍历并读取所述初始样式规则中需要动态计算的样式,将所述需要动态计算的样式作为初始值予以保存;
将所述初始值与所述缩放比例的乘积作为新样式;
将所述初始样式规则中需要动态计算的样式更新为新样式。
本发明所述的页面自适应调整方法,在所述设置页面在基准分辨率下的初始样式规则之后且在所述获取在当前可视窗口的分辨率下所述页面的宽度值、高度值的缩放比例之前还包括:
将所述需要动态计算的样式置于最后引入的所述初始样式规则的开始部分。
本发明所述的页面自适应调整方法,将所述需要动态计算的样式置于所述初始样式规则的开始部分之后且在所述获取在当前可视窗口的分辨率下所述页面的宽度值、高度值的缩放比例之前还包括:
在所述需要动态计算的样式上加上自适应计算标记。
本发明所述的页面自适应调整方法,在所述获取在当前可视窗口的分辨率下所述页面的宽度值、高度值的缩放比例之后且在所述根据所述缩放比例对初始样式规则中需要动态计算的样式进行更新之前还包括:
对所述页面的宽度值和高度值的缩放比例进行修正。
本发明所述的页面自适应调整方法,所述对所述页面的宽度值和高度值的缩放比例进行修正包括:
将所述页面的宽度值和高度值的缩放比例进行比较;
当所述页面的宽度值的缩放比例小于所述页面的高度值的缩放比例时,将所述页面的宽度值的缩放比例作为所述页面的宽度值和高度值的最终缩放比例;反之将所述页面的高度值的缩放比例作为所述页面的宽度值和高度值的最终缩放比例。
本发明还提供了一种页面自适应调整系统,包括:
设置单元,用于设置页面在基准分辨率下的初始样式规则,所述初始样式规则包括需要动态计算的样式;
获取单元,用于获取在当前可视窗口的分辨率下所述页面的宽度值、高度值的缩放比例;
更新单元,用于根据所述缩放比例对初始样式规则中需要动态计算的样式进行更新。
本发明所述的页面自适应调整系统,所述设置单元包括:
基准子单元,用于设置基准分辨率;
划分子单元,用于将基准分辨率下的页面划分为N个基础块样式,N为正整数,将每个所述基础块样式中包括的子元素样式的像素值由所述子元素样式占其所属的基础块样式的百分比表示;
动态定义子单元,用于将需要动态调整的基础块样式定义为需要动态计算的样式。
本发明所述的页面自适应调整系统,所述获取单元包括:
获取子单元,用于获取当前可视窗口的分辨率;
计算子单元,用于根据当前可视窗口的分辨率的宽度值、高度值分别同所述基准分辨率的宽度值、高度值的比值计算出当前可视窗口的分辨率下所述页面的宽度值和高度值的缩放比例。
本发明所述的页面自适应调整系统,所述计算子单元包括:
比值计算器计算当前可视窗口的分辨率的宽度值、高度值分别同所述基准分辨率的宽度值、高度值的比值;
第一计算器,用于当所述比值小于或等于1时,利用公式f=1-(1-s)n来计算当前可视窗口的分辨率下所述页面的宽度值、高度值的缩小比例;
第二计算器,用于当所述比值大于1时,利用公式f=1+(1-s)n来计算当前可视窗口的分辨率下所述页面的宽度值、高度值的放大比例;
其中s为当前可视窗口的分辨率的宽度值、高度值分别同所述基准分辨率的宽度值、高度值的比值,n为正整数。
本发明所述的页面自适应调整系统,所述更新单元包括:
遍历读取子单元,用于遍历并读取所述初始样式规则中需要动态计算的样式,将所述需要动态计算的样式作为初始值予以保存;
新样式获取子单元,用于将所述初始值与所述缩放比例的乘积作为新样式;
更新子单元,用于将所述初始样式规则中需要动态计算的样式更新为新样式。
本发明所述的页面自适应调整系统,还包括:
置顶单元,用于将所述需要动态计算的样式置于最后引入的所述初始样式规则的开始部分。
本发明所述的页面自适应调整系统,还包括:
标记单元,用于在所述需要动态计算的样式上加上自适应计算标记。
本发明所述的页面自适应调整系统,还包括:
修正单元,用于对所述页面的宽度值和高度值的缩放比例进行修正。
本发明所述的页面自适应调整系统,所述修正单元包括:
比较器,用于将所述页面的宽度值和高度值的缩放比例进行比较;
修正器,用于当所述页面的宽度值的缩放比例小于所述页面的高度值的缩放比例时,将所述页面的宽度值的缩放比例作为所述页面的宽度值和高度值的最终缩放比例;反之将所述页面的高度值的缩放比例作为所述页面的宽度值和高度值的最终缩放比例。
本发明的上述技术方案相比现有技术具有以下优点:
本发明提供了一种页面自适应调整方法及系统,通过设置页面在基准分辨率下的初始样式规则,且初始样式规则包括需要动态计算的样式,之后获取在当前可视窗口的分辨率下页面的宽度值、高度值的缩放比例,并根据缩放比例对初始样式规则中需要动态计算的样式进行更新,因为在初始样式规则中定义了需要动态计算的样式,在不同的可视窗口分辨率下,只需根据在当前可视窗口的分辨率下页面的宽度值、高度值的缩放比例来对初始样式规则中需要动态计算的样式进行更新,即可实现不同分辨率下页面的自适应调整,大大降低了页面自适应调整过程中的重复代码的编写,自适应调整效果好。
附图说明
为了使本发明的内容更容易被清楚的理解,下面根据本发明的具体实施例并结合附图,对本发明作进一步详细的说明,其中
图1是根据本发明实施例1的页面自适应调整方法的流程图;
图2是根据本发明实施例1的页面自适应调整方法中设置页面在基准分辨率下的初始样式规则的流程图;
图3是根据本发明实施例1的页面自适应调整方法中获取在当前可视窗口的分辨率下所述页面的宽度值、高度值的缩放比例的流程图;
图4是根据本发明实施例1的页面自适应调整方法中根据所述缩放比例对初始样式规则中需要动态计算的样式进行更新的流程图;
图5是根据本发明实施例1的页面自适应调整方法中根据当前可视窗口的分辨率的宽度值、高度值分别同基准分辨率的宽度值、高度值的比值计算出当前可视窗口的分辨率下页面的宽度值和高度值的缩放比例的流程图;
图6是根据本发明实施例2的页面自适应调整方法的流程图
图7是根据本发明实施例2的页面自适应调整方法中对页面的宽度值和高度值的缩放比例进行修正的流程图;
图8是根据本发明实施例3的页面自适应调整系统的结构框图;
图9是根据本发明实施例4的页面自适应调整系统的结构框图。
图中附图标记表示为:1-设置单元,2-获取单元,3-更新单元,4-置顶单元,5-标记单元,6-修正单元,11-基准子单元,12-划分子单元,13-动态定义子单元,21-获取子单元,22-计算子单元,31-遍历读取子单元,32-新样式获取子单元,33-更新子单元,61-比较器,62-修正器,221-比值计算器,222-第一计算器,223-第二计算器。
具体实施方式
实施例1
本实施例提供了一种页面自适应调整方法,如图1所示,包括如下步骤;
S11.设置页面在基准分辨率下的初始样式规则,所述初始样式规则包括需要动态计算的样式;
S12.获取在当前可视窗口的分辨率下所述页面的宽度值、高度值的缩放比例;
S13.根据所述缩放比例对初始样式规则中需要动态计算的样式进行更新。
本实施例所述页面自适应调整方法,通过设置页面在基准分辨率下的初始样式规则,且初始样式规则包括需要动态计算的样式,之后获取在当前可视窗口的分辨率下页面的宽度值、高度值的缩放比例,并根据缩放比例对初始样式规则中需要动态计算的样式进行更新,因为在初始样式规则中定义了需要动态计算的样式,在不同的可视窗口分辨率下,只需根据在当前可视窗口的分辨率下页面的宽度值、高度值的缩放比例来对初始样式规则中需要动态计算的样式进行更新,即可实现不同分辨率下页面的自适应调整,大大降低了页面自适应调整过程中的重复代码的编写,自适应调整效果好。
优选地,如图2所示,所述步骤S11可以包括:
S111.设置基准分辨率;
S112.将基准分辨率下的页面划分为N个基础块样式,N为正整数,将每个所述基础块样式中包括的子元素样式的像素值由所述子元素样式占其所属的基础块样式的百分比表示;
S113.将需要动态调整的基础块样式定义为需要动态计算的样式。
具体地,基准分辨率可以选用常用的大屏显示器的分辨率作为基准分辨率,比如选取1920*1080的分辨率作为基础分辨率,这样一般当前可视窗口的分辨率一般都低于基准分辨率,页面在进行自适应调整时主要是缩放操作,可以避免对页面进行放大操作时导致的页面失真或者偏差较大的缺陷,对页面的样式设计在该基准分辨率的基础上进行。需要动态调整的基础块样式可以根据页面设计者的设计需求来确定,可以将页面划分的所有的基础块样式都设计为需要动态调整的基础块样式,也可以指定其中的几个基础块样式为需要动态调整的基础块样式。
另,因为将基准分辨率下的页面划分为N个基础块样式,当页面进行自适应调节时,可以按照页面的缩放比例同时对页面划分的N个基础块样式进行缩放,而当对每个基础块样式进行缩放时,因为每个基础块样式中包含的子元素样式的像素值均由该子元素样式占其所属的基础块样式的百分比表示,是一个相对样式,因此无需再重复计算每个基础块样式中的子元素样式的缩放比例,子元素样式会根据其所属的基础块样式的缩放比例自动的放大或者缩小,大大降低了页面自适应调整过程中的计算量,提高了页面自适应调整的效率。
通过上面的介绍,在页面自适应调整的过程中,需要进行缩放操作的实际上只有基础块样式,因此只将每个基础块样式定义为需要动态计算的样式,可以大大降低页面自适应调整过程中的计算量。
优选地,如图3所示,所述步骤S12可以包括:
S121.获取当前可视窗口的分辨率;
S122.根据当前可视窗口的分辨率的宽度值、高度值分别同所述基准分辨率的宽度值、高度值的比值计算出当前可视窗口的分辨率下所述页面的宽度值和高度值的缩放比例。
优选地,如图5所示,所述步骤S122可以包括:
S1221.计算当前可视窗口的分辨率的宽度值、高度值分别同所述基准分辨率的宽度值、高度值的比值;
S1222.当所述比值小于或等于1时,利用公式f=1-(1-s)n来计算当前可视窗口的分辨率下所述页面的宽度值、高度值的缩小比例;
S1223.当所述比值大于1时,利用公式f=1+(1-s)n来计算当前可视窗口的分辨率下所述页面的宽度值、高度值的放大比例;
其中s为当前可视窗口的分辨率的宽度值、高度值分别同所述基准分辨率的宽度值、高度值的比值,n为正整数。
具体地,n可以取2,以基准分辨率为1920*1080,当前可视窗口的分辨率为1024*798为例,当前可视窗口的分辨率的宽度值同基准分辨率的宽度值的比值为s=1024/1920,因为此时s小于1,所以利用公式f=1-(1-s)n=1-(1-1024/1920)2来计算当前可视窗口的分辨率下所述页面的宽度值的缩小比例;当前可视窗口的分辨率的高度值同基准分辨率的高度值的比值为s=798/1080,因为此时s小于1,所以利用公式f=1-(1-s)n=1-(1-798/1080)2来计算当前可视窗口的分辨率下所述页面的高度值的缩小比例,可以简便准确的计算得到页面的宽度值和高度值的缩放比例。
优选地,如图4所示,所述步骤S13可以包括:
S131.遍历并读取所述初始样式规则中需要动态计算的样式,将所述需要动态计算的样式作为初始值予以保存;
S132.将所述初始值与所述缩放比例的乘积作为新样式;
S133.将所述初始样式规则中需要动态计算的样式更新为新样式。
具体地,通过将每个基础块样式的宽度值、高度值同所述缩放比例想乘,就可以计算出每个基础块样式在当前可视窗口的分辨率下的新的宽度值、高度值,将其作为新样式对初始样式规则中的每个基础块样式进行更新,就可以实现整个页面的自适应调整,非常快捷。
实施例2
本实施例提供了另一种页面自适应调整方法,如图6所示,包括如下步骤:
S21.设置页面在基准分辨率下的初始样式规则,所述初始样式规则包括需要动态计算的样式;
S22.将所述需要动态计算的样式置于最后引入的所述初始样式规则的开始部分;
S23.在所述需要动态计算的样式上加上自适应计算标记;
S24.获取在当前可视窗口的分辨率下所述页面的宽度值、高度值的缩放比例;
S25.对所述页面的宽度值和高度值的缩放比例进行修正;
S26.根据所述缩放比例对初始样式规则中需要动态计算的样式进行更新。
与实施例1中的技术方案不同的是,在本实施例中新增了步骤S22,因为有可能会引入多个初始样式规则,而后面的初始样式规则(样式文件)会覆盖之前的初始样式规则,因此为了确保需要动态计算的样式不被覆盖,可以将需要动态计算的样式置于最后引入的所述初始样式规则的开始部分,可以在读取初始样式规则中最先获取到需要动态计算的样式,可以尽快对需要动态计算的样式进行计算更新,提高了页面自适应调整的效率。
与实施例1中的技术方案不同的是,在本实施例中新增了步骤S23,可以在需要动态计算的样式上加上类似于self-adaption这样的自适应计算标记,当加载包含初始样式规则的样本文件时,在遍历初始样式规则的过程中,就会通过自适应计算标记很快读取到需要动态计算的样式,提高了页面自适应调整的效率。
优选地,如图7所示,所述步骤S25可以包括:
S251.将所述页面的宽度值和高度值的缩放比例进行比较;
S252.当所述页面的宽度值的缩放比例小于所述页面的高度值的缩放比例时,将所述页面的宽度值的缩放比例作为所述页面的宽度值和高度值的最终缩放比例;反之将所述页面的高度值的缩放比例作为所述页面的宽度值和高度值的最终缩放比例。
具体地,计算所述页面的宽度值和高度值的缩放比例,可以采用求整运算,通过最大公约数法计算出基准分辨率下所述页面的宽度值和高度值的缩放比例,因为基准分辨率一般选取的比较大,因此,当前可视窗口的分辨率一般小于所述基准分辨率。此时,所述页面的宽度值和高度值的缩放比例,谁的值更小,说明谁的缩放幅度更大。通过选取缩放幅度大的缩放比例作为所述页面的宽度值和高度值的最终缩放比例对所述页面的宽度值和高度值的缩放比例进行修正,可以确保页面在缩放的过程中尽可能不失真。
本实施例所述的页面自适应调整方法,通过将需要动态计算的样式置于最后引入的所述初始样式规则的开始部分,可以避免后期引入的样式文本覆盖需要动态计算的样式,并且可以率先读取,通过在需要动态计算的样式上加上自适应计算标记,可以很快查找到需要动态计算的样式,可以尽快对需要动态计算的样式进行计算更新,提高了页面自适应调整的效率。通过对页面的宽度值和高度值的缩放比例进行修正,可以确保页面在缩放的过程中尽可能不失真,具有很好的页面自适应调整效果。
实施例3
本实施例提供了一种页面自适应调整系统,如图8所示,包括:
设置单元1,用于设置页面在基准分辨率下的初始样式规则,所述初始样式规则包括需要动态计算的样式;
获取单元2,用于获取在当前可视窗口的分辨率下所述页面的宽度值、高度值的缩放比例;
更新单元3,用于根据所述缩放比例对初始样式规则中需要动态计算的样式进行更新。
本实施例所述页面自适应调整系统,通过设置单元1设置页面在基准分辨率下的初始样式规则,且初始样式规则包括需要动态计算的样式,之后通过获取单元2获取在当前可视窗口的分辨率下页面的宽度值、高度值的缩放比例,并通过更新单元3根据缩放比例对初始样式规则中需要动态计算的样式进行更新,因为在初始样式规则中定义了需要动态计算的样式,在不同的可视窗口分辨率下,只需根据在当前可视窗口的分辨率下页面的宽度值、高度值的缩放比例来对初始样式规则中需要动态计算的样式进行更新,即可实现不同分辨率下页面的自适应调整,大大降低了页面自适应调整过程中的重复代码的编写,自适应调整效果好。
优选地,所述设置单元1可以包括:
基准子单元11,用于设置基准分辨率;
划分子单元12,用于将基准分辨率下的页面划分为N个基础块样式,N为正整数,将每个所述基础块样式中包括的子元素样式的像素值由所述子元素样式占其所属的基础块样式的百分比表示;
动态定义子单元13,用于将需要动态调整的基础块样式定义为需要动态计算的样式。
划分子单元12将基准分辨率下的页面划分为N个基础块样式,当页面进行自适应调节时,可以按照页面的缩放比例同时对页面划分的N个基础块样式进行缩放,而当对每个基础块样式进行缩放时,因为每个基础块样式中包含的子元素样式的像素值均由该子元素样式占其所属的基础块样式的百分比表示,是一个相对样式,因此无需再重复计算每个基础块样式中的子元素样式的缩放比例,子元素样式会根据其所属的基础块样式的缩放比例自动的放大或者缩小,大大降低了页面自适应调整过程中的计算量,提高了页面自适应调整的效率。
优选地,所述获取单元2可以包括:
获取子单元21,用于获取当前可视窗口的分辨率;
计算子单元22,用于根据当前可视窗口的分辨率的宽度值、高度值分别同所述基准分辨率的宽度值、高度值的比值计算出当前可视窗口的分辨率下所述页面的宽度值和高度值的缩放比例。
优选地,所述计算子单元22可以包括:
比值计算器221计算当前可视窗口的分辨率的宽度值、高度值分别同所述基准分辨率的宽度值、高度值的比值;
第一计算器222,用于当所述比值小于或等于1时,利用公式f=1-(1-s)n来计算当前可视窗口的分辨率下所述页面的宽度值、高度值的缩小比例;
第二计算器223,用于当所述比值大于1时,利用公式f=1+(1-s)n来计算当前可视窗口的分辨率下所述页面的宽度值、高度值的放大比例;
其中s为当前可视窗口的分辨率的宽度值、高度值分别同所述基准分辨率的宽度值、高度值的比值,n为正整数。
优选地,所述更新单元3可以包括:
遍历读取子单元31,用于遍历并读取所述初始样式规则中需要动态计算的样式,将所述需要动态计算的样式作为初始值予以保存;
新样式获取子单元32,用于将所述初始值与所述缩放比例的乘积作为新样式;
更新子单元33,用于将所述初始样式规则中需要动态计算的样式更新为新样式。
具体地,通过新样式获取子单元32将每个基础块样式的宽度值、高度值同所述缩放比例想乘,就可以计算出每个基础块样式在当前可视窗口的分辨率下的新的宽度值、高度值,将其作为新样式,通过更新子单元33对初始样式规则中的每个基础块样式进行更新,就可以实现整个页面的自适应调整,非常快捷。
实施例4
本实施例提供了另一种页面自适应调整系统,如图9所示,与实施例3中的页面自适应调整系统不同之处在于,本实施例中的页面自适应调整系统除了包括实施例3所述的设置单元1、获取单元2、更新单元3外,还可以包括:
置顶单元4,用于将所述需要动态计算的样式置于最后引入的所述初始样式规则的开始部分。
具体地,因为有可能会引入多个初始样式规则,而后面的初始样式规则(样式文件)会覆盖之前的初始样式规则,因此为了确保需要动态计算的样式不被覆盖,通过置顶单元4可以将需要动态计算的样式置于最后引入的所述初始样式规则的开始部分,可以在读取初始样式规则中最先获取到需要动态计算的样式,可以尽快对需要动态计算的样式进行计算更新,提高了页面自适应调整的效率。
标记单元5,用于在所述需要动态计算的样式上加上自适应计算标记。
具体地,可以通过标记单元5在需要动态计算的样式上加上类似于self-adaption这样的自适应计算标记,当加载包含初始样式规则的样本文件时,在遍历初始样式规则的过程中,就会通过自适应计算标记很快读取到需要动态计算的样式,提高了页面自适应调整的效率。
优选地,还可以包括:
修正单元6,用于对所述页面的宽度值和高度值的缩放比例进行修正。
优选地,所述修正单元6可以包括:
比较器61,用于将所述页面的宽度值和高度值的缩放比例进行比较;
修正器62,用于当所述页面的宽度值的缩放比例小于所述页面的高度值的缩放比例时,将所述页面的宽度值的缩放比例作为所述页面的宽度值和高度值的最终缩放比例;反之将所述页面的高度值的缩放比例作为所述页面的宽度值和高度值的最终缩放比例。
本实施例所述的页面自适应调整系统,通过置顶单元4将需要动态计算的样式置于最后引入的所述初始样式规则的开始部分,可以避免后期引入的样式文本覆盖需要动态计算的样式,并且可以率先读取,通过标记单元5在需要动态计算的样式上加上自适应计算标记,可以很快查找到需要动态计算的样式,可以尽快对需要动态计算的样式进行计算更新,提高了页面自适应调整的效率。通过修正单元6对页面的宽度值和高度值的缩放比例进行修正,可以确保页面在缩放的过程中尽可能不失真,具有很好的页面自适应调整效果。
本领域内的技术人员应明白,本发明的实施例可提供为方法、系统、或计算机程序产品。因此,本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且,本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。
本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器,使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中,使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品,该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上,使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理,从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
尽管已描述了本发明的优选实施例,但本领域内的技术人员一旦得知了基本创造性概念,则可对这些实施例作出另外的变更和修改。所以,所附权利要求意欲解释为包括优选实施例以及落入本发明范围的所有变更和修改。

Claims (18)

1.一种页面自适应调整方法,其特征在于,包括如下步骤;
设置页面在基准分辨率下的初始样式规则,所述初始样式规则包括需要动态计算的样式;
获取在当前可视窗口的分辨率下所述页面的宽度值、高度值的缩放比例;
根据所述缩放比例对初始样式规则中需要动态计算的样式进行更新。
2.根据权利要求1所述的页面自适应调整方法,其特征在于,所述设置页面在基准分辨率下的初始样式规则包括:
设置基准分辨率;
将基准分辨率下的页面划分为N个基础块样式,N为正整数,将每个所述基础块样式中包括的子元素样式的像素值由所述子元素样式占其所属的基础块样式的百分比表示;
将需要动态调整的基础块样式定义为需要动态计算的样式。
3.根据权利要求1所述的页面自适应调整方法,其特征在于,所述获取在当前可视窗口的分辨率下所述页面的宽度值、高度值的缩放比例包括:
获取当前可视窗口的分辨率;
根据当前可视窗口的分辨率的宽度值、高度值分别同所述基准分辨率的宽度值、高度值的比值计算出当前可视窗口的分辨率下所述页面的宽度值和高度值的缩放比例。
4.根据权利要求3所述的页面自适应调整方法,其特征在于,所述根据当前可视窗口的分辨率的宽度值、高度值分别同所述基准分辨率的宽度值、高度值的比值计算出当前可视窗口的分辨率下所述页面的宽度值和高度值的缩放比例包括:
计算当前可视窗口的分辨率的宽度值、高度值分别同所述基准分辨率的宽度值、高度值的比值;
当所述比值小于或等于1时,利用公式f=1-(1-s)n来计算当前可视窗口的分辨率下所述页面的宽度值、高度值的缩小比例;
当所述比值大于1时,利用公式f=1+(1-s)n来计算当前可视窗口的分辨率下所述页面的宽度值、高度值的放大比例;
其中s为当前可视窗口的分辨率的宽度值、高度值分别同所述基准分辨率的宽度值、高度值的比值,n为正整数。
5.根据权利要求1所述的页面自适应调整方法,其特征在于,所述根据所述缩放比例对初始样式规则中需要动态计算的样式进行更新的步骤,包括:
遍历并读取所述初始样式规则中需要动态计算的样式,将所述需要动态计算的样式作为初始值予以保存;
将所述初始值与所述缩放比例的乘积作为新样式;
将所述初始样式规则中需要动态计算的样式更新为新样式。
6.根据权利要求1所述的页面自适应调整方法,其特征在于,在所述设置页面在基准分辨率下的初始样式规则之后且在所述获取在当前可视窗口的分辨率下所述页面的宽度值、高度值的缩放比例之前还包括:
将所述需要动态计算的样式置于最后引入的所述初始样式规则的开始部分。
7.根据权利要求6所述的页面自适应调整方法,其特征在于,将所述需要动态计算的样式置于所述初始样式规则的开始部分之后且在所述获取在当前可视窗口的分辨率下所述页面的宽度值、高度值的缩放比例之前还包括:
在所述需要动态计算的样式上加上自适应计算标记。
8.根据权利要求1所述的页面自适应调整方法,其特征在于,在所述获取在当前可视窗口的分辨率下所述页面的宽度值、高度值的缩放比例之后且在所述根据所述缩放比例对初始样式规则中需要动态计算的样式进行更新之前还包括:
对所述页面的宽度值和高度值的缩放比例进行修正。
9.根据权利要求8所述的页面自适应调整方法,其特征在于,所述对所述页面的宽度值和高度值的缩放比例进行修正包括:
将所述页面的宽度值和高度值的缩放比例进行比较;
当所述页面的宽度值的缩放比例小于所述页面的高度值的缩放比例时,将所述页面的宽度值的缩放比例作为所述页面的宽度值和高度值的最终缩放比例;反之将所述页面的高度值的缩放比例作为所述页面的宽度值和高度值的最终缩放比例。
10.一种页面自适应调整系统,其特征在于,包括:
设置单元(1),用于设置页面在基准分辨率下的初始样式规则,所述初始样式规则包括需要动态计算的样式;
获取单元(2),用于获取在当前可视窗口的分辨率下所述页面的宽度值、高度值的缩放比例;
更新单元(3),用于根据所述缩放比例对初始样式规则中需要动态计算的样式进行更新。
11.根据权利要求10所述的页面自适应调整系统,其特征在于,所述设置单元(1)包括:
基准子单元(11),用于设置基准分辨率;
划分子单元(12),用于将基准分辨率下的页面划分为N个基础块样式,N为正整数,将每个所述基础块样式中包括的子元素样式的像素值由所述子元素样式占其所属的基础块样式的百分比表示;
动态定义子单元(13),用于将需要动态调整的基础块样式定义为需要动态计算的样式。
12.根据权利要求10所述的页面自适应调整系统,其特征在于,所述获取单元(2)包括:
获取子单元(21),用于获取当前可视窗口的分辨率;
计算子单元(22),用于根据当前可视窗口的分辨率的宽度值、高度值分别同所述基准分辨率的宽度值、高度值的比值计算出当前可视窗口的分辨率下所述页面的宽度值和高度值的缩放比例。
13.根据权利要求12所述的页面自适应调整系统,其特征在于,所述计算子单元(22)包括:
比值计算器(221)计算当前可视窗口的分辨率的宽度值、高度值分别同所述基准分辨率的宽度值、高度值的比值;
第一计算器(222),用于当所述比值小于或等于1时,利用公式f=1-(1-s)n来计算当前可视窗口的分辨率下所述页面的宽度值、高度值的缩小比例;
第二计算器(223),用于当所述比值大于1时,利用公式f=1+(1-s)n来计算当前可视窗口的分辨率下所述页面的宽度值、高度值的放大比例;
其中s为当前可视窗口的分辨率的宽度值、高度值分别同所述基准分辨率的宽度值、高度值的比值,n为正整数。
14.根据权利要求10所述的页面自适应调整系统,其特征在于,所述更新单元(3)包括:
遍历读取子单元(31),用于遍历并读取所述初始样式规则中需要动态计算的样式,将所述需要动态计算的样式作为初始值予以保存;
新样式获取子单元(32),用于将所述初始值与所述缩放比例的乘积作为新样式;
更新子单元(33),用于将所述初始样式规则中需要动态计算的样式更新为新样式。
15.根据权利要求10所述的页面自适应调整系统,其特征在于,还包括:
置顶单元(4),用于将所述需要动态计算的样式置于最后引入的所述初始样式规则的开始部分。
16.根据权利要求15所述的页面自适应调整系统,其特征在于,还包括:
标记单元(5),用于在所述需要动态计算的样式上加上自适应计算标记。
17.根据权利要求10所述的页面自适应调整系统,其特征在于,还包括:
修正单元(6),用于对所述页面的宽度值和高度值的缩放比例进行修正。
18.根据权利要求17所述的页面自适应调整系统,其特征在于,所述修正单元(6)包括:
比较器(61),用于将所述页面的宽度值和高度值的缩放比例进行比较;
修正器(62),用于当所述页面的宽度值的缩放比例小于所述页面的高度值的缩放比例时,将所述页面的宽度值的缩放比例作为所述页面的宽度值和高度值的最终缩放比例;反之将所述页面的高度值的缩放比例作为所述页面的宽度值和高度值的最终缩放比例。
CN201410659363.6A 2014-11-18 2014-11-18 一种页面自适应调整方法及系统 Pending CN104317968A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201410659363.6A CN104317968A (zh) 2014-11-18 2014-11-18 一种页面自适应调整方法及系统

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201410659363.6A CN104317968A (zh) 2014-11-18 2014-11-18 一种页面自适应调整方法及系统

Publications (1)

Publication Number Publication Date
CN104317968A true CN104317968A (zh) 2015-01-28

Family

ID=52373200

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201410659363.6A Pending CN104317968A (zh) 2014-11-18 2014-11-18 一种页面自适应调整方法及系统

Country Status (1)

Country Link
CN (1) CN104317968A (zh)

Cited By (21)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105468382A (zh) * 2016-02-01 2016-04-06 浙江慧脑信息科技有限公司 一种自适应布局的编程方法
CN105975576A (zh) * 2016-05-04 2016-09-28 北京京东尚科信息技术有限公司 终端内容适配显示方法、装置和终端
CN106156263A (zh) * 2015-05-14 2016-11-23 锐珂(上海)医疗器材有限公司 基于坐标的web页面提供方法及系统
CN106407261A (zh) * 2016-08-24 2017-02-15 上海斐讯数据通信技术有限公司 一种页面自适应屏幕的方法及智能终端
CN106528895A (zh) * 2016-12-29 2017-03-22 重庆南华中天信息技术有限公司 一种css资源前端显示装置
CN106886574A (zh) * 2017-01-20 2017-06-23 烽火通信科技股份有限公司 一种机顶盒浏览器的网页缩放处理方法及系统
CN107066267A (zh) * 2017-03-27 2017-08-18 网易(杭州)网络有限公司 页面尺寸处理方法、装置及设备
CN107147890A (zh) * 2017-05-11 2017-09-08 西安交通大学 一种兼容不同分辨率和宽长比的多视频缩放模块及并行工作方法
CN107239190A (zh) * 2017-05-19 2017-10-10 西安诺瓦电子科技有限公司 窗口的偏移方法及装置
CN107341167A (zh) * 2016-05-02 2017-11-10 谷歌公司 帮助数字内容的格式化的管理的用户界面
CN107480192A (zh) * 2017-07-12 2017-12-15 长城计算机软件与系统有限公司 一种浏览器界面自动调整的方法和系统
CN107967162A (zh) * 2017-11-22 2018-04-27 深圳市富途网络科技有限公司 一种基于Windows系统的应用程序高清晰显示方法
CN108241505A (zh) * 2016-12-26 2018-07-03 航天信息股份有限公司 一种页面适配方法及装置
CN108399217A (zh) * 2018-02-07 2018-08-14 广州阿里巴巴文学信息技术有限公司 视图显示处理方法、装置及移动终端设备
CN110647280A (zh) * 2019-09-30 2020-01-03 腾讯科技(深圳)有限公司 信息流的显示方法、装置、设备及介质
CN112395033A (zh) * 2020-11-18 2021-02-23 中国平安人寿保险股份有限公司 网页自适应方法及相关产品
CN112732253A (zh) * 2020-12-28 2021-04-30 中科院计算技术研究所大数据研究院 一种自适应终端的可视化大屏动态容器组件
CN113099182A (zh) * 2021-04-08 2021-07-09 西安应用光学研究所 基于机载并行处理架构的多视窗实时缩放方法
CN113791788A (zh) * 2021-11-17 2021-12-14 北京翼鸥教育科技有限公司 一种自适应的窗体调整方法、装置、电子设备及介质
CN113849254A (zh) * 2021-09-06 2021-12-28 掌阅科技股份有限公司 页面布局的自适应调整方法及计算设备
CN114756190A (zh) * 2022-06-14 2022-07-15 统信软件技术有限公司 一种基于分辨率调整缩放的方法、装置及计算设备

Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20060218490A1 (en) * 2005-03-24 2006-09-28 Richard Fink Method and apparatus for creating a web page
CN102073650A (zh) * 2009-11-25 2011-05-25 阿里巴巴集团控股有限公司 一种网页自适应调节的方法和设备
CN102314502A (zh) * 2011-09-01 2012-01-11 百度在线网络技术(北京)有限公司 一种用于在移动终端上显示网页主体内容的方法和设备
CN102662616A (zh) * 2012-03-28 2012-09-12 北京邮电大学 用于移动终端的屏幕图形自适应方法及系统
CN103593196A (zh) * 2013-11-25 2014-02-19 深信服网络科技(深圳)有限公司 页面布局自适应方法及装置
CN103648055A (zh) * 2013-12-09 2014-03-19 乐视致新电子科技(天津)有限公司 智能电视浏览器的屏幕自适应方法和装置、智能电视

Patent Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20060218490A1 (en) * 2005-03-24 2006-09-28 Richard Fink Method and apparatus for creating a web page
CN102073650A (zh) * 2009-11-25 2011-05-25 阿里巴巴集团控股有限公司 一种网页自适应调节的方法和设备
CN102314502A (zh) * 2011-09-01 2012-01-11 百度在线网络技术(北京)有限公司 一种用于在移动终端上显示网页主体内容的方法和设备
CN102662616A (zh) * 2012-03-28 2012-09-12 北京邮电大学 用于移动终端的屏幕图形自适应方法及系统
CN103593196A (zh) * 2013-11-25 2014-02-19 深信服网络科技(深圳)有限公司 页面布局自适应方法及装置
CN103648055A (zh) * 2013-12-09 2014-03-19 乐视致新电子科技(天津)有限公司 智能电视浏览器的屏幕自适应方法和装置、智能电视

Cited By (27)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN106156263A (zh) * 2015-05-14 2016-11-23 锐珂(上海)医疗器材有限公司 基于坐标的web页面提供方法及系统
CN105468382A (zh) * 2016-02-01 2016-04-06 浙江慧脑信息科技有限公司 一种自适应布局的编程方法
CN105468382B (zh) * 2016-02-01 2019-08-06 浙江慧脑信息科技有限公司 一种自适应布局的编程方法
CN107341167A (zh) * 2016-05-02 2017-11-10 谷歌公司 帮助数字内容的格式化的管理的用户界面
CN105975576A (zh) * 2016-05-04 2016-09-28 北京京东尚科信息技术有限公司 终端内容适配显示方法、装置和终端
CN105975576B (zh) * 2016-05-04 2019-12-31 北京京东尚科信息技术有限公司 终端内容适配显示方法、装置和终端
CN106407261A (zh) * 2016-08-24 2017-02-15 上海斐讯数据通信技术有限公司 一种页面自适应屏幕的方法及智能终端
CN108241505A (zh) * 2016-12-26 2018-07-03 航天信息股份有限公司 一种页面适配方法及装置
CN106528895A (zh) * 2016-12-29 2017-03-22 重庆南华中天信息技术有限公司 一种css资源前端显示装置
CN106886574A (zh) * 2017-01-20 2017-06-23 烽火通信科技股份有限公司 一种机顶盒浏览器的网页缩放处理方法及系统
CN106886574B (zh) * 2017-01-20 2019-11-08 烽火通信科技股份有限公司 一种机顶盒浏览器的网页缩放处理方法及系统
CN107066267A (zh) * 2017-03-27 2017-08-18 网易(杭州)网络有限公司 页面尺寸处理方法、装置及设备
CN107147890A (zh) * 2017-05-11 2017-09-08 西安交通大学 一种兼容不同分辨率和宽长比的多视频缩放模块及并行工作方法
CN107239190A (zh) * 2017-05-19 2017-10-10 西安诺瓦电子科技有限公司 窗口的偏移方法及装置
CN107480192A (zh) * 2017-07-12 2017-12-15 长城计算机软件与系统有限公司 一种浏览器界面自动调整的方法和系统
CN107967162A (zh) * 2017-11-22 2018-04-27 深圳市富途网络科技有限公司 一种基于Windows系统的应用程序高清晰显示方法
CN108399217B (zh) * 2018-02-07 2020-11-06 阿里巴巴(中国)有限公司 视图显示处理方法、装置及移动终端设备
CN108399217A (zh) * 2018-02-07 2018-08-14 广州阿里巴巴文学信息技术有限公司 视图显示处理方法、装置及移动终端设备
CN110647280A (zh) * 2019-09-30 2020-01-03 腾讯科技(深圳)有限公司 信息流的显示方法、装置、设备及介质
CN112395033A (zh) * 2020-11-18 2021-02-23 中国平安人寿保险股份有限公司 网页自适应方法及相关产品
CN112732253A (zh) * 2020-12-28 2021-04-30 中科院计算技术研究所大数据研究院 一种自适应终端的可视化大屏动态容器组件
CN113099182A (zh) * 2021-04-08 2021-07-09 西安应用光学研究所 基于机载并行处理架构的多视窗实时缩放方法
CN113099182B (zh) * 2021-04-08 2022-11-22 西安应用光学研究所 基于机载并行处理架构的多视窗实时缩放方法
CN113849254A (zh) * 2021-09-06 2021-12-28 掌阅科技股份有限公司 页面布局的自适应调整方法及计算设备
WO2023029171A1 (zh) * 2021-09-06 2023-03-09 掌阅科技股份有限公司 页面布局的自适应调整方法及计算设备
CN113791788A (zh) * 2021-11-17 2021-12-14 北京翼鸥教育科技有限公司 一种自适应的窗体调整方法、装置、电子设备及介质
CN114756190A (zh) * 2022-06-14 2022-07-15 统信软件技术有限公司 一种基于分辨率调整缩放的方法、装置及计算设备

Similar Documents

Publication Publication Date Title
CN104317968A (zh) 一种页面自适应调整方法及系统
CN104572668B (zh) 基于多个样式文件生成合并样式文件的方法和设备
CN104794116A (zh) 一种页面中元素的布局方法和装置
CN111177621B (zh) 一种web页面开发方法、装置及系统
CN103593196A (zh) 页面布局自适应方法及装置
CN109710865B (zh) 开放式自动布局方法、装置、电子设备和存储介质
CN105335445A (zh) 布局显示方法和装置
US11714953B2 (en) Facilitating dynamic document layout by determining reading order using document content stream cues
KR20150095658A (ko) 수정 동안 콘텐츠의 영역의 레이아웃 유지 기법
CN118244957B (zh) 基于dom模拟实现Table级联滚动的方法及装置
US20150074519A1 (en) Method and apparatus of controlling page element
CN105094622A (zh) 调节表格列宽的方法及设备
CN105574041A (zh) 一种数据重组方法和装置
CN103744598A (zh) 一种信息处理的方法和设备
CN111079944A (zh) 迁移学习模型解释实现方法及装置、电子设备、存储介质
CN108089858B (zh) 一种创建可视化界面的方法及装置
US7865848B2 (en) Layout optimization using parameterized cells
CN109164999B (zh) 一种表格自适应显示的方法、装置、设备及可读存储介质
CN111401017A (zh) 清单报表自动生成的方法及系统
CN111198997A (zh) 一种基于网页的数字显示方法及装置
US8909504B2 (en) Computing device, storage medium and method for processing dimension numbers using the computing device
CN109933323A (zh) 一种设置用户界面的方法及装置
CN112558969A (zh) 一种网页表单生成方法、装置、设备及介质
CN117270867A (zh) web前端大屏适配方法、装置及其应用
CN116702685A (zh) 一种针对射频电路的网表到版图的生成方法

Legal Events

Date Code Title Description
C06 Publication
PB01 Publication
C10 Entry into substantive examination
SE01 Entry into force of request for substantive examination
RJ01 Rejection of invention patent application after publication
RJ01 Rejection of invention patent application after publication

Application publication date: 20150128