发明名称 一种页面自动适配实现内容多屏展示的方法
摘要 发明公开了一种页面自动适配实现内容多屏展示的方法,包括将需要展示的内容切分为N个布局模块,根据模块尺寸设置内容样式;然后采用web服务器将布局模块按照配置文件预设的尺寸自动生成一组样式;最后根据不同终端为各内容模块选取合适的样式重新排版。本发明摒弃为电脑、智能手机及IPTV各自开发一套用户界面的做法;在请求某一内容时,区分不同屏幕终端给予不尽相同的返回值进行响应,从而在不同终端用户访问时,展现合适的显示效果。
申请公布号 CN103631958A 申请公布日期 2014.03.12
申请号 CN201310688477.9 申请日期 2013.12.17
申请人 江苏省公用信息有限公司 发明人 陈林;袁黎轶;陈晴;葛新;周玲玲
分类号 G06F17/30(2006.01)I 主分类号 G06F17/30(2006.01)I
代理机构 南京天华专利代理有限责任公司 32218 代理人 夏平
主权项 一种页面自动适配实现内容多屏展示的方法,包括对展示的内容模块化、弹性化;对不同内容模块的自动处理,对不同终端的自动适配;其特征在于:所述的对展示的内容模块化、弹性化包括如下步骤:步骤11:根据界面设计及内容,合理规划,将界面的全部内容切分为N个布局模块;步骤12:布局模块内,以该模块大小为参照值,利用“百分比宽度=目标元素宽度/模块宽度”这个公式,设置模块内文字、图片的相对尺寸;所述的对不同内容模块的自动处理,通过web服务器完成,包括如下步骤:步骤21:上传某一界面程序,并更新、上传配置文件,该配置文件对此界面程序开发中定义的N个模块加以说明,并预设对这N个模块中每一个模块的一组处理参数M1、M2…M;步骤22:服务器处理单元读取配置文件中各模块的处理参数,并按照各模块的处理参数重新定义N组样式;步骤23:服务器存储单元记录、存储处理结果;步骤24:当模块中包含图片时,服务器处理单元向图形引擎提交新样式下的图片尺寸;步骤25:图形引擎按照新的图片尺寸对图片进行缩放、裁切;步骤26:图形引擎传送处理后的新图片至图片服务器,并向服务器的处理单元返回处理完成提示;步骤27:最后,服务器向开发设备返回处理完成提示;所述对不同终端的自动适配,包括如下步骤:步骤31:不同终端提交访问请求;步骤32:服务器接收电脑、智能手机及IPTV不同终端提交的访问请求,获取终端参数,包括浏览器类型、浏览器窗口大小、屏幕分辨率等;步骤33:服务器根据终端参数为各模块配置样式文件,比如,通过手机访问界面时,选取模块尺寸为320×240的A模块样式,模块尺寸为240×180的B模块样式等;步骤34:服务器返回上述文件,终端进行解释;步骤35:终端解释过程中,当检测到包含图片时,向图片服务器发送图片加载请求;步骤36:图片服务器接收请求,并将图片返回至终端;步骤37:终端加载图片,继续解释;步骤38:终端完成解释,显示适配终端的界面效果。
地址 210006 江苏省南京市中山南路501号