一种页面自动适配实现内容多屏展示的方法技术

技术编号:9765969 阅读:251 留言:0更新日期:2014-03-15 11:56
本发明专利技术公开了一种页面自动适配实现内容多屏展示的方法,包括将需要展示的内容切分为N个布局模块,根据模块尺寸设置内容样式;然后采用web服务器将布局模块按照配置文件预设的尺寸自动生成一组样式;最后根据不同终端为各内容模块选取合适的样式重新排版。本发明专利技术摒弃为电脑、智能手机及IPTV各自开发一套用户界面的做法;在请求某一内容时,区分不同屏幕终端给予不尽相同的返回值进行响应,从而在不同终端用户访问时,展现合适的显示效果。

【技术实现步骤摘要】

本专利技术属于web设计领域,具体涉及。
技术介绍
目前,互联网、电信网、电视网相互渗透、兼容、融合已成为发展趋势。然而,不同终端设备有各自的屏幕分辨率、清晰度、屏幕定向方式及浏览器等,通过同一界面展现的结果往往无法适配三种屏幕、以及多个终端屏幕尺寸,这样便造成用户操作不便。为了保证服务广泛覆盖,提升展示效果,使具有不同设备偏好的用户群体摆脱终端限制,通过电脑、智能手机、IPTV访问同一内容或服务时,均能获得良好的使用体验,就必须针对不同的终端各自开发一款界面,比如网站、手机客户端和IPTV EPG0否则,用户通过不同终端访问同一内容时,经常会出现布局混乱、图片重叠、显示不完整或因界面缩放引起操作不便等各种问题,用户体验差。然而,在针对同一应用或服务基于电脑、智能手机及IPTV分别设计、开发页面时,发现其至少存在以下缺陷: 第一,针对同一内容重复设计、开发,需耗费大量的人力、物力、资金、时间等,产生严重的资源浪费。第二,基于不同屏幕终端各自孤立设计、开发的内容,后续的更新、维护极为不便,也难以保证内容的一致性。第三,针对不同终端各自开发,难以保证相对一致的界面风格、产品体本文档来自技高网...

【技术保护点】
一种页面自动适配实现内容多屏展示的方法,包括对展示的内容模块化、弹性化;对不同内容模块的自动处理,对不同终端的自动适配;其特征在于:所述的对展示的内容模块化、弹性化包括如下步骤:步骤11:根据界面设计及内容,合理规划,将界面的全部内容切分为N个布局模块;步骤12:布局模块内,以该模块大小为参照值,利用“百分比宽度=目标元素宽度/模块宽度”这个公式,设置模块内文字、图片的相对尺寸;所述的对不同内容模块的自动处理,通过web服务器完成,包括如下步骤:步骤21:上传某一界面程序,并更新、上传配置文件,该配置文件对此界面程序开发中定义的N个模块加以说明,并预设对这N个模块中每一个模块的一组处理参数M1...

【技术特征摘要】
1.一种页面自动适配实现内容多屏展示的方法,包括对展示的内容模块化、弹性化;对不同内容模块的自动处理,对不同终端的自动适配;其特征在于: 所述的对展示的内容模块化、弹性化包括如下步骤: 步骤11:根据界面设计及内容,合理规划,将界面的全部内容切分为N个布局模块;步骤12:布局模块内,以该模块大小为参照值,利用“百分比宽度=目标元素宽度/模块宽度”这个公式,设置模块内文字、图片的相对尺寸; 所述的对不同内容模块的自动处理,通过web服务器完成,包括如下步骤: 步骤21:上传某一界面程序,并更新、上传配置文件,该配置文件对此界面程序开发中定义的N个模块加以说明,并预设对这N个模块中每一个模块的一组处理参数Ml、M2…M ;步骤22:服务器处理单元读取配置文件中各模块的处理参数,并按照各模块的处理参数重新定义N组样式; 步骤23:服务器存储单元记录、存储处理结果; 步骤24:当模块中包含图片时,服务器处理单元向图形引擎提交新样式下的图片尺寸...

【专利技术属性】
技术研发人员:陈林袁黎轶陈晴葛新周玲玲
申请(专利权)人:江苏省公用信息有限公司
类型:发明
国别省市:

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

1