Abstract: In recent years, the development of mobile Internet and mobile technology has promoted the arrival of mobile era. As mobile application is becoming an integral part of the Internet, the migration of Web application based on traditional PC terminal to mobile terminal has become a rigid demand for enterprise development strategies, and the number of mobile sites and mobile applications for smart devices has also increased rapidly. Although Web site based on traditional PC terminal can browse in the mobile terminal, there are issues in compatibility, screen size, design style, content and other aspects, resulting in the poor user experience. On the other hand, native mobile applications have many problems, such as long development and testing cycle, and high development cost, and it makes this issue even more prominent to develop multiple versions of software. Facing the contradiction between requirement for rapid development of mobile application and mobile platform diversity, and the need of the migration of the PC website to the mobile site, it is a good solution to design a cross platform software system which can accommodate many terminals. In this paper, HTML5, JavaScript and CSS are used to realize the hybrid dam safety monitoring system. On the basis of adapting the PC end B/S architecture, the source code is packaged and compiled into mobile application adapted to Android and IOS systems. As the development at a time can be applied in multi-terminal and multi-platform, the development cost is reduced, and good results are obtained.

Key words: dam safety monitoring, HTML5, mobile development, cross platform

摘要： 近年来，移动互联网与移动技术的发展促进了移动时代的到来。移动应用日益成为互联网不可或缺的一部分，传统PC端的Web应用向移动终端的迁移已经成为企业发展战略的一种硬性需求，适用于智能设备的移动网站和移动应用的数量也迅速增长。一方面，传统的PC端Web网站虽然能够在移动浏览器上浏览，但是存在兼容性、屏幕尺寸、设计风格和网页内容等方面的问题，使用户体验不佳。另一方面，原生移动应用存在开发、测试周期长，开发成本高等问题，开发一种软件的多个版本使得这一问题更为突出。面对移动应用软件快速开发的需求与移动平台多样化特征之间的矛盾，以及PC网站向移动网站迁移的发展需求，设计一种跨平台能适应多种终端的软件系统是很好的解决方法。采用HTML5、JavaScript和CSS来实现混合型的大坝安全监测系统，在适应PC端B/S架构基础上，将源代码经过打包编译成适应Android和IOS系统的移动应用，一次开发就能在多终端多平台上应用，降低了开发成本，取得了很好的效果。

关键词: 大坝安全监测, HTML5, 移动开发, 跨平台