[发明专利]一种页面自动适配实现内容多屏展示的方法

摘要

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

主权项

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