一种页面模块的屏幕适配方法和装置制造方法及图纸

技术编号:15051566 阅读:48 留言:0更新日期:2017-04-05 22:47
本发明专利技术公开了一种页面模块的屏幕适配方法和装置,该方法包括以下步骤:获取终端的屏幕尺寸和页面模块的设计稿尺寸;根据所述终端的屏幕尺寸和所述页面模块的设计稿尺寸,设置页面数据中的根节点的字体尺寸属性,所述页面数据为所述页面模块所在页面的HTML代码。本发明专利技术通过设置页面数据中的根节点的字体尺寸属性,使得页面模块在不同终端上等比缩放,能够对具有不同屏幕尺寸的终端进行屏幕适配,提高了屏幕适配和页面开发的效率。

【技术实现步骤摘要】

本专利技术涉及计算机
,特别涉及一种页面模块的屏幕适配方法和装置
技术介绍
随着计算机技术的发展,浏览器页面中的页面模块的类型日益增多,页面模块的设计稿尺寸也各有不同,常见的设计稿尺寸有640px和750px等。此外,能够浏览页面的终端类型也日益增多,不同类型的终端通常具有不同的操作系统和屏幕尺寸,常见的屏幕尺寸有320px、375px和414px等。为了实现页面模块的屏幕适配,现有技术基于CSS3中的transform属性对页面模块进行等比缩放方案,或者基于CSS3中的Padding属性做等比布局,前者的图片渲染效果模糊,后者的使用范围有限,仅适用于对图片进行等比缩放。
技术实现思路
本专利技术提供了一种页面模块的屏幕适配方法和装置,以解决现有技术中的图片渲染效果模糊和使用范围有限的缺陷。本专利技术提供了一种页面模块的屏幕适配方法,包括以下步骤:获取终端的屏幕尺寸和页面模块的设计稿尺寸;根据所述终端的屏幕尺寸和所述页面模块的设计稿尺寸,设置页面数据中的根节点的字体尺寸属性,所述页面数据为所述页面模块所在页面的HTML代码。可选地,所述根据所述终端的屏幕尺寸和所述页面模块的设计稿尺寸,设置页面数据中的根节点的字体尺寸属性,具体为:获取所述页面模块的设计稿尺寸与预设属性值之间的比值作为所述页面模块的相对尺寸,并获取所述终端的屏幕尺寸与所述页面模块的相对尺寸之间的比值作为所述页面数据中的根节点的字体尺寸属性。可选地,所述根据所述终端的屏幕尺寸和所述页面模块的设计稿尺寸,设置页面数据中的根节点的字体尺寸属性之后,还包括:获取验证对象的实际尺寸,根据所述验证对象的实际尺寸、所述验证对象的相对尺寸以及所述页面数据中的根节点的字体尺寸属性,判断是否存在适配误差,并在存在适配误差时,根据所述验证对象的实际尺寸、所述验证对象的相对尺寸以及所述页面数据中的根节点的字体尺寸属性,获取误差比例,并根据所述误差比例调整所述页面数据中的根节点的字体尺寸属性。可选地,所述根据所述验证对象的实际尺寸、所述验证对象的相对尺寸以及所述页面数据中的根节点的字体尺寸属性,判断是否存在适配误差,具体为:判断所述验证对象的相对尺寸与所述页面数据中的根节点的字体尺寸属性的乘积是否与所述验证对象的实际尺寸相同,如果是,则确认不存在适配误差;否则,确认存在适配误差;所述根据所述验证对象的实际尺寸、所述验证对象的相对尺寸以及所述页面数据中的根节点的字体尺寸属性,获取误差比例,具体为:计算所述验证对象的相对尺寸与所述页面数据中的根节点的字体尺寸属性的乘积,将该乘积与所述验证对象的实际尺寸的比值作为误差比例;根据所述误差比例调整所述页面数据中的根节点的字体尺寸属性,具体为:获取所述页面数据中的根节点的字体尺寸属性与所述误差比例的乘积,将该乘积作为调整后的字体尺寸属性。可选地,所述获取验证对象的实际尺寸之前,还包括:创建所述验证对象,设置所述验证对象的相对尺寸,并将所述验证对象插入到所述页面数据中。可选地,所述获取验证对象的实际尺寸之后,还包括:将所述验证对象从所述页面数据中删除。可选地,所述根据所述终端的屏幕尺寸和所述页面模块的设计稿尺寸,设置页面数据中的根节点的字体尺寸属性之后,还包括:当所述页面数据被解析完毕后,判断所述终端的屏幕尺寸是否发生变化,如果是,则重新根据所述终端的屏幕尺寸和所述页面模块的设计稿尺寸,设置页面数据中的根节点的字体尺寸属性;否则,结束流程。可选地,所述根节点为所述HTML代码中的根元素<html>,所述字体尺寸属性为所述根元素<html>的font-size属性。本专利技术还提供了一种页面模块的屏幕适配装置,包括:第一获取模块,用于获取终端的屏幕尺寸和页面模块的设计稿尺寸;第一设置模块,用于根据所述第一获取模块获取到的所述终端的屏幕尺寸和所述页面模块的设计稿尺寸,设置页面数据中的根节点的字体尺寸属性,所述页面数据为所述页面模块所在页面的HTML代码。可选地,所述第一设置模块,具体用于获取所述页面模块的设计稿尺寸与预设属性值之间的比值作为所述页面模块的相对尺寸,并获取所述终端的屏幕尺寸与所述页面模块的相对尺寸之间的比值作为所述页面数据中的根节点的字体尺寸属性。可选地,所述的装置,还包括:第二获取模块,用于获取验证对象的实际尺寸;第一判断模块,用于根据所述验证对象的相对尺寸、所述页面数据中的根节点的字体尺寸属性,以及所述第二获取模块获取到的所述验证对象的实际尺寸,判断是否存在适配误差;第三获取模块,用于在所述第一判断模块判断出存在适配误差时,根据所述验证对象的实际尺寸、所述验证对象的相对尺寸以及所述页面数据中的根节点的字体尺寸属性,获取误差比例;第二设置模块,用于根据所述第三获取模块获取到的所述误差比例,调整所述页面数据中的根节点的字体尺寸属性。可选地,所述第一判断模块,具体用于判断所述验证对象的相对尺寸与所述页面数据中的根节点的字体尺寸属性的乘积是否与所述验证对象的实际尺寸相同,如果是,则确认不存在适配误差;否则,确认存在适配误差;所述第三获取模块,具体用于计算所述验证对象的相对尺寸与所述页面数据中的根节点的字体尺寸属性的乘积,将该乘积与所述验证对象的实际尺寸的比值作为误差比例;所述第二设置模块,具体用于获取所述页面数据中的根节点的字体尺寸属性与所述误差比例的乘积,将该乘积作为调整后的字体尺寸属性。可选地,所述的装置,还包括:创建模块,用于在所述第二获取模块获取验证对象的实际尺寸之前,创建所述验证对象,设置所述验证对象的相对尺寸,并将所述验证对象插入到所述页面数据中。可选地,所述的装置,还包括:删除模块,用于在所述第二获取模块获取验证对象的实际尺寸之后,将所述验证对象从所述页面数据中删除。可选地,所述的装置,还包括:第二判断模块,用于在所述页面数据被解析完毕后,判断所述终端的屏幕尺寸是否发生变化;所述第一设置模块,还用于在所述第二判断模块判断出所述终端的屏幕尺寸发生变化时,重新根据所述终端的屏幕尺寸和所述页面模块的设计稿尺寸,设置页面数据中的根节点的字体尺寸属性。可选地,所述根节点为所述HTML代码中的根元素<html>,所述字体尺寸属性为所述根元素<html>的font-size属性。本专利技术实施例通过设置页面数据中的根节点的字体尺寸属性,使得页面模块在不同终端上等比缩放,能够对具有不同屏幕尺寸的终端进行屏幕适配,提高了屏幕适配和页面开发的效率。附图说明图1为本专利技术实施例中的一种页面模块的屏幕适配方法流程图;图2为本专利技术实施例中的一种页面模块的屏幕适配装置结构图。具体实施方式下面将结合本专利技术实施例中的附图,对本专利技术实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例仅仅是本专利技术一部分实施例,而不是全部的实施例。基于本专利技术中的实施例,本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例,都属于本专利技术保护的范围。本专利技术实施例提供了一种页面模块的屏幕适配方法,如图1所示,包括以下步骤:步骤101,获取终端的屏幕尺寸和页面模块的设计稿尺寸。其中,终端的屏幕尺寸可以为终端的屏幕宽度,页面模块的设计稿尺寸可以为页面模块的设计稿宽度。例如本文档来自技高网...

