[发明专利]一种HybridAPP中CSS样式兼容不同平台的方法及系统

说明书

技术领域

本发明涉及移动Hybrid APP前端技术领域，特别涉及一种Hybrid APP中CSS样式兼容不同平台的方法及系统。

背景技术

近些年来，随着互联网的高速发展，便携式移动设备与互联网的结合，大大的改变了我们的生活方式和工作方式，尤其是智能手机的快速普及，彻底颠覆了传统手机只作为通讯工具这一概念；现在只要一部智能手机就可以完成过去很多需要打开个人电脑才能完成的事情，这使我们的工作生活和学习都变得越来越便捷，越来越多的服务提供商也看准移动互联网的发展，借助智能手机的普及，推出了各种方便我们工作和生活的移动APP，我们只需要在手机上打开APP，不管何时何地就可以轻松实现购物、预订酒店、购买车票机票、花费充值、缴纳水电气费等服务，十分便捷，因此受到了用户的热爱，也改变了我们的生活。

Hybrid App的兴起是现阶段移动互联网产业的一种偶然。HTML5开发移动应用的可跨平台和廉价的优势让众多想进入移动互联网领域的公司开始心动。正是在这样是机缘巧合下，基于HTML5低成本跨平台开发优势又兼具Native App特质的Hybrid App技术进入混战，并且很快吸引了越来越多的关注。大幅的降低了移动应用的开发成本，可以通过现有应用商店模式发行，在用户桌面形成独立入口等，让Hybrid App成为解决移动应用开发困境不错的选择。

Hybrid App通常同时使用网页语言与程序语言开发，通过应用商店区分移动操作系统分发，用户需要安装使用的移动应用。总体特性更接近Native App，但是因为同时使用了网页语言编码，所以开发成本和难度比Native App要小很多。因此，Hybrid App兼具了Native App的所有优势，也兼具了使用HTML5跨平台开发低成本的优势。

但是，由于不同移动平台之间存在的差异，导致Hybrid APP中的HTML页面会在不同移动平台上的表现有不同的表现，这给用户造成了一定的不便。

发明内容

本发明的目的是克服上述背景技术中不足，提供一种Hybrid APP中CSS样式兼容不同平台的方法及系统，主要通过从HTML元素CSS样式表入手，针对不同移动平台，定义适配该平台的CSS样式表，以消除HTML页面在不同移动平台表现上的差异性。

为了达到上述的技术效果，本发明采取以下技术方案：

一种Hybrid APP中CSS样式兼容不同平台的方法，包含以下步骤：

A.建立HTML页面文件和外部样式表，确定操作平台一为基准平台及操作平台一上HTML页面定义的CSS样式为基准样式；

B.确定差异元素，其中，所述差异元素为HTML页面包含的页面元素中在其他操作平台上展示时与在所述基准平台上展示时展示样式存在差异的元素；

C.确定各差异元素的标准样式，并参照该标准样式修改所有差异元素的展示样式，使各差异元素在各操作平台的展示样式均与其标准样式相同；

D.分别对各差异元素在各操作平台的展示样式进行命名，其中，将差异元素M在操作平台N的展示样式定义为classM_N；

E.在HTML页面中定义JavaScript编码，所述JavaScript编码用于判断加载所述HTML页面的操作平台为操作平台一或操作平台N；

F.加载HTML页面，其中，显示加载HTML页面中包含的差异元素时，根据步骤E的判断结果，选择加载各差异元素与该操作平台相对应的展示样式进行展示。

进一步地，所述操作平台包含Android平台和iOS平台。

同时，本发明还公开了一种Hybrid APP中CSS样式兼容不同平台的系统，包含组件生成模块、差异诊断模块、标准确定模块、样式调整模块、平台判定模块、组件加载模块；

所述组件生成模块用于建立HTML页面文件和外部样式表；所述差异诊断模块用于确定HTML页面包含的页面元素中在各操作平台上展示时展示样式存在差异的差异元素；所述标准确定模块用于确定各差异元素在各操作平台上展示时的标准样式；所述样式调整模块用于将各差异元素在各操作平台上的展示样式调整为标准样式；所述平台判定模块用于判定当前加载HTML页面的操作平台的类型；所述组件加载模块用于加载HTML页面；