pc端html转换手机端,一种兼容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端和手机端WE