CN108415985B - 一种用户设备上html网页的适配方法 - Google Patents

一种用户设备上html网页的适配方法 Download PDF

Info

Publication number
CN108415985B
CN108415985B CN201810142226.3A CN201810142226A CN108415985B CN 108415985 B CN108415985 B CN 108415985B CN 201810142226 A CN201810142226 A CN 201810142226A CN 108415985 B CN108415985 B CN 108415985B
Authority
CN
China
Prior art keywords
html
elements
important
width
user equipment
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.)
Active
Application number
CN201810142226.3A
Other languages
English (en)
Other versions
CN108415985A (zh
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.)
Xi'an West Point Information Technology Co ltd
Original Assignee
Xi'an West Point Information Technology 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 Xi'an West Point Information Technology Co ltd filed Critical Xi'an West Point Information Technology Co ltd
Priority to CN201810142226.3A priority Critical patent/CN108415985B/zh
Publication of CN108415985A publication Critical patent/CN108415985A/zh
Application granted granted Critical
Publication of CN108415985B publication Critical patent/CN108415985B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/957—Browsing optimisation, e.g. caching or content distillation
    • G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06Q—INFORMATION AND COMMUNICATION TECHNOLOGY [ICT] SPECIALLY ADAPTED FOR ADMINISTRATIVE, COMMERCIAL, FINANCIAL, MANAGERIAL OR SUPERVISORY PURPOSES; SYSTEMS OR METHODS SPECIALLY ADAPTED FOR ADMINISTRATIVE, COMMERCIAL, FINANCIAL, MANAGERIAL OR SUPERVISORY PURPOSES, NOT OTHERWISE PROVIDED FOR
    • G06Q10/00—Administration; Management
    • G06Q10/10—Office automation; Time management
    • G06Q10/103—Workflow collaboration or project management

