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

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

【技术实现步骤摘要】

本专利技术属于web设计领域，具体涉及。
技术介绍
目前，互联网、电信网、电视网相互渗透、兼容、融合已成为发展趋势。然而，不同终端设备有各自的屏幕分辨率、清晰度、屏幕定向方式及浏览器等，通过同一界面展现的结果往往无法适配三种屏幕、以及多个终端屏幕尺寸，这样便造成用户操作不便。为了保证服务广泛覆盖，提升展示效果，使具有不同设备偏好的用户群体摆脱终端限制，通过电脑、智能手机、IPTV访问同一内容或服务时，均能获得良好的使用体验，就必须针对不同的终端各自开发一款界面，比如网站、手机客户端和IPTV EPG0否则，用户通过不同终端访问同一内容时，经常会出现布局混乱、图片重叠、显示不完整或因界面缩放引起操作不便等各种问题，用户体验差。然而，在针对同一应用或服务基于电脑、智能手机及IPTV分别设计、开发页面时，发现其至少存在以下缺陷: 第一，针对同一内容重复设计、开发，需耗费大量的人力、物力、资金、时间等，产生严重的资源浪费。第二，基于不同屏幕终端各自孤立设计、开发的内容，后续的更新、维护极为不便，也难以保证内容的一致性。第三，针对不同终端各自开发，难以保证相对一致的界面风格、产品体验，并且不便于资源的共享和管理。第四，响应式设计实施难度大，需`要针对多种情况编写开发代码，不仅对终端、浏览器要求较高，也不适应大量信息的频繁更新。
技术实现思路
为满足内容跨屏展现的需求，解决适配不同屏幕终端时，需要重复设计、开发、维护多个页面的矛盾，本专利技术提出一种能够通过服务端实现自动适配，基于电脑、智能手机及IPTV等多种屏幕终端展示内容的方法。本专利技术的技术方案是:，包括对展示的内容模块化、弹性化；对不同内容模块的自动处理，对不同终端的自动适配。所述的对展示的内容模块化、弹性化包括如下步骤: 步骤11:根据界面设计及内容，合理规划，将界面的全部内容切分为N个布局模块；步骤12:布局模块内，以该模块大小为参照值，利用“百分比宽度=目标元素宽度/模块宽度”这个公式，设置模块内文字、图片的相对尺寸； 所述的对不同内容模块的自动处理，通过web服务器完成，包括如下步骤: 步骤21:上传某一界面程序，并更新、上传配置文件，该配置文件对此界面程序开发中定义的N个模块加以说明，并预设对这N个模块中每一个模块的一组处理参数M1、M2…M ； 步骤22:服务器处理单元读取配置文件中各模块的处理参数，并按照各模块的处理参数重新定义N组样式； 步骤23:服务器存储单元记录、存储处理结果； 步骤24:当模块中包含图片时，服务器处理单元向图形引擎提交新样式下的图片尺寸； 步骤25:图形引擎按照新的图片尺寸对图片进行缩放、裁切； 步骤26:图形引擎传送处理后的新图片至图片服务器，并向服务器的处理单元返回处理完成提示； 步骤27:最后，服务器向开发设备返回处理完成提示； 所述对不同终端的自动适配，包括如下步骤: 步骤31:不同终端提交访问请求； 步骤32:服务器接收电脑、智能手机及IPTV不同终端提交的访问请求，获取终端参数，包括浏览器类型、浏览器窗口大小、屏幕分辨率等； 步骤33:服务器根据终端参数为各模块配置样式文件，比如，通过手机访问界面时，选取模块尺寸为320X240的A模块样式，模块尺寸为240 X 180的B模块样式等； 步骤34:服务器返回上述文件，终端进行解释； 步骤35:终端解释过程中，当检测到包含图片时，向图片服务器发送图片加载请求； 步骤36:图片服务器接收请求，并将图片返回至终端； 步骤37:终端加载图片，继续解释； 步骤38:终端完成解释，显示适配终端的界面效果。本专利技术的有益效果:本专利技术摒弃为电脑、智能手机及IPTV各自开发一套用户界面的做法；在请求某一内容时，区分不同屏幕终端给予不尽相同的返回值进行响应，从而在不同终端用户访问时，展现合适的显示效果。与现有技术相比，显著的效果及优点如下: 1、同一内容或服务基于电脑、智能手机及IPTV等多种终端自动化适配，提升了设计和开发效率； 2、不同终端呈现不尽相同的内容和效果，用户体验好； 3、仅需更新维护一套界面，降低了维护工作的人力和时间成本； 4、对终端要求低，更易实施，具有普适性。【附图说明】图1是本专利技术中实现多屏展示同一内容的交互顺序图； 图2是本专利技术中服务器处理模块样式及图片的示意图； 图3是本专利技术中自动适配不同终端的流程图； 图4是本专利技术中正常窗口下界面呈现效果的示意图； 图5是本专利技术中不同终端访问同一内容时不同展现效果的示意图。【具体实施方式】实施例1 如图1所示，是本专利技术中实现多屏幕展示同一内容的交互顺序图。同一内容在电脑、智能手机及IPTV实现自动适应，呈现不同展示效果的方法，其特征在于该方法至少包括如下步骤: 步骤1、对于需要展示的内容模块化、弹性化； 步骤2、对于不同内容模块的自动处理； 步骤3、对于不同终端的自动适配。上述步骤I中，对于需要展示的内容模块化、弹性化具体实现方法是: 步骤11、根据界面设计及内容，合理规划，将界面的全部内容切分为N个布局模块；步骤12、布局模块内，以该模块大小为参照值，利用“百分比宽度=目标元素宽度/模块宽度”这个公式，设置模块内文字、图片的相对尺寸。上述步骤2中，对于不同内容模块的自动处理，通过web服务器完成。web服务器预先安装程序使其具有以下功能: 1、可以接受一组外部输入值； 2、可以按照这组外部输入值重新定义相应内容模块的样式，包括该内容模块布局的长度/宽度；该模块内文字的大小、显示内容的多少；利用图形引擎处理模块内的图片使其适合该模块尺寸； 3、可以存储根据外部输入值改变后的一组样式结果； 4、可以根据预设临界值控制特殊情况下的样式变化，比如字号小于临界值时，弹出错误提示。`如图2所示，是本专利技术中服务器处理模块样式及图片的示意图，包括如下步骤: 步骤21、上传某一界面程序，并更新、上传配置文件，该配置文件对此界面程序开发中定义的N个模块加以说明，并预设对这N个模块中每一个模块的一组处理参数M1、M2…M ；步骤22、服务器处理单元读取配置文件中各模块的处理参数，并按照各模块的处理参数重新定义N组样式； 步骤23、服务器存储单元记录、存储处理结果； 步骤24、当模块中包含图片时，服务器处理单元向图形引擎提交新样式下的图片尺寸； 步骤25、图形引擎按照新的图片尺寸对图片进行缩放、裁切； 步骤26、图形引擎传送处理后的新图片至图片服务器，并向服务器的处理单元返回处理完成提示。步骤27、最后，服务器向开发设备返回处理完成提示。上述步骤3中、对于不同终端的自动适配，是指服务器响应某一内容请求时，将根据终端参数，包括浏览器类型、浏览器窗口尺寸、屏幕分辨率等自动匹配各模块样式，重新排版。如图3所示，是本专利技术中自动适配不同终端的流程示意图，具体包括如下步骤: 步骤31、不同终端提交访问请求； 步骤32、服务器接收电脑、智能手机及IPTV不同终端提交的访问请求，获取终端参数，包括浏览器类型、浏览器窗口大小、屏幕分辨率等； 步骤33、服务器根据终端参数为各模块配置样式文件，比如，通过手机访问界面时，选取模块尺寸为320X240的A模块样本文档来自技高网...

【技术保护点】
一种页面自动适配实现内容多屏展示的方法，包括对展示的内容模块化、弹性化；对不同内容模块的自动处理，对不同终端的自动适配；其特征在于：所述的对展示的内容模块化、弹性化包括如下步骤：步骤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：终端完成解释，显示适配终端的界面效果。...

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

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