CN106897055A - 一种兼容pc端和手机端web界面的实现方法 - Google Patents

一种兼容pc端和手机端web界面的实现方法 Download PDF

Info

Publication number
CN106897055A
CN106897055A CN201710016683.3A CN201710016683A CN106897055A CN 106897055 A CN106897055 A CN 106897055A CN 201710016683 A CN201710016683 A CN 201710016683A CN 106897055 A CN106897055 A CN 106897055A
Authority
CN
China
Prior art keywords
cascading style
web interface
css
style files
compatible
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN201710016683.3A
Other languages
English (en)
Inventor
范春燕
罗辉
陈志远
曾浩
袁北林
李光煌
钟志威
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Shenzhen Saiyi Technology Development Co Ltd
Original Assignee
Shenzhen Saiyi Technology Development Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Shenzhen Saiyi Technology Development Co Ltd filed Critical Shenzhen Saiyi Technology Development Co Ltd
Priority to CN201710016683.3A priority Critical patent/CN106897055A/zh
Publication of CN106897055A publication Critical patent/CN106897055A/zh
Pending legal-status Critical Current

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Mobile Radio Communication Systems (AREA)

Abstract

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

Description

一种兼容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层叠样式文件进行修改即可。
上述内容，仅为本发明的较佳实施例，并非用于限制本发明的实施方案，本领域普通技术人员根据本发明的主要构思和精神，可以十分方便地进行相应的变通或修改，故本发明的保护范围应以权利要求书所要求的保护范围为准。
应当理解的是，本发明并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围执行各种修改和改变。本发明的范围仅由所附的权利要求来限制。

Claims (3)

1.一种兼容PC端和手机端WEB界面的实现方法，其特征在于，包括以下步骤：
创建一份供PC端使用的.css层叠样式文件；
再创建一份供移动端使用的.css层叠样式文件；
查找WEB界面中div标签内定义的控件名称及该控件属性值；
在.css层叠样式文件中设置跟div标签内控件名称相对应的显示样式；
在同一套.html界面初始化中判断当前设备是PC还是移动设备；
根据不同的设备加载不同的.css层叠样式文件，再加载.css层叠样式文件下的相关属性值。
2.根据权利要求1所述的兼容PC端和手机端WEB界面的实现方法，其特征在于，所述div标签内的控件包括id和class。
3.根据权利要求1所述的兼容PC端和手机端WEB界面的实现方法，其特征在于，使用JavaScript判断所述当前设备是PC还是移动设备：
若判断当前设备是Palm OS、Symbian、Android、iOS、Black BerryOS、Windows Phone8其中之一即为移动设备；
若判断当前设备是Windows XP、Windows7或Mac Os x即为PC设备。
CN201710016683.3A 2017-01-10 2017-01-10 一种兼容pc端和手机端web界面的实现方法 Pending CN106897055A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201710016683.3A CN106897055A (zh) 2017-01-10 2017-01-10 一种兼容pc端和手机端web界面的实现方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201710016683.3A CN106897055A (zh) 2017-01-10 2017-01-10 一种兼容pc端和手机端web界面的实现方法

Publications (1)

Publication Number Publication Date
CN106897055A true CN106897055A (zh) 2017-06-27

Family

ID=59198177

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201710016683.3A Pending CN106897055A (zh) 2017-01-10 2017-01-10 一种兼容pc端和手机端web界面的实现方法

Country Status (1)

