网页适配方法、装置和系统、设备制造方法及图纸

技术编号:23604288 阅读:22 留言:0更新日期:2020-03-28 05:29
本发明专利技术公开了网页适配方法、装置和系统、设备,其中网页适配方法,包括获取网页模板中编辑区域的区域比例和显示屏幕的屏幕比例;在所述区域比例与所述屏幕比例不一致的情况下,调整所述网页模板中编辑区域的坐标值,以使所述网页模板中编辑区域于所述屏幕比例对应的虚拟网页模板框架中完全且居中显示;适配所述网页模块于所述显示屏幕,以使所述编辑区域的坐标长度转换后的像素长度与所述显示屏幕的像素长度一致,或者,所述编辑区域的坐标宽度转换后的像素宽度与所述显示屏幕的像素宽度一致。本申请将固定比例网页模板自动适配于不同屏幕比例的移动设备,最大限度地还原网页编辑器所开发的网页模板。

Web page adaptation method, device, system and equipment

【技术实现步骤摘要】
网页适配方法、装置和系统、设备
本专利技术涉及终端
,尤其涉及网页适配方法、装置和系统、设备。
技术介绍
目前移动终端的机型繁杂,不同机型移动终端的显示屏幕的屏幕比例不尽相同。移动终端安装的浏览器可以显示网页(又称H5页面),为了满足不同屏幕比例的需求,通常会开发出多种主流屏幕比例的网页模板,以适用于不同屏幕比例的移动终端。由于主流屏幕比例较多所以需开发网页的种类也较多,并且目前网页开发过程中需要开发人员自己创建组件较为繁琐,为了简化网页开发过程,衍生出网页编辑器(又称H5编辑器)。在网页编辑器上可以采用拖拽方式添加组件,比如一个音乐组件,可以直接拖拽到网页上添加音乐列表,开发完成的网页模板便具有音乐播放功能,从而简单、方便地开发完成网页模板。但是,目前网页编辑器只有一个固定比例的视窗,开发完成的网页模板也为该固定比例。直接使用固定比例的网页模板到不同屏幕比例的移动终端,会出现显示屏幕中的网页显示不完整、网页背景留白过多,网页中组件长宽比例变形等不适配问题。
技术实现思路
于上述问题,提出了本本文档来自技高网...

【技术保护点】
1.一种网页适配方法,其特征在于,包括:/n获取网页模板中编辑区域的区域比例和显示屏幕的屏幕比例;/n在对比所述区域比例和所述屏幕比例后确定所述显示屏幕过宽的情况下,调整所述网页模板中编辑区域的多个坐标值,以使所述网页模板中编辑区域在虚拟网页模板框架与所述屏幕比例对应的情况下完全显示;/n适配所述网页模板于所述显示屏幕。/n

【技术特征摘要】
1.一种网页适配方法,其特征在于,包括:
获取网页模板中编辑区域的区域比例和显示屏幕的屏幕比例;
在对比所述区域比例和所述屏幕比例后确定所述显示屏幕过宽的情况下,调整所述网页模板中编辑区域的多个坐标值,以使所述网页模板中编辑区域在虚拟网页模板框架与所述屏幕比例对应的情况下完全显示;
适配所述网页模板于所述显示屏幕。


2.如权利要求1所述的方法,其特征在于,所述调整所述网页模板中编辑区域的多个坐标值,以使所述网页模板中编辑区域在虚拟网页模板框架与所述屏幕比例对应的情况下完全显示,包括:
调整所述虚拟网页模板框架的坐标宽度与所述网页模板的坐标宽度适配;
在所述虚拟网页模板框架的坐标宽度与所述网页模板的坐标宽度适配的情况下,计算与所述屏幕比例对应的虚拟网页模板框架的坐标长度;
计算所述虚拟网页模板框架的坐标长度与所述网页模板的坐标长度的商值,并根据商值确定缩小比例;
按所述缩小比例调整所述网页模板获得缩小网页模板,以使所述网页模板中编辑区域在虚拟网页模板框架与所述屏幕比例对应的情况下完全显示。


3.如权利要求2所述的方法,其特征在于,在适配所述网页模板于所述显示屏幕之前还包括:调整所述网页模板中编辑区域的多个坐标值,以使所述网页模板中编辑区域于所述屏幕比例对应的虚拟网页模板框架中居中显示;
所述调整所述网页模板中编辑区域的多个坐标值进一步包括:
根据所述缩小网页模板的宽度以及所述虚拟网页模板框架的宽度,确定所述缩小网页模板的横向偏移量,该横向偏移量可使所述缩小网页模板于所述虚拟网页模板框架中居中显示;
维持所述缩小网页模板中编辑区域的纵坐标不变,根据所述横向偏移量调整所述网页模板的位置。


4.如权利要求3所述的方法,其特征在于,所述网页模板还包括背景区域,所述背景区域用于插入背景图像;
所述编辑区域为所述背景区域的子集,所述编辑区域位于所述背景区域之上,且,所述编辑区域与所述背景区域分离;
则按所述缩小比例调整所述网页模板获得缩小网页模板,包括:
按所述缩小比例调整所述网页模板中背景区域和编辑区域;则在所述获得调整后网页模板之前还包括:维持所述缩小网页模板中背景区域和编辑区域的纵坐标不变、横坐标增加所述横向偏移量。


5.如权利要求1所述的方法,其特征在于,还包括:
在对比所述区域比例和所述屏幕比例后确定所述显示屏幕过长的情况下,调整所述网页模板中编辑区域的多个坐标值,以使所述网页模板中编辑区域于所述屏幕比例对应的虚拟网页模板框架中居中显示;
则所述调整所述网页模板中编辑区域的多个坐标值进一步包括:
调整所述虚拟网页模板框架的坐标宽度与所述网页模板的坐标宽度适配;
在所述虚拟网页模...

【专利技术属性】
技术研发人员:谢基颜
申请(专利权)人:北京国双科技有限公司
类型:发明
国别省市:北京;11

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

1