Landscapes

  • Engineering & Computer Science (AREA)
  • Business, Economics & Management (AREA)
  • Theoretical Computer Science (AREA)
  • Human Resources & Organizations (AREA)
  • Strategic Management (AREA)
  • Databases & Information Systems (AREA)
  • Physics & Mathematics (AREA)
  • Data Mining & Analysis (AREA)
  • Entrepreneurship & Innovation (AREA)
  • General Physics & Mathematics (AREA)
  • Quality & Reliability (AREA)
  • Tourism & Hospitality (AREA)
  • General Business, Economics & Management (AREA)
  • Economics (AREA)
  • Operations Research (AREA)
  • Marketing (AREA)
  • General Engineering & Computer Science (AREA)
  • Information Transfer Between Computers (AREA)
  • Document Processing Apparatus (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本发明公开了一种用户设备上HTML网页的适配方法，包括获取HTML table标签，HTML table标签包括一个tr元素，tr元素中包括M个td元素；通过CSS选择器(.mobile‑table tr)将每个tr元素进行适配；通过CSS选择器(.mobile‑table td:nth‑child(2n+1))查找奇数列td元素，并进行适配；通过CSS选择器(.mobile‑table td:nth‑child(2n))查找偶数列td元素，并进行适配；根据HTML table标签元素的布局展示方式，将HTML网页适配后的内容在用户设备上进行显示。本发明开发的工作量小，适配效率高。

Description

一种用户设备上HTML网页的适配方法
技术领域
本发明涉及移动互联网技术领域，特别涉及一种用户设备上HTML网页的适配方法。
背景技术
工作流作为一种企业内部管理信息平台中的业务审批、流转的工具，如今得到了广泛的应用。移动APP是企业管理信息系统中不可或缺的移动端载体，通常是将移动APP加载在手机等用户设备上进行使用，工作流通常通过移动APP提醒待办，当用户获取到提醒待办消息后，点击此移动APP进行处理工作流的相关内容。但是，手机等用户设备的屏蔽较小，而实际的工作流申请表单比较复杂，当PC端展示的工作流申请表单在手机等用户设备上进行显示时，若要保证用户清楚的看到申请表单的内容，需要左右、上下不停的滑动屏幕才可以。鉴于此，人们提出了新的网页显示方法。
现有技术中，通常是按照APP UI规范单独开发一套用户设备端的业务展现页面，通过原生UI或者混合模式的H5页面技术来实现。但上述技术开发工作量大，尤其是当页面元素较多、布局复杂时，开发工作量更大，从而降低了适配效率。
发明内容
有鉴于此，本发明提供一种用户设备上HTML网页的适配方法，其开发的工作量小，适配效率高。
本发明通过以下技术手段解决上述问题：
本发明的一种用户设备上HTML网页的适配方法，包括：用户设备获取待显示的HTML网页内容；其中，所述HTML网页内容包括HTML table标签，所述HTML table标签包括N个tr元素，且所述tr元素中包括M个td元素，所述N为正整数，所述M为正偶数；通过CSS选择器(.mobile-table tr)将每个所述tr元素适配为{position：relative；display：block；width：100％；*zoom：1}”；通过CSS选择器(.mobile-table td：nth-child(2n+1))查找所述HTML table标签中的奇数列td元素，并将所有的所述奇数列td元素适配为{display：block！important；width：1％～99％！important；float：left；line-height：1px～1000px；color：#000000～#FFFFFF！important}；通过CSS选择器(.mobile-table td：nth-child(2n))查找所述HTML table标签中的偶数列td元素，并将所有的所述偶数列td元素适配为{display：block！important；width：1％～99％！important；float：right}，得到新的HTMLtable标签；其中，所述奇数列td元素的宽度与所述偶数列td元素的宽度之和等于用户设备的屏幕宽度；根据所述HTML table标签元素的布局展开方式，将HTML网页适配后的内容在用户设备上进行显示。
进一步，在所述得到新的HTML table标签之前，还包括：通过CSS样式mobile-table{font-size：1px～1000px；}将所有的tr元素中的字体和td元素中的字体进行修改；通过CSS样式mobile-table tr，td{height：1px～1000px！important}将所有的tr元素和td元素的行高进行修改。
进一步，所述HTML table标签还包括input元素；在所述得到新的HTML table标签之前，还包括：当所述input元素的状态为disabled或者readonly时，确定所述HTML table标签中是否有td元素设置了固定的width属性；在确定所述HTML table标签中没有td元素设置了固定的width属性时，通过CSS选择器(input：read-only，input：disabled，select：read-only，select：disabled，textarea：read-only，textarea：disabled)将所述input元素适配为{border：none！important；outline：none！important；box-shadow：none！important}。
进一步，在确定所述HTML table标签中有td元素设置了固定的width属性时，通过javascript查找设置了width属性的td元素，并将查找到的每个设置了width属性的td元素进行标记；删除每个标记的td元素的width属性，并通过CSS选择器(input：read-only，input：disabled，select：read-only，select：disabled，textarea：read-only，textarea：disabled)将所述input元素适配为{border：none！important；outline：none！important；box-shadow：none！important}。
进一步，还包括：PC端获取待显示的HTML网页内容，并将获取的所述HTML网页内容在PC端上进行显示。
进一步，所述用户设备包括手机。
本发明的一种用户设备上HTML网页的适配方法具有以下有益效果：
本发明提供了一种用户设备上HTML网页的适配方法，用户设备在获取到HTML网页内容后，首先通过CSS选择器(.mobile-table tr)将每个tr元素进行适配，将整行变为相对定位，块级元素模式，并让单行tr占满整个用户设备的屏幕宽度，然后再通过CSS选择器(.mobile-table td：nth-child(2n+1))将所有的奇数列td元素进行适配，使得所有的奇数列td元素变为块级元素，左浮动，最后通过CSS选择器(.mobile-table td：nth-child(2n))将所有的偶数列td元素进行适配，使得所有的偶数列td元素变为块级元素，右浮动，且所有的偶数列td元素的宽度和所有的奇数列td元素的宽度占满用户设备的整个屏幕宽度，从而将待显示的HTML网页内容由多行多列转换为用户设备端的多行两列的显示模式，开发的工作量小，适配效率高。
具体实施方式
本发明的一种用户设备上HTML网页的适配方法，包括以下步骤：
101、用户设备获取待显示的HTML网页内容。
其中，所述HTML网页内容包括HTML table标签，所述HTML table标签包括N个tr元素，且所述tr元素中包括M个td元素，所述N为正整数，所述M为正偶数，所述用户设备包括手机。
示例性的，HTML table标签可以为如下代码：
Figure BDA0001577926350000041
102、通过CSS选择器(.mobile-table tr)将每个所述tr元素适配为{position：relative；display：block；width：100％；*zoom：1}”。
具体的，将tr元素整行变为相对定位，块级元素模式，并让单行tr占满用户设备的整个屏幕宽度。
103、通过CSS选择器(.mobile-table td：nth-child(2n+1))查找所述HTML table标签中的奇数列td元素，并将所有的所述奇数列td元素适配为{display：block！important；width：1％～99％！important；float：left；line-height：1px～1000px；color：#000000～#FFFFFF！important}。
具体的，将所有的奇数列td元素统一变为块级元素，左浮动，且让所有的奇数列td元素占用户设备的屏幕宽度的1％～99％，并将行间距设置为1px～1000px，优选的，将行间距设置为24px；并将元素的颜色设置为#000000～#FFFFFF中的任一颜色，示例性的，将元素的颜色设置为#333333。
104、通过CSS选择器(.mobile-table td：nth-child(2n))查找所述HTML table标签中的偶数列td元素，并将所有的所述偶数列td元素适配为{display：block！important；width：1％～99％！important；float：right}。
其中，所述奇数列td元素的宽度与所述偶数列td元素的宽度之和等于用户设备的屏幕宽度。
具体的，将所有的偶数列td元素统一变为块级元素，右浮动，且让所有的偶数列td元素占用户设备的屏幕宽度的1％～99％，但需要保证奇数列td元素的宽度与偶数列td元素的宽度之和等于用户设备的屏幕宽度，示例性的，奇数列td元素的宽度为用户设备的屏幕宽度的30％，偶数列td元素的宽度为用户设备的屏幕宽度的70％，最终使得待显示的HTML网页内容由多行多列转换为用户设备端的多行两列的显示模式。
需要说明的是，本发明对步骤103和步骤104的执行顺序不做限制，可以先执行步骤103，再执行步骤104；也可以先执行步骤104，再执行步骤103。
105、通过CSS样式mobile-table{font-size：1px～1000px；}将所有的tr元素中的字体和td元素中的字体进行修改。
示例性的，所有的tr元素中的字体大小可以为13px。
106、通过CSS样式mobile-tabletr，td{height：1px～1000px！important}将所有的tr元素和td元素的行高进行修改。
示例性的，可将td元素的行高设置为30px。
需要说明的是，本发明对步骤105和步骤106的执行顺序不做限制，可以先执行步骤106，再执行步骤105；也可以先执行步骤105，再执行步骤106。
107、HTML table标签还包括input元素，当所述input元素的状态为disabled或者readonly时，确定所述HTML table标签中是否有td元素设置了固定的width属性。
需要说明的是，根据确定的结果不同，下述执行的步骤也不同，在确定所述HTMLtable标签中有td元素设置了固定的width属性时，则执行步骤108、步骤109、步骤111和步骤112；在确定所述HTML table标签中没有td元素设置了固定的width属性时，则执行步骤110-步骤112。
108、在确定所述HTML table标签中有td元素设置了固定的width属性时，通过javascript查找设置了width属性的td元素，并将查找到的每个设置了width属性的td元素进行标记。
109、删除每个标记的td元素的width属性，并通过CSS选择器(input：read-only，input：disabled，select：read-only，select：disabled，textarea：read-only，textarea：disabled)将所述input元素适配为{border：none！important；outline：none！important；box-shadow：none！important}。
具体的，将input元素修改为无边框、无背景、无阴影的文字标签显示风格，提高了用户设备显示的美观性。
110、在确定所述HTML table标签中没有td元素设置了固定的width属性时，通过CSS选择器(input：read-only，input：disabled，select：read-only，select：disabled，textarea：read-only，textarea：disabled)将所述input元素适配为{border：none！important；outline：none！important；box-shadow：none！important}。
111、得到新的HTML table标签，根据所述HTML table标签元素的布局展示方式，将HTML网页适配后的内容在用户设备上进行显示。
112、PC端获取待显示的HTML网页内容，并将获取的所述HTML网页内容在PC端上进行显示。
最后说明的是，以上实施例仅用以说明本发明的技术方案而非限制，尽管参照较佳实施例对本发明进行了详细说明，本领域的普通技术人员应当理解，可以对本发明的技术方案进行修改或者等同替换，而不脱离本发明技术方案的宗旨和范围，其均应涵盖在本发明的权利要求范围当中。

Claims (6)

1.一种用户设备上HTML网页的适配方法，其特征在于：包括：
用户设备获取待显示的HTML网页内容；其中，所述HTML网页内容包括HTML table标签，所述HTML table标签包括N个tr元素，且所述tr元素中包括M个td元素，所述N为正整数，所述M为正偶数；
通过CSS选择器(.mobile-table tr)将每个所述tr元素适配为{position：relative；display：block；width：100％；*zoom：1}”；
通过CSS选择器(.mobile-table td：nth-child(2n+1))查找所述HTML table标签中的奇数列td元素，并将所有的所述奇数列td元素适配为{display：block！important；width：1％～99％！important；float：left；line-height：1px～1000px；color：#000000～#FFFFFF！important}；
通过CSS选择器(.mobile-table td：nth-child(2n))查找所述HTML table标签中的偶数列td元素，并将所有的所述偶数列td元素适配为{display：block！important；width：1％～99％！important；float：right}，得到新的HTML table标签；其中，所述奇数列td元素的宽度与所述偶数列td元素的宽度之和等于用户设备的屏幕宽度；
根据所述HTML table标签元素的布局展示方式，将HTML网页适配后的内容在用户设备上进行显示。
2.根据权利要求1所述的一种用户设备上HTML网页的适配方法，其特征在于：在所述得到新的HTML table标签之前，还包括：
通过CSS样式mobile-table{font-size：1px～1000px；)将所有的tr元素中的字体和td元素中的字体进行修改；
通过CSS样式mobile-table tr，td{height：1px～1000px！important}将所有的tr元素和td元素的行高进行修改。
3.根据权利要求2所述的一种用户设备上HTML网页的适配方法，其特征在于：所述HTMLtable标签还包括input元素；
在所述得到新的HTML table标签之前，还包括：
当所述input元素的状态为disabled或者readonly时，确定所述HTML table标签中是否有td元素设置了固定的width属性；
在确定所述HTML table标签中没有td元素设置了固定的width属性时，通过CSS选择器(input：read-only，input：disabled，select：read-only，select：disabled，textarea：read-only，textarea：disabled)将所述input元素适配为{border：none！important；outline：none！important；box-shadow：none！important}。
4.根据权利要求3所述的一种用户设备上HTML网页的适配方法，其特征在于：
在确定所述HTML table标签中有td元素设置了固定的width属性时，通过javascript查找设置了width属性的td元素，并将查找到的每个设置了width属性的td元素进行标记；
删除每个标记的td元素的width属性，并通过CSS选择器(input：read-only，input：disabled，select：read-only，select：disabled，textarea：read-only，textarea：disabled)将所述input元素适配为{border：none！important；outline：none！important；box-shadow：none！important}。
5.根据权利要求1所述的一种用户设备上HTML网页的适配方法，其特征在于：还包括：
PC端获取待显示的HTML网页内容，并将获取的所述HTML网页内容在PC端上进行显示。
6.根据权利要求1所述的一种用户设备上HTML网页的适配方法，其特征在于：所述用户设备包括手机。
CN201810142226.3A 2018-02-11 2018-02-11 一种用户设备上html网页的适配方法 Active CN108415985B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201810142226.3A CN108415985B (zh) 2018-02-11 2018-02-11 一种用户设备上html网页的适配方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201810142226.3A CN108415985B (zh) 2018-02-11 2018-02-11 一种用户设备上html网页的适配方法

Publications (2)

Publication Number Publication Date
CN108415985A CN108415985A (zh) 2018-08-17
CN108415985B true CN108415985B (zh) 2021-09-03

Family

ID=63128585

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201810142226.3A Active CN108415985B (zh) 2018-02-11 2018-02-11 一种用户设备上html网页的适配方法

Country Status (1)

Country Link
CN (1) CN108415985B (zh)

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101315641A (zh) * 2008-07-15 2008-12-03 四川长虹电器股份有限公司 嵌入式浏览器中table排版的方法
CN102012787A (zh) * 2010-11-19 2011-04-13 互动在线（北京）科技有限公司 层叠样式表实现非固定区域随浏览器高/宽度自适应方法
CN102737106A (zh) * 2011-03-31 2012-10-17 埃森哲环球服务有限公司 表单布局方法和系统
CN105740315A (zh) * 2015-12-31 2016-07-06 焦点科技股份有限公司 一种多种屏幕响应式网页布局调整的方法
CN106325890A (zh) * 2016-10-25 2017-01-11 国云科技股份有限公司 基于纯html+css代码创建网页后台自适应布局方法

Family Cites Families (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
NO20034035D0 (no) * 2003-09-11 2003-09-11 Opera Software Asa Skjelne og fremvise tabeller i dokumenter
US20110252302A1 (en) * 2010-04-12 2011-10-13 Microsoft Corporation Fitting network content onto a reduced-size screen
US9588667B2 (en) * 2014-01-25 2017-03-07 Microsoft Technology Licensing, Llc Transformation of tabular data across multiple browser viewports

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101315641A (zh) * 2008-07-15 2008-12-03 四川长虹电器股份有限公司 嵌入式浏览器中table排版的方法
CN102012787A (zh) * 2010-11-19 2011-04-13 互动在线（北京）科技有限公司 层叠样式表实现非固定区域随浏览器高/宽度自适应方法
CN102737106A (zh) * 2011-03-31 2012-10-17 埃森哲环球服务有限公司 表单布局方法和系统
CN105740315A (zh) * 2015-12-31 2016-07-06 焦点科技股份有限公司 一种多种屏幕响应式网页布局调整的方法
CN106325890A (zh) * 2016-10-25 2017-01-11 国云科技股份有限公司 基于纯html+css代码创建网页后台自适应布局方法

Non-Patent Citations (4)

* Cited by examiner, † Cited by third party
Title
[Js/Jquery]table行转列;Wolfy;《https://www.cnblogs.com/wolf-sun/p/5745796.html》;20160807;全文 *
Formatting text pt.1:blank lines,alignment,wrap-around,two columns;PANOS;《https://wpbtips.wordpress.com/2009/06/10/formatting-text-pt-1/》;20090610;全文 *
响应式网页设计;Tencent ISUX;《http://www.025js.com/news_kno/2013/08-20/78.html》;20130820;全文 *
基于CSS+DIV的页面分栏布局的应用;孙秀娟等;《北京工业职业技术学院学报》;20161015(第04期);全文 *

Also Published As

Publication number Publication date
CN108415985A (zh) 2018-08-17

Similar Documents

Publication Publication Date Title
CN105069060B (zh) 一种html文档分页排版方法
US20130205202A1 (en) Transformation of a Document into Interactive Media Content
CN101025738A (zh) 一种免模板动态网站生成方法
CN108710601B (zh) 一种文本显示方法及其设备、存储介质、电子设备
CN103353878A (zh) 将多种格式的文档显示在网页中的方法
CN104063489A (zh) 一种确定网页图片相关度及显示检索结果的方法及装置
CN102411614A (zh) 图像搜索结果的显示
US20150227276A1 (en) Method and system for providing an interactive user guide on a webpage
CN104050238A (zh) 一种地图标注方法和装置
CN103166981A (zh) 一种无线网页转码方法及装置
RU2509351C2 (ru) Способ и устройство отображения навигационного контента
CN104090869B (zh) 一种翻译网络信息的方法及翻译系统
CN103870486A (zh) 确定网页类型的方法和装置
KR101638423B1 (ko) 배너형 기사 자동 생성을 통한 기사 작성 및 온라인 배포 방법
US10755091B2 (en) Method and apparatus for retrieving image-text block from web page
CN103577171A (zh) 一种显示网页内容的方法和移动终端
CN105224540A (zh) 页面排版方法及装置
CN113360106B (zh) 一种网页打印方法和装置
US20170235738A1 (en) Method for displaying dynamic media with text bubble emulation
CN111783007B (zh) 一种显示渲染方法、装置、电子设备及存储介质
CN108415985B (zh) 一种用户设备上html网页的适配方法
US20210358458A1 (en) Output content generation apparatus, output content generation method and program
US20150331837A1 (en) Text processing method and mobile terminal
US20200344308A1 (en) Electronic device and control method therefor
CN103927363A (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
GR01 Patent grant
GR01 Patent grant