Country Link
CN (1) CN106897055A (zh)

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN108875063A (zh) * 2018-07-02 2018-11-23 南京焦点领动云计算技术有限公司 一种基于手机端页头自定义修改风格及功能的方法
WO2020119435A1 (zh) * 2018-12-13 2020-06-18 深圳壹账通智能科技有限公司 iOS页面布局方法、终端设备及计算机可读存储介质

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104793933A (zh) * 2015-03-31 2015-07-22 北京奇艺世纪科技有限公司 一种终端数据展现方法和系统
CN104866570A (zh) * 2015-05-22 2015-08-26 国云科技股份有限公司 一种css多浏览器兼容的方法
US20150334341A1 (en) * 2014-05-19 2015-11-19 Trinity Solutions Llc Explosion proof underground mining recording system and method of using same
CN105975268A (zh) * 2016-05-03 2016-09-28 国家电网公司 一种用于pc端信息系统网页界面的宽度自适应的方法
CN106126733A (zh) * 2016-07-04 2016-11-16 浪潮(北京)电子信息产业有限公司 一种更换css样式的方法及系统

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20150334341A1 (en) * 2014-05-19 2015-11-19 Trinity Solutions Llc Explosion proof underground mining recording system and method of using same
CN104793933A (zh) * 2015-03-31 2015-07-22 北京奇艺世纪科技有限公司 一种终端数据展现方法和系统
CN104866570A (zh) * 2015-05-22 2015-08-26 国云科技股份有限公司 一种css多浏览器兼容的方法
CN105975268A (zh) * 2016-05-03 2016-09-28 国家电网公司 一种用于pc端信息系统网页界面的宽度自适应的方法
CN106126733A (zh) * 2016-07-04 2016-11-16 浪潮(北京)电子信息产业有限公司 一种更换css样式的方法及系统

Non-Patent Citations (5)

* Cited by examiner, † Cited by third party
Title
WHSNOW: "《51jobwayback追踪：js判断移动访问设备并加载对应的css样式》", 10 June 2016, 51JOBHTTPS://M.JB51.NET/ARTICLE/51046.HTM *
侵权74501366: "《csdn：js手机端和PC端加载不同的CSS样式》", 31 July 2016, CSDN，HTTPS://BLOG.CSDN.NET/U010674395/ARTICLE/DETAILS/52081004 *
凌乱小青年: "《seegmentfault：js如何判断访问的是PC还会死移动端然后调用不同的css样式》", 27 September 2016, SEEGMENTFAULT，SEEGMENTFAULT.COM/Q/1010000007019230 *
宗文元: "《新浪博客：不同客户端（电脑PC、手机、平板）调用不同的css样式亲测可用》", 14 September 2015, HTTP://BLOG.SINA.CN/DPOOL/BLOG/S/BLOG_A2C2F3080102WG6Z.HTML *
李双远等: "DIV+CSS在网页设计中的应用方法", 《吉林化工学院学报》 *

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN108875063A (zh) * 2018-07-02 2018-11-23 南京焦点领动云计算技术有限公司 一种基于手机端页头自定义修改风格及功能的方法
WO2020119435A1 (zh) * 2018-12-13 2020-06-18 深圳壹账通智能科技有限公司 iOS页面布局方法、终端设备及计算机可读存储介质

Similar Documents

Publication Publication Date Title
US10565293B2 (en) Synchronizing DOM element references
CN102819561B (zh) 一种基于网页的图片显示方法和装置
WO2019072201A1 (zh) 网页内容提取方法以及终端设备
US20120254733A1 (en) Method for Users to Create and Edit Web Page Layouts
CN102043626B (zh) extjs组件的封装方法及装置、用户界面的生成方法及系统
CN110489116A (zh) 一种页面的渲染方法、装置及计算机存储介质
CN108804469B (zh) 一种网页识别方法以及电子设备
CN102929867A (zh) 用于自动化的文档翻译的技术
US10592580B2 (en) Web UI builder application
CN106844635A (zh) 网页中的元素的编辑方法及装置
CN104731815B (zh) 一种网页元素的绘制方法及装置
CN106897055A (zh) 一种兼容pc端和手机端web界面的实现方法
CN105183291A (zh) 显示界面中的信息提取方法及系统
CN106033387B (zh) 测试flash内部控件的方法和装置
CN104750864A (zh) 一种通用文本校验方法
WO2018160423A1 (en) Markup code generator
CN110070161A (zh) 用于条形码设计的在线设计器
CN105739962A (zh) 基于html的表格单元格编辑器控件扩展方法和系统
CN104715060A (zh) 一种基于网页的图片显示方法和装置
CN115309476A (zh) 一种基于浏览器的ofd文件显示和编辑方法
CN105242926A (zh) Web前端开发平台
CN110968236A (zh) 基于网页的截图方法及装置
Krause et al. CSS: Cascading Style Sheets
CN106325839B (zh) 一种增强网页元素属性信息的方法及装置
CN110209242B (zh) 按钮功能绑定、按钮功能调用方法、装置及投影控制设备

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
WD01 Invention patent application deemed withdrawn after publication
WD01 Invention patent application deemed withdrawn after publication

Application publication date: 20170627