一种兼容PC端和手机端WEB界面的实现方法技术

本发明专利技术提供一种兼容PC端和手机端WEB界面的实现方法，包括以下步骤：首先创建一份供PC端使用的.css层叠样式文件；再创建一份供移动端使用的.css层叠样式文件；然后查找WEB界面中div标签内定义的控件名称及该控件属性值；接着在.css层叠样式文件中设置跟div标签内控件名称相对应的显示样式；然后在同一套.html界面初始化中判断当前设备是PC还是移动设备；最后根据不同的设备加载不同的.css层叠样式文件，再加载.css层叠样式文件下的相关属性值，即可实现PC端和手机端WEB界面兼容显示，使得不同设备的交互显示变的更加友好。

【技术实现步骤摘要】
一种兼容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还是移动设备：如果当前设备是PalmOS、Symbian、Android、iOS、BlackBerryOS、WindowsPhone8其中之一，则当前设备为移动设备；如果当前设备是WindowsXP、Windows7或MacOsx之一，则当前设备为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还是移动设备：如果当前设备是PalmOS、Symbian、Android、iOS、BlackBerryOS、WindowsPhone8其中之一则当前设备为移动设备；如果当前设备是WindowsXP、Windows7或MacOsx之一，则当前设备为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层叠样式文件,如当前设备为PalmOS、Symbian、Android、iOS、BlackBerryOS、WindowsPhone8其中之一，就加载moblie.css层叠样式文件；如果当前设备为WindowsXP、Windows7或MacOsx之一，就加载computer.css层叠样式文件。这样我们的WEB界面不管在PC端还是移动端，在使用同一套.html的情况下，它都可以根据自己特有的兼容样式实现良好的展示效果，后续如果要修改不同设备的显示样式，也只需找到对应设备下的.css层叠样式文件进行修改即可。上述内容，仅为本专利技术的较佳实施例，并非用于限制本专利技术的实施方案，本领域普通技术人员根据本专利技术的主要构思和精神，可以十分方便地进行相应的变通或修改，故本专利技术的保护范围应以权利要求书所要求的保护范围为准。应当理解的是，本专利技术并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围执行各种修改和改变。本专利技术的范围仅由所附的权利要求来限制。本文档来自技高网...

【技术保护点】
一种兼容PC端和手机端WEB界面的实现方法，其特征在于，包括以下步骤：创建一份供PC端使用的.css层叠样式文件；再创建一份供移动端使用的.css层叠样式文件；查找WEB界面中div标签内定义的控件名称及该控件属性值；在.css层叠样式文件中设置跟div标签内控件名称相对应的显示样式；在同一套.html界面初始化中判断当前设备是PC还是移动设备；根据不同的设备加载不同的.css层叠样式文件，再加载.css层叠样式文件下的相关属性值。

【技术特征摘要】
1.一种兼容PC端和手机端WEB界面的实现方法，其特征在于，包括以下步骤：创建一份供PC端使用的.css层叠样式文件；再创建一份供移动端使用的.css层叠样式文件；查找WEB界面中div标签内定义的控件名称及该控件属性值；在.css层叠样式文件中设置跟div标签内控件名称相对应的显示样式；在同一套.html界面初始化中判断当前设备是PC还是移动设备；根据不同的设备加载不同的.css层叠样式文件，再加载.css层叠样式文件下的相关属性值。2.根据权利要求1所...

【专利技术属性】
技术研发人员：范春燕，罗辉，陈志远，曾浩，袁北林，李光煌，钟志威，
申请(专利权)人：深圳市赛亿科技开发有限公司，
类型：发明
国别省市：广东,44