CN112486488A - 一种应用于政务服务终端的页面自适应方法 - Google Patents
一种应用于政务服务终端的页面自适应方法 Download PDFInfo
- Publication number
- CN112486488A CN112486488A CN202011415341.7A CN202011415341A CN112486488A CN 112486488 A CN112486488 A CN 112486488A CN 202011415341 A CN202011415341 A CN 202011415341A CN 112486488 A CN112486488 A CN 112486488A
- Authority
- CN
- China
- Prior art keywords
- page
- width
- service terminal
- screen
- government affair
- 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
Links
- 238000000034 method Methods 0.000 title claims abstract description 33
- 238000005516 engineering process Methods 0.000 claims abstract description 7
- 230000000694 effects Effects 0.000 claims abstract description 6
- 230000000007 visual effect Effects 0.000 claims abstract description 5
- 230000003044 adaptive effect Effects 0.000 claims description 6
- 230000006978 adaptation Effects 0.000 claims description 4
- 238000005096 rolling process Methods 0.000 claims description 3
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000007547 defect Effects 0.000 description 1
- 238000010586 diagram Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 239000000126 substance Substances 0.000 description 1
Images
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
-
- 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/34—Graphical or visual programming
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本发明公开一种应用于政务服务终端的页面自适应方法，涉及屏幕设备技术领域，针对页面显示于政务服务终端屏幕设备的不适配问题，采用方案包括：设计页面元素的百分比，实现根据页面大小、比例、文字和元素的自动调整；使用流动布局技术，实现页面元素位置的自动调整；基于CSS3媒体查询方法，匹配政务服务终端不同屏幕设备的特征，让不同特征下的CSS代码生效；基于界面的可视化编辑功能，允许政务服务大厅管理人员以所见即所得的方式设计政务服务终端的屏幕界面，实现视频、图片、滚动字幕、音频的手动添加。本发明可以实现页面显示于政务服务终端屏幕设备时的自适应调整，以满足当前政务服务大厅的业务和工作需求，提高部署效率和服务体验。
Description
技术领域
本发明涉及屏幕设备技术领域，具体的说是一种应用于政务服务终端的页面自适应方法。
背景技术
在全市或全省范围内的政务服务大厅中，当政务大厅相关设备配套系统的页面需要显示在大厅服务终端的屏幕设备时，针对不同的屏幕设备尺寸，需要对显示页面进行适应性调节。
为了使显示的页面可以自适应政务服务终端屏幕设备的尺寸，减少人工调节尺寸带来的时间损耗，以及调节不及时时页面无法全部显示或文字过小的问题，设计一种应用于政务服务终端的页面自适应方法。
发明内容
本发明针对目前技术发展的需求和不足之处，提供一种应用于政务服务终端的页面自适应方法，来解决推行全市或全省范围内统一的政务服务大厅相关系统时，需针对不同的政务服务终端屏幕设备分别进行页面适配的问题。
本发明的一种应用于政务服务终端的页面自适应方法，解决上述技术问题采用的技术方案如下：
一种应用于政务服务终端的页面自适应方法，其实现内容包括：
(1)设计页面元素的百分比，实现根据页面大小、比例、文字和元素的自动调整；
(2)使用流动布局技术，实现页面元素位置的自动调整；
(3)基于CSS3媒体查询方法，通过匹配政务服务终端不同屏幕设备的特征，让不同特征下的CSS代码生效；
(4)基于界面的可视化编辑功能，允许政务服务大厅管理人员以所见即所得的方式设计政务服务终端的屏幕界面，实现视频、图片、滚动字幕、音频各项信息的手动添加。
进一步的，页面自适应方法的实现内容还包括：
搭建公共素材库，在同一个页面显示于政务服务终端比例有差别的屏幕时，分析屏幕显示需求，以通过公共素材库的素材智能填充屏幕的空白区域。
更进一步的，搭建的公共素材库包括取号界面公共素材库、自助服务界面公共素材库、广告机界面公共素材库、查询机界面公共素材库，每个公共素材库都包含有图片和组件，每个图片和组件都配置有相应的标签，标签即是对图片/组件具有要素的简要说明。
进一步的，设计页面元素的百分比时，基于屏幕的分辨率，采用定位页面代码、自适应屏幕宽度，并采用相对大小“rem”描述页面、元素、字号。
更进一步的，设计页面元素的百分比的具体操作为：
(1.1)在页面代码头部，加入一行viewport元标签，让页面宽度自动适应政务服务终端屏幕设备的宽度：
<meta name＝"viewport"content＝"width＝device-width,initial-scale＝1.0,maximum-scale＝1.0,minimum-scale＝1.0,user-scalable＝no">；
其中，①属性“width＝device-width”中，“width”为设置layout viewport的宽度，为一个正整数，“width-device”表示宽度是屏幕设备的宽度，②属性“initial-scale＝1.0”中，initial-scale为设置页面的初始缩放值，可以是一个带小数的数字，1.0就是占页面的100％，③属性“minimum-scale＝1.0”表示最小的缩放比例，④属性“maximum-scale＝1.0”表示最大的缩放比例，⑤属性“user-scalable＝no”表示用户是否可以调整缩放比例，值为“no”或“yes”；
(1.2)在字体大小是页面默认大小的100％时，采用相对大小“rem”描述页面、元素、字号。
进一步的，使用流动布局技术时，页面各区块中元素的位置都是浮动的，这就使得在屏幕设备宽度太小放不下两个元素时，后一个元素会自动滚动到前一个元素的下方，不会在屏幕设备的水平方向溢出。
进一步的，执行(3)之前，需要预先设计政务服务终端屏幕设备的尺寸和比例页面，并将预先设计的内容统一放置在一套CSS代码中。
更进一步的，屏幕设备的特征包括：浏览器宽/高Width/height、标识小于最大宽度时生效Max-width、标识大于最大宽度时生效Min-width、屏幕设备分辨率宽高Device-width/device-height、屏幕设备分辨率Resolution、纵向-高度大于等于宽度时Orientation:portrait、横向-高度小于宽度时Orientation:landscape。
本发明的一种应用于政务服务终端的页面自适应方法，与现有技术相比具有的有益效果是：
(1)本发明通过设计页面元素的百分比、使用流动布局技术、使用CSS3媒体查询方法、使用界面的可视化编辑功能，实现页面显示于政务服务终端屏幕设备时的自适应调整，以满足当前政务服务大厅的业务和工作需求，提高部署效率和服务体验；
(2)本发明解决了推行全市或全省范围内统一的政务服务服务大厅相关系统时，需针对不同的政务服务终端屏幕设备分别进行页面适配的问题，可大为节省实施工作量，减少实施时间。
附图说明
附图1是本发明实施例二中基于屏幕需求匹配公共素材库的示意图。
具体实施方式
为使本发明的技术方案、解决的技术问题和技术效果更加清楚明白，以下结合具体实施例，对本发明的技术方案进行清楚、完整的描述。
实施例一：
本实施例提出一种应用于政务服务终端的页面自适应方法，其实现内容包括：
(1)设计页面元素的百分比，实现根据页面大小、比例、文字和元素的自动调整。
设计页面元素的百分比时，基于屏幕的分辨率，采用定位页面代码、自适应屏幕宽度，并采用相对大小“rem”描述页面、元素、字号，具体操作为：
(1.1)在页面代码头部，加入一行viewport元标签，让页面宽度自动适应政务服务终端屏幕设备的宽度：
<meta name＝"viewport"content＝"width＝device-width,initial-scale＝1.0,maximum-scale＝1.0,minimum-scale＝1.0,user-scalable＝no">；
其中，
(1.2)在字体大小是页面默认大小的100％时，采用相对大小“rem”描述页面、元素、字号。
(2)使用流动布局技术，实现页面元素位置的自动调整。
使用流动布局技术时，页面各区块中元素的位置都是浮动的，这就使得在屏幕设备宽度太小放不下两个元素时，后一个元素会自动滚动到前一个元素的下方，不会在屏幕设备的水平方向溢出。
(3)基于CSS3媒体查询方法，通过匹配政务服务终端不同屏幕设备的特征，让不同特征下的CSS代码生效。
执行(3)之前，需要预先设计政务服务终端屏幕设备的尺寸和比例页面，并将预先设计的内容统一放置在一套CSS代码中。
屏幕设备的特征包括：浏览器宽/高Width/height、标识小于最大宽度时生效Max-width、标识大于最大宽度时生效Min-width、屏幕设备分辨率宽高Device-width/device-height、屏幕设备分辨率Resolution、纵向-高度大于等于宽度时Orientation:portrait、横向-高度小于宽度时Orientation:landscape。
执行(3)让不同特征下的CSS代码生效时，
通过link引入方式：
(4)基于界面的可视化编辑功能，允许政务服务大厅管理人员以所见即所得的方式设计政务服务终端的屏幕界面，实现视频、图片、滚动字幕、音频各项信息的手动添加。
实施例二：
在实施例一的基础上，本实施例提出的一种应用于政务服务终端的页面自适应方法，其实现内容还包括：
搭建公共素材库，在同一个页面显示于政务服务终端比例有差别的屏幕时，分析屏幕显示需求，以通过公共素材库的素材智能填充屏幕的空白区域。
搭建的公共素材库包括取号界面公共素材库、自助服务界面公共素材库、广告机界面公共素材库、查询机界面公共素材库，每个公共素材库都包含有图片和组件，每个图片和组件都配置有相应的标签，标签即是对图片/组件具有要素的简要说明。
参考附图1，以取号界面公共素材库为例，其包含有图片和组件，其中图片不限于背景图片和底部横图，图片的标签即对该图片包含的要素。基于屏幕设备的特征，分析屏幕显示界面的需求，假定分析结果包含底部图片、国庆元素、比例9*2三方面的需求，基于该需求匹配取号界面公共素材库，智能匹配得到某个底部横图为红色、国庆、比例9*2的标签，用匹配得到的标签填充屏幕的空白区域。
综上可知，采用本发明的一种应用于政务服务终端的页面自适应方法，可以解决推行全市或全省范围内统一的政务服务服务大厅相关系统时，需针对不同的政务服务终端屏幕设备分别进行页面适配的问题。
以上应用具体个例对本发明的原理及实施方式进行了详细阐述，这些实施例只是用于帮助理解本发明的核心技术内容。基于本发明的上述具体实施例，本技术领域的技术人员在不脱离本发明原理的前提下，对本发明所作出的任何改进和修饰，皆应落入本发明的专利保护范围。
Claims (8)
1.一种应用于政务服务终端的页面自适应方法，其特征在于,其实现内容包括：
(1)设计页面元素的百分比，实现根据页面大小、比例、文字和元素的自动调整；
(2)使用流动布局技术，实现页面元素位置的自动调整；
(3)基于CSS3媒体查询方法，通过匹配政务服务终端不同屏幕设备的特征，让不同特征下的CSS代码生效；
(4)基于界面的可视化编辑功能，允许政务服务大厅管理人员以所见即所得的方式设计政务服务终端的屏幕界面，实现视频、图片、滚动字幕、音频各项信息的手动添加。
2.根据权利要求1所述的一种应用于政务服务终端的页面自适应方法，其特征在于，所述方法的实现内容还包括：
搭建公共素材库，在同一个页面显示于政务服务终端比例有差别的屏幕时，分析屏幕显示需求，以通过公共素材库的素材智能填充屏幕的空白区域。
3.根据权利要求2所述的一种应用于政务服务终端的页面自适应方法，其特征在于，搭建的公共素材库包括取号界面公共素材库、自助服务界面公共素材库、广告机界面公共素材库、查询机界面公共素材库，每个公共素材库都包含有图片和组件，每个图片和组件都配置有相应的标签，标签即是对图片/组件具有要素的简要说明。
4.根据权利要求1所述的一种应用于政务服务终端的页面自适应方法，其特征在于，设计页面元素的百分比时，基于屏幕的分辨率，采用定位页面代码、自适应屏幕宽度，并采用相对大小“rem”描述页面、元素、字号。
5.根据权利要求4所述的一种应用于政务服务终端的页面自适应方法，其特征在于，设计页面元素的百分比的具体操作为：
(1.1)在页面代码头部，加入一行viewport元标签，让页面宽度自动适应政务服务终端屏幕设备的宽度：
<meta name＝"viewport"content＝"width＝device-width,initial-scale＝1.0,maximum-scale＝1.0,minimum-scale＝1.0,user-scalable＝no">；
其中，①属性“width＝device-width”中，“width”为设置layout viewport的宽度，为一个正整数，“width-device”表示宽度是屏幕设备的宽度，②属性“initial-scale＝1.0”中，initial-scale为设置页面的初始缩放值，可以是一个带小数的数字，1.0就是占页面的100％，③属性“minimum-scale＝1.0”表示最小的缩放比例，④属性“maximum-scale＝1.0”表示最大的缩放比例，⑤属性“user-scalable＝no”表示用户是否可以调整缩放比例，值为“no”或“yes”；
(1.2)在字体大小是页面默认大小的100％时，采用相对大小“rem”描述页面、元素、字号。
6.根据权利要求1所述的一种应用于政务服务终端的页面自适应方法，其特征在于，使用流动布局技术时，页面各区块中元素的位置都是浮动的，这就使得在屏幕设备宽度太小放不下两个元素时，后一个元素会自动滚动到前一个元素的下方，不会在屏幕设备的水平方向溢出。
7.根据权利要求1所述的一种应用于政务服务终端的页面自适应方法，其特征在于，执行(3)之前，需要预先设计政务服务终端屏幕设备的尺寸和比例页面，并将预先设计的内容统一放置在一套CSS代码中。
8.根据权利要求7所述的一种应用于政务服务终端的页面自适应方法，其特征在于，屏幕设备的特征包括：
浏览器宽/高Width/height，
标识小于最大宽度时生效Max-width，
标识大于最大宽度时生效Min-width，
屏幕设备分辨率宽高Device-width/device-height，
屏幕设备分辨率Resolution，
纵向-高度大于等于宽度时Orientation:portrait，
横向-高度小于宽度时Orientation:landscape。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011415341.7A CN112486488A (zh) | 2020-12-07 | 2020-12-07 | 一种应用于政务服务终端的页面自适应方法 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011415341.7A CN112486488A (zh) | 2020-12-07 | 2020-12-07 | 一种应用于政务服务终端的页面自适应方法 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN112486488A true CN112486488A (zh) | 2021-03-12 |
Family
ID=74940342
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202011415341.7A Pending CN112486488A (zh) | 2020-12-07 | 2020-12-07 | 一种应用于政务服务终端的页面自适应方法 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112486488A (zh) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113268226A (zh) * | 2021-06-24 | 2021-08-17 | 中国平安人寿保险股份有限公司 | 页面数据生成方法、装置、存储介质及设备 |
| CN116680034A (zh) * | 2023-08-02 | 2023-09-01 | 山东依鲁光电科技有限公司 | 一种led异步显示屏自适应群发实现方法 |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103513979A (zh) * | 2012-06-29 | 2014-01-15 | 百度在线网络技术（北京）有限公司 | 一种网页自适应布局方法及装置 |
| CN105740315A (zh) * | 2015-12-31 | 2016-07-06 | 焦点科技股份有限公司 | 一种多种屏幕响应式网页布局调整的方法 |
| WO2020118485A1 (en) * | 2018-12-10 | 2020-06-18 | Citrix Systems, Inc. | Method of Detecting User Interface Layout Issues for Web Applications |
| CN111459366A (zh) * | 2020-04-03 | 2020-07-28 | 宁波科友信息科技有限公司 | 移动广告的管理系统及其管理方法 |
-
2020
- 2020-12-07 CN CN202011415341.7A patent/CN112486488A/zh active Pending
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103513979A (zh) * | 2012-06-29 | 2014-01-15 | 百度在线网络技术（北京）有限公司 | 一种网页自适应布局方法及装置 |
| CN105740315A (zh) * | 2015-12-31 | 2016-07-06 | 焦点科技股份有限公司 | 一种多种屏幕响应式网页布局调整的方法 |
| WO2020118485A1 (en) * | 2018-12-10 | 2020-06-18 | Citrix Systems, Inc. | Method of Detecting User Interface Layout Issues for Web Applications |
| CN111459366A (zh) * | 2020-04-03 | 2020-07-28 | 宁波科友信息科技有限公司 | 移动广告的管理系统及其管理方法 |
Non-Patent Citations (2)
| Title |
|---|
| 冯兴利;洪丹丹;罗军锋;锁志海;: "自适应网页设计中的关键技术", 计算机应用, no. 1, 10 June 2016 (2016-06-10) * |
| 李伙钦;: "基于CSS3的自适应网页的设计与实现", 科技视界, no. 02, 15 January 2016 (2016-01-15) * |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113268226A (zh) * | 2021-06-24 | 2021-08-17 | 中国平安人寿保险股份有限公司 | 页面数据生成方法、装置、存储介质及设备 |
| CN116680034A (zh) * | 2023-08-02 | 2023-09-01 | 山东依鲁光电科技有限公司 | 一种led异步显示屏自适应群发实现方法 |
| CN116680034B (zh) * | 2023-08-02 | 2023-10-27 | 山东依鲁光电科技有限公司 | 一种led异步显示屏自适应群发实现方法 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN109308155A (zh) | 调整页面的方法、装置、计算机设备及存储介质 | |
| US8855413B2 (en) | Image reflow at word boundaries | |
| US10185702B1 (en) | Publisher formatting controls | |
| US8237712B2 (en) | Manipulation of image content using various image representations | |
| US8582952B2 (en) | Method and apparatus for identifying video transitions | |
| CN112486488A (zh) | 一种应用于政务服务终端的页面自适应方法 | |
| US20130205202A1 (en) | Transformation of a Document into Interactive Media Content | |
| CN111309671B (zh) | 一种web报表导出PDF的方法、装置及存储介质 | |
| US20070192686A1 (en) | Figure sizing and positioning on dynamic pages | |
| CN103353878A (zh) | 将多种格式的文档显示在网页中的方法 | |
| CN102763117A (zh) | 数据生成装置、数据生成方法、数据生成程序及记录介质 | |
| CN105335445A (zh) | 布局显示方法和装置 | |
| CN111768461A (zh) | 一种基于电子价签的图片生成方法 | |
| CN116757165B (zh) | 基于版式数据流文件底板将效果工具投影到ofd文件的方法 | |
| CN105824788A (zh) | 一种将演示文稿文件转换为word文件的方法和系统 | |
| EP2110758A1 (en) | Searching method based on layout information | |
| CN106484388B (zh) | 用户界面的实现方法和装置 | |
| CN115659917A (zh) | 一种文档版式还原方法、装置、电子设备及存储设备 | |
| CN110310226B (zh) | 图片的拼接显示方法及系统 | |
| CN115620325A (zh) | 表格结构的还原方法、装置、电子设备及存储介质 | |
| CN104424174B (zh) | 文档处理系统和文档处理方法 | |
| CN106776527B (zh) | 电子书数据的显示方法、装置及终端设备 | |
| CN101207742B (zh) | 一种显示内容的分页方法、装置及数字电视接收装置 | |
| CN104639854A (zh) | 一种基于达芬奇平台的字符串处理显示方法 | |
| CN107908379B (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 |