中文摘要：

为了解决Web App运行于多种设备屏幕和浏览器上的显示问题,提出Web App跨平台应用技术方案,以解决设备屏幕的自适应问题和浏览器兼容性问题;并提出基于响应式设计的界面布局方案,用以解决当设备屏幕和用户行为变化时,Web App界面元素的定位和显示问题。其关键技术为基于弹性盒的缩放模型以及界面元素的定位方法,通过设计实践和发布测试实验验证了这一方法的有效性。基于此方案设计开发的Web App能够实现不同设备环境和用户使用行为下的合理布局与正确显示,始终带给用户良好的视觉体验。

英文摘要：

In order to resolve the display problem while running on different screen of devices and different web browsers of Web App, the cross-platform application technology scheme is used to resolve the self-adaptive problem with different device screens, resolution and the compatibility issue with different web browsers.The interface layout scheme based responsive design is proposed to resolve the position and display problem caused by the change of device and user behave. The key technology is the scale model based on flexible box and the position method of the interface elements. And the effectiveness of this method is verified by design practice and the test experiment. Web App designed and developed by this method can realize a reasonable layout and correct display on different web browsers of many different devices, and bring users good visual experience all the time.