【技术实现步骤摘要】
本专利技术涉及计算机
,特别涉及一种页面模块的屏幕适配方法和装置。
技术介绍
随着计算机技术的发展,浏览器页面中的页面模块的类型日益增多,页面模块的设计稿尺寸也各有不同,常见的设计稿尺寸有640px和750px等。此外,能够浏览页面的终端类型也日益增多,不同类型的终端通常具有不同的操作系统和屏幕尺寸,常见的屏幕尺寸有320px、375px和414px等。为了实现页面模块的屏幕适配,现有技术基于CSS3中的transform属性对页面模块进行等比缩放方案,或者基于CSS3中的Padding属性做等比布局,前者的图片渲染效果模糊,后者的使用范围有限,仅适用于对图片进行等比缩放。
技术实现思路
本专利技术提供了一种页面模块的屏幕适配方法和装置,以解决现有技术中的图片渲染效果模糊和使用范围有限的缺陷。本专利技术提供了一种页面模块的屏幕适配方法,包括以下步骤:获取终端的屏幕尺寸和页面模块的设计稿尺寸;根据所述终端的屏幕尺寸和所述页面模块的设计稿尺寸,设置页面数据中的根节点的字体尺寸属性,所述页面数据为所述页面模块所在页面的HTML代码。可选地,所述根据所述终端的屏幕尺寸和所述页面模块的设计稿尺寸,设置页面数据中的根节点的字体尺寸属性,具体为:获取所述页面模块的设计稿尺寸与预设属性值之间的比值作为所述页面模块的相对尺寸,并获取所述终端的屏幕尺寸与所述页面模块的相对尺寸之间的比值作为所述页面数据中的根节点的字体尺寸属性。可选地,所述根据所述终端的屏幕尺寸和所述页面模块的设计稿尺寸,设置页面数据中的根节点的字体尺寸属性之后,还包括:获取验证对象的实际尺 ...
【技术保护点】
一种页面模块的屏幕适配方法,其特征在于,包括以下步骤:获取终端的屏幕尺寸和页面模块的设计稿尺寸;根据所述终端的屏幕尺寸和所述页面模块的设计稿尺寸,设置页面数据中的根节点的字体尺寸属性,所述页面数据为所述页面模块所在页面的HTML代码。
【技术特征摘要】
1.一种页面模块的屏幕适配方法,其特征在于,包括以下步骤:获取终端的屏幕尺寸和页面模块的设计稿尺寸;根据所述终端的屏幕尺寸和所述页面模块的设计稿尺寸,设置页面数据中的根节点的字体尺寸属性,所述页面数据为所述页面模块所在页面的HTML代码。2.如权利要求1所述的方法,其特征在于,所述根据所述终端的屏幕尺寸和所述页面模块的设计稿尺寸,设置页面数据中的根节点的字体尺寸属性,具体为:获取所述页面模块的设计稿尺寸与预设属性值之间的比值作为所述页面模块的相对尺寸,并获取所述终端的屏幕尺寸与所述页面模块的相对尺寸之间的比值作为所述页面数据中的根节点的字体尺寸属性。3.如权利要求1所述的方法,其特征在于,所述根据所述终端的屏幕尺寸和所述页面模块的设计稿尺寸,设置页面数据中的根节点的字体尺寸属性之后,还包括:获取验证对象的实际尺寸,根据所述验证对象的实际尺寸、所述验证对象的相对尺寸以及所述页面数据中的根节点的字体尺寸属性,判断是否存在适配误差,并在存在适配误差时,根据所述验证对象的实际尺寸、所述验证对象的相对尺寸以及所述页面数据中的根节点的字体尺寸属性,获取误差比例,并根据所述误差比例调整所述页面数据中的根节点的字体尺寸属性。4.如权利要求3所述的方法,其特征在于,所述根据所述验证对象的实际尺寸、所述验证对象的相对尺寸以及所述页面数据中的根节点的字体尺寸属性,判断是否存在适配误差,具体为:判断所述验证对象的相对尺寸与所述页面数据中的根节点的字体尺寸属性的乘积是否与所述验证对象的实际尺寸相同,如果是,则确认不存在适配误差;否则,确认存在适配误差;所述根据所述验证对象的实际尺寸、所述验证对象的相对尺寸以及所述页面数据中的根节点的字体尺寸属性,获取误差比例,具体为:计算所述验证对象的相对尺寸与所述页面数据中的根节点的字体尺寸属性的乘积,将该乘积与所述验证对象的实际尺寸的比值作为误差比例;根据所述误差比例调整所述页面数据中的根节点的字体尺寸属性,具体为:获取所述页面数据中的根节点的字体尺寸属性与所述误差比例的乘积,将该乘积作为调整后的字体尺寸属性。5.如权利要求3所述的方法,其特征在于,所述获取验证对象的实际尺寸之前,还包括:创建所述验证对象,设置所述验证对象的相对尺寸,并将所述验证对象插入到所述页面数据中。6.如权利要求5所述的方法,其特征在于,所述获取验证对象的实际尺寸之后,还包括:将所述验证对象从所述页面数据中删除。7.如权利要求1所述的方法,其特征在于,所述根据所述终端的屏幕尺寸和所述页面模块的设计稿尺寸,设置页面数据中的根节点的字体尺寸属性之后,还包括:当所述页面数据被解析完毕后,判断所述终端的屏幕尺寸是否发生变化,如果是,则重新根据所述终端的屏幕尺寸和所述页面模块的设计稿尺寸,设置页面数据中的根节点的字体尺寸属性;否则,结束流程。8.如权利要求1所述的方法,其特征在于,所述根节点为所述HTML代码中的根元素<html>,所述字体尺...
【专利技术属性】
技术研发人员:沙斌斌,李津,文飞豹,陈翔,王荣荣,潘杰茂,陈挺,
申请(专利权)人:腾讯科技深圳有限公司,
类型:发明
国别省市:广东;44
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。