[发明专利]一种兼容PC端和手机端WEB界面的实现方法

说明书

技术领域

本发明涉及计算机互联网技术，特别涉及一种兼容PC端和手机端WEB界面的实现方法。

背景技术

随着互联网的发展,越来越多的产品需要同时兼容PC端和手机端，目前使用的技术一般是响应式布局，复杂的界面，或者前端经常变换的页面，响应式的实现效果不是很好，会出现很多冗余的代码，并且有可能在PC端显示成功了，在移动端页面却不能很友好的显示，后期维护起来也没有那么简单，需要考虑各种适应性，这无疑是增加了开发人员的工作量，那如果我们现在把PC端和移动端作为区分，我们可以针对不同的设备加载不同的.css层叠样式文件，这样设计元素很容易被复用，设计成本低，界面也会更加美观，并且如果那个设备上交互出问题了，只需要找对应设备的.css层叠样式文件更改即可，维护起来省时省力。

发明内容

本发明的目的在于提供一种检测flex布局属性完整性的方法及系统，用于解决现有技术中检测flex盒模型兼容性属性的完整性及顺序的正确性所造成的不仅工作量大而且有可能不准确的问题。

本发明一种兼容PC端和手机端WEB界面的实现方法，包括以下步骤：

先创建一份供PC端使用的.css层叠样式文件，再创建一份供移动端使用的.css层叠样式文件；查找WEB界面中div标签内定义的控件名称及该控件属性值；在.css层叠样式文件中设置跟div标签内控件名称相对应的显示样式；在同一套.html界面初始化中判断当前设备是PC还是移动设备；根据不同的设备加载不同的.css层叠样式文件，再加载.css层叠样式文件下的相关属性值。

其中，所述div标签内的控件包括id和class。

其中，使用JavaScript判断所述当前设备是PC还是移动设备：如果当前设备是Palm OS、Symbian、Android、iOS、Black BerryOS、Windows Phone8其中之一，则当前设备为移动设备；如果当前设备是Windows XP、Windows7或Mac Os x之一，则当前设备为PC设备。

本发明的实施例提供的技术方案可以包括以下有益效果：

针对以上特点，本发明提供了一种兼容PC端和手机端WEB界面的实现方法，可以在同一套WEB界面中，根据不同设备加载不同的.css层叠样式来向用户实现不同设备的友好的交互方式，同时也节约开发人员的维护成本。

附图说明

图1是兼容PC端和手机端WEB界面的实现方法的流程图。

具体实施方式

以下参考附图，对本发明予以进一步地详尽阐述。

请参阅附图1，在本实施例中，该一种兼容PC端和手机端WEB界面的实现方法，其特征在于，包括以下步骤：

步骤S1：创建一份供PC端使用的.css层叠样式文件，例如样式文件名可以为computer.css。

步骤S2：再创建一份供移动端使用的.css层叠样式文件，例如，样式文件名可以为mobile.css。

步骤S3：查找WEB界面中div标签内定义的控件名称及该控件属性值，其中，div标签内定义的控件名称可以是class或者id，所述控件的属性值可以这样定义即class＝”logoshow”或者id＝”logoshow”。

步骤S4：在.css层叠样式文件中设置跟div标签内控件名称相对应的显示样式。

步骤S5：在同一套.html界面初始化中判断当前设备是PC还是移动设备；

步骤S6：根据不同的设备加载不同的.css层叠样式文件，再加载.css层叠样式文件下的相关属性值。

其中，步骤S3中所述div标签内的控件包括id和class。

其中，步骤S5中使用JavaScript判断所述当前设备是PC还是移动设备：如果当前设备是Palm OS、Symbian、Android、iOS、Black BerryOS、Windows Phone8其中之一则当前设备为移动设备；如果当前设备是Windows XP、Windows7或Mac Os x之一，则当前设备为PC设备。

其中，一个较佳的实施例为，首先定义两个.css层叠样式表，一个供PC端使用，另一个作为移动端使用，例如，PC端的.css层叠样式表名称为computer.css，移动端的.css层叠样式表名称为moblie.css；不管是id的样式名称还是class的样式名称在computer.css和moblie.css中样式名称都是一样的。