【技术保护点】
一种页面模块的屏幕适配方法,其特征在于,包括以下步骤:获取终端的屏幕尺寸和页面模块的设计稿尺寸;根据所述终端的屏幕尺寸和所述页面模块的设计稿尺寸,设置页面数据中的根节点的字体尺寸属性,所述页面数据为所述页面模块所在页面的HTML代码。

【技术特征摘要】
1.一种页面模块的屏幕适配方法,其特征在于,包括以下步骤:获取终端的屏幕尺寸和页面模块的设计稿尺寸;根据所述终端的屏幕尺寸和所述页面模块的设计稿尺寸,设置页面数据中的根节点的字体尺寸属性,所述页面数据为所述页面模块所在页面的HTML代码。2.如权利要求1所述的方法,其特征在于,所述根据所述终端的屏幕尺寸和所述页面模块的设计稿尺寸,设置页面数据中的根节点的字体尺寸属性,具体为:获取所述页面模块的设计稿尺寸与预设属性值之间的比值作为所述页面模块的相对尺寸,并获取所述终端的屏幕尺寸与所述页面模块的相对尺寸之间的比值作为所述页面数据中的根节点的字体尺寸属性。3.如权利要求1所述的方法,其特征在于,所述根据所述终端的屏幕尺寸和所述页面模块的设计稿尺寸,设置页面数据中的根节点的字体尺寸属性之后,还包括:获取验证对象的实际尺寸,根据所述验证对象的实际尺寸、所述验证对象的相对尺寸以及所述页面数据中的根节点的字体尺寸属性,判断是否存在适配误差,并在存在适配误差时,根据所述验证对象的实际尺寸、所述验证对象的相对尺寸以及所述页面数据中的根节点的字体尺寸属性,获取误差比例,并根据所述误差比例调整所述页面数据中的根节点的字体尺寸属性。4.如权利要求3所述的方法,其特征在于,所述根据所述验证对象的实际尺寸、所述验证对象的相对尺寸以及所述页面数据中的根节点的字体尺寸属性,判断是否存在适配误差,具体为:判断所述验证对象的相对尺寸与所述页面数据中的根节点的字体尺寸属性的乘积是否与所述验证对象的实际尺寸相同,如果是,则确认不存在适配误差;否则,确认存在适配误差;所述根据所述验证对象的实际尺寸、所述验证对象的相对尺寸以及所述页面数据中的根节点的字体尺寸属性,获取误差比例,具体为:计算所述验证对象的相对尺寸与所述页面数据中的根节点的字体尺寸属性的乘积,将该乘积与所述验证对象的实际尺寸的比值作为误差比例;根据所述误差比例调整所述页面数据中的根节点的字体尺寸属性,具体为:获取所述页面数据中的根节点的字体尺寸属性与所述误差比例的乘积,将该乘积作为调整后的字体尺寸属性。5.如权利要求3所述的方法,其特征在于,所述获取验证对象的实际尺寸之前,还包括:创建所述验证对象,设置所述验证对象的相对尺寸,并将所述验证对象插入到所述页面数据中。6.如权利要求5所述的方法,其特征在于,所述获取验证对象的实际尺寸之后,还包括:将所述验证对象从所述页面数据中删除。7.如权利要求1所述的方法,其特征在于,所述根据所述终端的屏幕尺寸和所述页面模块的设计稿尺寸,设置页面数据中的根节点的字体尺寸属性之后,还包括:当所述页面数据被解析完毕后,判断所述终端的屏幕尺寸是否发生变化,如果是,则重新根据所述终端的屏幕尺寸和所述页面模块的设计稿尺寸,设置页面数据中的根节点的字体尺寸属性;否则,结束流程。8.如权利要求1所述的方法,其特征在于,所述根节点为所述HTML代码中的根元素<html>,所述字体尺...

【专利技术属性】
技术研发人员:沙斌斌李津文飞豹陈翔王荣荣潘杰茂陈挺
申请(专利权)人:腾讯科技深圳有限公司
类型:发明
国别省市:广东;44

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1