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端和手机端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中样式名称都是一样的。

然后在同样样式名称的class样式中实现不同的设备的展现样式。如在WEB界面首页当中的logo图片在PC端中展示的大小宽高都是80像素，在移动端中只需要40像素，我们暂定义用class样式来显示，那么我们先在静态界面中定义一个class为logoshow，然后在computer.css中对应这个class样式值为#logoshow{width:80px；height:80px；},我们在移动端这个class的样式值则为#logoshow{width:40px；height:40px；}，这样我们即以同样的方式分别定义了PC端和移动端不同显示样式的属性值。

当我们PC端和移动端.css层叠样式文件都定义完成后，在.html初始化引入样式时，我们通过JavaScript判断，对不同的设备加载不同的.css层叠样式文件,如当前设备为Palm OS、Symbian、Android、iOS、Black BerryOS、Windows Phone8其中之一，就加载moblie.css层叠样式文件；如果当前设备为Windows XP、Windows7或Mac Os x之一，就加载computer.css层叠样式文件。这样我们的WEB界面不管在PC端还是移动端，在使用同一套.html的情况下，它都可以根据自己特有的兼容样式实现良好的展示效果，后续如果要修改不同设备的显示样式，也只需找到对应设备下的.css层叠样式文件进行修改即可。

上述内容，仅为本发明的较佳实施例，并非用于限制本发明的实施方案，本领域普通技术人员根据本发明的主要构思和精神，可以十分方便地进行相应的变通或修改，故本发明的保护范围应以权利要求书所要求的保护范围为准。

应当理解的是，本发明并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围执行各种修改和改变。本发明的范围仅由所附的权利要求来限制。