CN106502659A - 一种移动设备网页单页面的布局方法及系统 - Google Patents
一种移动设备网页单页面的布局方法及系统 Download PDFInfo
- Publication number
- CN106502659A CN106502659A CN201610898361.1A CN201610898361A CN106502659A CN 106502659 A CN106502659 A CN 106502659A CN 201610898361 A CN201610898361 A CN 201610898361A CN 106502659 A CN106502659 A CN 106502659A
- Authority
- CN
- China
- Prior art keywords
- page
- mobile device
- scaling
- rem
- layout
- 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.)
- Granted
Links
- 238000000034 method Methods 0.000 title claims abstract description 25
- 230000008859 change Effects 0.000 claims description 14
- GOLXNESZZPUPJE-UHFFFAOYSA-N spiromesifen Chemical compound CC1=CC(C)=CC(C)=C1C(C(O1)=O)=C(OC(=O)CC(C)(C)C)C11CCCC1 GOLXNESZZPUPJE-UHFFFAOYSA-N 0.000 claims 1
- 230000008569 process Effects 0.000 abstract description 3
- 238000013461 design Methods 0.000 description 5
- 230000006978 adaptation Effects 0.000 description 3
- 238000011161 development Methods 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 230000000007 visual effect Effects 0.000 description 2
- 229940104697 arixtra Drugs 0.000 description 1
- 230000008901 benefit Effects 0.000 description 1
- 230000000739 chaotic effect Effects 0.000 description 1
- 230000007547 defect Effects 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- KANJSNBRCNMZMV-ABRZTLGGSA-N fondaparinux Chemical compound O[C@@H]1[C@@H](NS(O)(=O)=O)[C@@H](OC)O[C@H](COS(O)(=O)=O)[C@H]1O[C@H]1[C@H](OS(O)(=O)=O)[C@@H](O)[C@H](O[C@@H]2[C@@H]([C@@H](OS(O)(=O)=O)[C@H](O[C@H]3[C@@H]([C@@H](O)[C@H](O[C@@H]4[C@@H]([C@@H](O)[C@H](O)[C@@H](COS(O)(=O)=O)O4)NS(O)(=O)=O)[C@H](O3)C(O)=O)O)[C@@H](COS(O)(=O)=O)O2)NS(O)(=O)=O)[C@H](C(O)=O)O1 KANJSNBRCNMZMV-ABRZTLGGSA-N 0.000 description 1
- 239000000203 mixture Substances 0.000 description 1
- 238000013519 translation Methods 0.000 description 1
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)
- Information Transfer Between Computers (AREA)
Abstract
本发明公开了一种移动设备网页单页面的布局方法及系统，涉及移动设备的网页布局领域。该方法的步骤为：在移动设备上获取需要进行页面布局的单页面的dpr和scale的基本设置、并进行兼容性处理；根据移动设备的屏幕宽度和dpr计算rem基准值，将rem基准值设置于页面根节点的样式表中；在每个子页面上各设置1个有效内容缩放容器，其中插入有对应子页面中需要缩放的元素；根据有效内容缩放容器的可视高度和原始高度h2计算缩放比例，需要时根据缩放比例对子页面进行缩放。本发明能够在一次布局样式中，在移动设备屏幕中完整显示所有需要进行页面布局的页面，进而保证移动设备页面布局的质量。
Description
技术领域
本发明涉及移动设备的网页布局领域，具体涉及一种移动设备网页单页面的布局方法及系统。
背景技术
移动设备(手机、平板电脑等)的h5页面(基于html5和css3技术开发的支持移动端浏览器的web页面)一般采用SPA(single page web application，单页Web应用程序，即加载单个HTML页面并在用户与应用程序交互时动态更新该页面的Web应用程序)进行页面应用。
SPA的形式为多张占满整个屏幕的单独子页面组成的一个队列形式的单页面，用户在移动设备的触屏上滑动页面来实现不同的子页面的切换(手指向下滑动切换到上一子页面，若无上一子页面则返回至当前子页面；手指向上滑动切换到下一子页面，若无下一子页面则返回至当前子页面)。
页面开发人员一般会使用CSS(Cascading Style Sheets，层叠样式表)中的百分比布局方式来实现页面的自适应。由于每张页面可能存在一些独立定位的组件(例如点击下滑按钮、音乐播放暂停按钮、弹出层等)，因此当屏幕分辨率、屏幕尺寸与设计预期差别较大时，采用百分比布局方式来实现页面的自适应容易产生：布局混乱、错位或者有效内容区域被遮挡无法完全显示的问题。因此，采用百分比布局方式来实现具有独立定位组件页面的自适应时，难以保证页面与独立定位组件的兼容，进而极大的降低页面布局的质量。
发明内容
针对现有技术中存在的缺陷，本发明解决的技术问题为：在一次布局样式中，在移动设备屏幕中完整显示所有需要进行页面布局的页面。
为达到以上目的，本发明提供的移动设备网页单页面的布局方法，该方法中的单页面包括若干子页面；该方法包括以下步骤：
步骤A：移动设备获取需要进行页面布局的单页面的dpr和scale的基本设置，转到步骤B；
步骤B：若当前移动设备为安卓设备，将所述单页面的dpr修改为固定值后转到步骤C；若当前移动设备为ios设备，直接转到步骤C；
步骤C：判断当前移动设备的屏幕宽度W/dpr是否>屏幕宽度阈值，若是，则将W重新设置为屏幕宽度阈值·dpr后，根据新设置的W计算rem基准值；否则直接根据当前移动设备的屏幕宽度W计算rem基准值；将计算的rem基准值设置于页面根节点的样式表中，转到步骤D；
步骤D：在单页面的每个子页面上各设置1个有效内容缩放容器，有效内容缩放容器呈矩形，其中插入有对应子页面中需要缩放的元素，转到步骤E；
步骤E：将当前移动设备的屏幕高度作为有效内容缩放容器的可视高度h1，获取有效内容缩放容器的原始高度h2，根据h1和h2计算有效内容缩放容器中的元素的缩放比例S，S＝h1/h2；判断S是否≥1，若是，则确认S对应的有效内容缩放容器的子页面不需要缩放；否则将S对应的有效内容缩放容器的子页面进行缩放，缩放比例为S。
本发明提供的实现上述方法的移动设备网页单页面的布局系统，该系统中的单页面包括若干子页面；其特征在于，该系统包括基本设置获取模块、兼容性设置模块、rem基准值计算模块、缩放容器设置模块和子页面缩放模块；
基本设置获取模块用于：获取需要进行页面布局的单页面的dpr和scale的基本设置，向兼容性设置模块发送兼容性设置信号；
兼容性设置模块用于：收到兼容性设置信号后，检测移动设备的设备类型，若移动设备为安卓设备，将所述单页面的dpr修改为固定值后，向rem基准值计算模块发送rem基准值计算信号；若移动设备为ios设备，直接向rem基准值计算模块发送rem基准值计算信号；
rem基准值计算模块用于：收到rem基准值计算信号后，判断移动设备的屏幕宽度W/dpr是否>屏幕宽度阈值，若是，则将W重新设置为屏幕宽度阈值·dpr后，根据新设置的W计算rem基准值；否则直接根据移动设备的屏幕宽度W计算rem基准值；将计算的rem基准值设置于页面根节点的样式表中，向缩放容器设置模块发送缩放容器设置信号；
缩放容器设置模块用于：收到缩放容器设置信号后，在单页面的每个子页面上各设置1个有效内容缩放容器，有效内容缩放容器呈矩形，其中插入有对应子页面中需要缩放的元素，向子页面缩放模块发送子页面缩放信号；
子页面缩放模块用于：收到子页面缩放信号后，将移动设备的屏幕高度作为有效内容缩放容器的可视高度h1，获取有效内容缩放容器的原始高度h2，根据h1和h2计算有效内容缩放容器中的元素的缩放比例S，S＝h1/h2；判断S是否≥1，若是，则确认S对应的有效内容缩放容器的子页面不需要缩放；否则将S对应的有效内容缩放容器的子页面进行缩放，缩放比例为S。
与现有技术相比，本发明的优点在于：
本发明能够在一次布局样式中，对所有需要进行页面布局的单页面合理的计算rem基准值、并根据ren基准值对单页面进行重新设备；在此基础上，本发明通过子页面中设置的有效内容缩放容器计算缩放比例，根据缩放比例决定是否需要缩放设置单页面中的子页面，以使得子页面缩放在移动设备屏幕中完整显示。
有鉴于此，与现有技术中设计与预期具有差别时无法完全显示页面相比，本发明能够在一次布局样式中，即使在不同的系统、浏览器、移动设备屏幕分辨率和尺寸比例的情况下，也能保持页面比例不失真、并且能够完整显示有效内容；而且在移动设备屏幕长宽比例特殊或者横屏状态下均能够完整显示子页面。因此，本发明能够保证移动设备页面布局的质量。
附图说明
图1为本发明实施例中移动设备网页单页面的布局方法的流程图。
具体实施方式
以下结合附图及实施例对本发明作进一步详细说明。
本发明实施例中的移动设备网页单页面为若干子页面组成的页面队列形式；在此基础上，参见图1所示，本发明实施例中的移动设备网页单页面的布局方法，包括以下步骤：
S1：在移动设备上通过Javascript(直译式脚本语言)获取需要进行页面布局的单页面html头部中的dpr(设备像素比)和scale(页面缩放倍数)的基本设置、并进行兼容性处理。
兼容性处理的具体流程为：
若当前移动设备为安卓设备，因为安卓机型的系统没有统一，所以为了防止特殊的dpr值使S2中计算rem基准值时出现不可知的意外结果，进而导致页面布局混乱，会将dpr修改为固定值(本实施例中为1)后执行S2。
若当前移动设备为ios设备，因为ios系统由苹果公司独家维护，所以不需要统一设置，即直接执行S2。
S1中需要进行页面布局的页面包括：在移动设备上输入网址后的显示页面、显示页面和回退页面发生尺寸改变事件后(例如发生翻转)的改变页面、以及显示页面和改变页面发生页面回退显示事件后的回退页面。回退页面是指：从页面离开后又返回，此时浏览器可能为了节约流量不会重新刷新页面，此时需要重新计算rem基准值。
S2：通过Javascript获取当前移动设备的屏幕宽度W，根据W和dpr设置rem基准值(font size of the root element，是指相对于根元素的字体大小的单位，rem基准值的大小基于页面根节点<html>上设置的字体大小，例如<html>设置的字体大小为10px，则1rem等于10px)。通过Javascript将rem基准值设置于页面根节点<html>的样式表中，使得rem单位能够识别，转到S3。
S2中根据W和dpr设置rem基准值的具体流程为：
S201：判断W/dpr是否>540(屏幕宽度阈值)，若是，则将W重新设置为540·dpr后转到S302；否则直接转到S202。
S202：将rem基准值设置为W/10(设计稿宽度多是10的倍数，所以为了rem的基准值不要太大，导致以rem为单位的值过小，故此处设置为10)，转到S3。
因为此处rem基准值是根据设置在页面根节点<html>上的字体大小计算得来的，所以必须通过上述算法获取新的rem基准值、并设置在页面上，才能发挥rem的布局作用。
S3：通过Javascript，在单页面的viewport(页面屏幕的基础设置，通过该设置可以控制屏幕的显示比例)中设置页面缩放状态为禁止，防止用户缩放屏幕，转到S4；实际应用中S3可以执行任意步骤的过程中、之前或之后进行。
完成S1至S3后，用户可不用担心页面宽度变化对页面元素定位和尺寸的影响，在开发CSS布局的时候可以大量采用绝对定位(直接设置元素的尺寸和相对于父元素的坐标)这种简单粗暴的定位方式，而定位用的坐标和尺寸可以直接从设计稿上量取，用户编写页面样式的时候只需要简单的通过单次编写布局就可以保证在所有尺寸的屏幕上都能比例不失真的显示。
与此同时，由于重新设置了rem基准值，页面的内容可能无法完整显示，因此本发明采用缩放有效内容区域的方法来解决屏幕比例特殊的情况下页面内容不完整显示问题，详情请参见S4～S6。
在S3和S4之间，可以将px(像素)与rem的相互转换工具置于Javascript的全局环境之中，以供开发人员通过Javascript操作css属性的时候方便的将以rem为单位的值转换成以px为单位的值，其目的是为了方便部分用户的操作习惯。因为部分用户喜欢通过Javascript来控制样式以及尺寸坐标值，此时如果以rem为单位则会造成使用不便(比如研发人员想把一个元素的宽度通过Javascript改成设计稿上的200像素，然后得去算这个200px转换成rem是多少rem，最后算到的还是一个循环小数)。
S4：通过Javascript在单页面的每个子页面上各设置1个有效内容缩放容器，将子页面上需要缩放的元素插入有效内容缩放容器，进而区分需要缩放的元素和其他不需要缩放的元素，转到S5。
S4中的有效内容缩放容器是用html和css在页面中画出来的透明矩形用来区分页面中的功能块(例如头部导航、播放器、微博分享、抽奖等)。
S5：将移动设备的屏幕高度作为有效内容缩放容器的可视高度h1，获取有效内容缩放容器的原始高度h2，根据h1和h2计算有效内容缩放容器中的元素的缩放比例S，S＝h1/h2，转到S6。
S5的具体实施流程为：
var visibleHeight＝doms.body.height()；//获取有效内容缩放容器的可视高度；
var originHeight＝doms.paper.eq(0).height()；//获取有效内容缩放容器的原始高度；
var scale＝visibleHeight/originHeight；//计算缩放比例。
S6：判断S是否≥1，即if(scale<1)，若是，则说明当前S对应的有效内容缩放容器的子页面的可视范围大于原始范围，该子页面的内容可以完整显示，不需要缩放，结束，否则通过CSS的2d变换将当前S对应的有效内容缩放容器的子页面进行缩放，缩放比例为S。
S6中对有效内容缩放容器的子页面进行缩放的具体流程为：
S601：设置缩放中心为水平居中，垂直居顶：
若移动设备的浏览器为webkit内核浏览器，则实现代码为'-webkit-transform-origin':'50％0'，转到S602；
若移动设备的浏览器为非webkit内核浏览器，则实现代码为'transform-origin':'50％0'，转到S602。
S602：设置缩放比例为S：
若移动设备的浏览器为webkit内核浏览器，则实现代码为'-webkit-transform':'scale('+scale+')'；
若移动设备的浏览器为非webkit内核浏览器，则实现代码为'transform':'scale('+scale+')'。
S5和S6使得每一子页面的有效内容区域，在宽度与移动设备屏幕宽度相同、高度大于移动设备屏幕高度的情况下，也能缩放在移动设备屏幕中完整显示。
本发明实施例提供的实现上述方法的移动设备网页单页面的布局系统，该系统中的单页面包括若干子页面。该系统包括基本设置获取模块、兼容性设置模块、rem基准值计算模块、px转换模块、缩放容器设置模块和子页面缩放模块。
基本设置获取模块用于：获取需要进行页面布局的单页面的dpr和scale的基本设置，向兼容性设置模块发送兼容性设置信号。
需要进行页面布局的单页面包括：在移动设备上输入网址后的显示页面、显示页面和回退页面发生尺寸改变事件后的改变页面、以及显示页面和改变页面发生页面回退显示事件后的回退页面；回退页面是指：从页面离开后又返回。
兼容性设置模块用于：收到兼容性设置信号后，检测移动设备的设备类型，若移动设备为安卓设备，将所述单页面的dpr修改为固定值(1)后，向rem基准值计算模块发送rem基准值计算信号；若移动设备为ios设备，直接向rem基准值计算模块发送rem基准值计算信号。
rem基准值计算模块用于：收到rem基准值计算信号后，判断移动设备的屏幕宽度W/dpr是否>屏幕宽度阈值(540)，若是，则将W重新设置为540·dpr后，根据新设置的W计算rem基准值(rem基准值的计算公式为W/10)；否则直接根据移动设备的屏幕宽度W计算rem基准值(rem基准值的计算公式为W/10)；将计算的rem基准值设置于页面根节点的样式表中，向缩放容器设置模块发送缩放容器设置信号。
px转换模块用于：在rem基准值计算模块工作完成之后，将以rem为单位的值转换成以px为单位的值。
缩放容器设置模块用于：收到缩放容器设置信号后，在单页面的每个子页面上各设置1个有效内容缩放容器，有效内容缩放容器呈矩形，其中插入有对应子页面中需要缩放的元素，向子页面缩放模块发送子页面缩放信号；
子页面缩放模块用于：收到子页面缩放信号后，将移动设备的屏幕高度作为有效内容缩放容器的可视高度h1，获取有效内容缩放容器的原始高度h2，根据h1和h2计算有效内容缩放容器中的元素的缩放比例S，S＝h1/h2；判断S是否≥1，若是，则确认S对应的有效内容缩放容器的子页面不需要缩放；否则将S对应的有效内容缩放容器的子页面进行缩放，缩放比例为S。
本发明不局限于上述实施方式，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也视为本发明的保护范围之内。本说明书中未作详细描述的内容属于本领域专业技术人员公知的现有技术。
Claims (10)
1.一种移动设备网页单页面的布局方法，该方法中的单页面包括若干子页面；其特征在于，该方法包括以下步骤：
步骤A：移动设备获取需要进行页面布局的单页面的dpr和scale的基本设置，转到步骤B；
步骤B：若当前移动设备为安卓设备，将所述单页面的dpr修改为固定值后转到步骤C；若当前移动设备为ios设备，直接转到步骤C；
步骤C：判断当前移动设备的屏幕宽度W/dpr是否>屏幕宽度阈值，若是，则将W重新设置为屏幕宽度阈值·dpr后，根据新设置的W计算rem基准值；否则直接根据当前移动设备的屏幕宽度W计算rem基准值；将计算的rem基准值设置于页面根节点的样式表中，转到步骤D；
步骤D：在单页面的每个子页面上各设置1个有效内容缩放容器，有效内容缩放容器呈矩形，其中插入有对应子页面中需要缩放的元素，转到步骤E；
步骤E：将当前移动设备的屏幕高度作为有效内容缩放容器的可视高度h1，获取有效内容缩放容器的原始高度h2，根据h1和h2计算有效内容缩放容器中的元素的缩放比例S，S＝h1/h2；判断S是否≥1，若是，则确认S对应的有效内容缩放容器的子页面不需要缩放；否则将S对应的有效内容缩放容器的子页面进行缩放，缩放比例为S。
2.如权利要求1所述的移动设备网页单页面的布局方法，其特征在于：步骤A中所述需要进行页面布局的单页面包括：在移动设备上输入网址后的显示页面、显示页面和回退页面发生尺寸改变事件后的改变页面、以及显示页面和改变页面发生页面回退显示事件后的回退页面；回退页面是指：从页面离开后又返回。
3.如权利要求1所述的移动设备网页单页面的布局方法，其特征在于：步骤C中所述屏幕宽度阈值为540，所述rem基准值的计算公式为W/10。
4.如权利要求1所述的移动设备网页单页面的布局方法，其特征在于：步骤C与步骤D之间还包括以下步骤：将以rem为单位的值转换成以px为单位的值。
5.如权利要求1至4任一项所述的移动设备网页单页面的布局方法，其特征在于：步骤E中所述对S对应的有效内容缩放容器的子页面进行缩放时，还包括以下流程，设置缩放中心为水平居中，垂直居顶。
6.如权利要求1至4任一项所述的移动设备网页单页面的布局方法，其特征在于：该方法还包括以下步骤：将单页面的viewport中设置页面缩放状态为禁止。
7.一种实现权利要求1至6任一项所述方法的移动设备网页单页面的布局系统，该系统中的单页面包括若干子页面；其特征在于，该系统包括基本设置获取模块、兼容性设置模块、rem基准值计算模块、缩放容器设置模块和子页面缩放模块；
基本设置获取模块用于：获取需要进行页面布局的单页面的dpr和scale的基本设置，向兼容性设置模块发送兼容性设置信号；
兼容性设置模块用于：收到兼容性设置信号后，检测移动设备的设备类型，若移动设备为安卓设备，将所述单页面的dpr修改为固定值后，向rem基准值计算模块发送rem基准值计算信号；若移动设备为ios设备，直接向rem基准值计算模块发送rem基准值计算信号；
rem基准值计算模块用于：收到rem基准值计算信号后，判断移动设备的屏幕宽度W/dpr是否>屏幕宽度阈值，若是，则将W重新设置为屏幕宽度阈值·dpr后，根据新设置的W计算rem基准值；否则直接根据移动设备的屏幕宽度W计算rem基准值；将计算的rem基准值设置于页面根节点的样式表中，向缩放容器设置模块发送缩放容器设置信号；
缩放容器设置模块用于：收到缩放容器设置信号后，在单页面的每个子页面上各设置1个有效内容缩放容器，有效内容缩放容器呈矩形，其中插入有对应子页面中需要缩放的元素，向子页面缩放模块发送子页面缩放信号；
子页面缩放模块用于：收到子页面缩放信号后，将移动设备的屏幕高度作为有效内容缩放容器的可视高度h1，获取有效内容缩放容器的原始高度h2，根据h1和h2计算有效内容缩放容器中的元素的缩放比例S，S＝h1/h2；判断S是否≥1，若是，则确认S对应的有效内容缩放容器的子页面不需要缩放；否则将S对应的有效内容缩放容器的子页面进行缩放，缩放比例为S。
8.如权利要求7所述的移动设备网页单页面的布局系统，其特征在于：所述基本设置获取模块中需要进行页面布局的单页面包括：在移动设备上输入网址后的显示页面、显示页面和回退页面发生尺寸改变事件后的改变页面、以及显示页面和改变页面发生页面回退显示事件后的回退页面；回退页面是指：从页面离开后又返回。
9.如权利要求7所述的移动设备网页单页面的布局系统，其特征在于：所述rem基准值计算模块中的屏幕宽度阈值为540，rem基准值的计算公式为W/10。
10.如权利要求7至9任一项所述的移动设备网页单页面的布局系统，其特征在于：该系统还包括px转换模块，其用于：在rem基准值计算模块工作完成之后，将以rem为单位的值转换成以px为单位的值。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201610898361.1A CN106502659B (zh) | 2016-10-14 | 2016-10-14 | 一种移动设备网页单页面的布局方法及系统 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201610898361.1A CN106502659B (zh) | 2016-10-14 | 2016-10-14 | 一种移动设备网页单页面的布局方法及系统 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN106502659A true CN106502659A (zh) | 2017-03-15 |
| CN106502659B CN106502659B (zh) | 2019-05-17 |
Family
ID=58295296
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201610898361.1A Active CN106502659B (zh) | 2016-10-14 | 2016-10-14 | 一种移动设备网页单页面的布局方法及系统 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN106502659B (zh) |
Cited By (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107402757A (zh) * | 2017-07-11 | 2017-11-28 | 北京潘达互娱科技有限公司 | 页面渲染方法及装置 |
| CN108427546A (zh) * | 2018-05-03 | 2018-08-21 | 深圳Tcl新技术有限公司 | 显示装置的全屏幕适配方法、显示装置及存储介质 |
| CN109254813A (zh) * | 2018-08-20 | 2019-01-22 | 中国平安人寿保险股份有限公司 | 屏幕适配方法、装置、计算机设备及存储介质 |
| CN109799940A (zh) * | 2018-12-28 | 2019-05-24 | 北京字节跳动网络技术有限公司 | 响应于手势操作处理呈现内容的方法、装置及计算机记录介质 |
| CN110147230A (zh) * | 2019-04-18 | 2019-08-20 | 浙江数链科技有限公司 | 页面适配方法、装置、设备和存储介质 |
| CN110866208A (zh) * | 2019-10-10 | 2020-03-06 | 东软集团股份有限公司 | 一种页面的响应式布局方法、装置及设备 |
| CN111984351A (zh) * | 2020-08-07 | 2020-11-24 | 中移（杭州）信息技术有限公司 | 页面适配方法、电子设备、计算机可读存储介质 |
| CN112965645A (zh) * | 2021-03-15 | 2021-06-15 | 中国平安财产保险股份有限公司 | 页面拖拽方法、装置、计算机设备及存储介质 |
| CN114896000A (zh) * | 2022-03-31 | 2022-08-12 | 北京达佳互联信息技术有限公司 | 一种组件布局方法、装置、电子设备及存储介质 |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102902535A (zh) * | 2012-09-18 | 2013-01-30 | 深圳市融创天下科技股份有限公司 | 一种图片自适应方法、系统和终端设备 |
| US20140325345A1 (en) * | 2013-04-26 | 2014-10-30 | Amazon Technologies, Inc. | Consistent Scaling of Web-Based Content Across Devices Having Different Screen Metrics |
| CN105528217A (zh) * | 2015-12-24 | 2016-04-27 | 北京白鹭时代信息技术有限公司 | 一种基于显示列表的局部刷新方法及装置 |
| CN105912336A (zh) * | 2016-04-11 | 2016-08-31 | 江苏中威科技软件系统有限公司 | 一种移动端前端开发多屏适配方法 |
| CN106021353A (zh) * | 2016-05-09 | 2016-10-12 | Tcl集团股份有限公司 | 一种网页的显示适配方法及系统 |
-
2016
- 2016-10-14 CN CN201610898361.1A patent/CN106502659B/zh active Active
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102902535A (zh) * | 2012-09-18 | 2013-01-30 | 深圳市融创天下科技股份有限公司 | 一种图片自适应方法、系统和终端设备 |
| US20140325345A1 (en) * | 2013-04-26 | 2014-10-30 | Amazon Technologies, Inc. | Consistent Scaling of Web-Based Content Across Devices Having Different Screen Metrics |
| CN105528217A (zh) * | 2015-12-24 | 2016-04-27 | 北京白鹭时代信息技术有限公司 | 一种基于显示列表的局部刷新方法及装置 |
| CN105912336A (zh) * | 2016-04-11 | 2016-08-31 | 江苏中威科技软件系统有限公司 | 一种移动端前端开发多屏适配方法 |
| CN106021353A (zh) * | 2016-05-09 | 2016-10-12 | Tcl集团股份有限公司 | 一种网页的显示适配方法及系统 |
Non-Patent Citations (1)
| Title |
|---|
| 赵壤 等: "基于HTML5+CSS3的政府网站移动前端设计", 《电子技术与软件工程》 * |
Cited By (12)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107402757A (zh) * | 2017-07-11 | 2017-11-28 | 北京潘达互娱科技有限公司 | 页面渲染方法及装置 |
| CN108427546A (zh) * | 2018-05-03 | 2018-08-21 | 深圳Tcl新技术有限公司 | 显示装置的全屏幕适配方法、显示装置及存储介质 |
| CN109254813A (zh) * | 2018-08-20 | 2019-01-22 | 中国平安人寿保险股份有限公司 | 屏幕适配方法、装置、计算机设备及存储介质 |
| CN109799940A (zh) * | 2018-12-28 | 2019-05-24 | 北京字节跳动网络技术有限公司 | 响应于手势操作处理呈现内容的方法、装置及计算机记录介质 |
| CN110147230A (zh) * | 2019-04-18 | 2019-08-20 | 浙江数链科技有限公司 | 页面适配方法、装置、设备和存储介质 |
| CN110866208A (zh) * | 2019-10-10 | 2020-03-06 | 东软集团股份有限公司 | 一种页面的响应式布局方法、装置及设备 |
| CN111984351A (zh) * | 2020-08-07 | 2020-11-24 | 中移（杭州）信息技术有限公司 | 页面适配方法、电子设备、计算机可读存储介质 |
| CN111984351B (zh) * | 2020-08-07 | 2024-05-03 | 中移（杭州）信息技术有限公司 | 页面适配方法、电子设备、计算机可读存储介质 |
| CN112965645A (zh) * | 2021-03-15 | 2021-06-15 | 中国平安财产保险股份有限公司 | 页面拖拽方法、装置、计算机设备及存储介质 |
| CN112965645B (zh) * | 2021-03-15 | 2022-07-29 | 中国平安财产保险股份有限公司 | 页面拖拽方法、装置、计算机设备及存储介质 |
| CN114896000A (zh) * | 2022-03-31 | 2022-08-12 | 北京达佳互联信息技术有限公司 | 一种组件布局方法、装置、电子设备及存储介质 |
| CN114896000B (zh) * | 2022-03-31 | 2023-10-03 | 北京达佳互联信息技术有限公司 | 一种组件布局方法、装置、电子设备及存储介质 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN106502659B (zh) | 2019-05-17 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN106502659A (zh) | 一种移动设备网页单页面的布局方法及系统 | |
| CN102314502B (zh) | 一种用于在移动终端上显示网页主体内容的方法和设备 | |
| US9672539B2 (en) | Advertisement generation apparatus and terminal device | |
| CN102495712B (zh) | 一种基于多个显示终端的地图拼接显示方法 | |
| CN105912336A (zh) | 一种移动端前端开发多屏适配方法 | |
| CN104050185B (zh) | 一种页面内容缩放显示处理方法及装置 | |
| CN107515759A (zh) | 截屏方法、装置、电子设备及可读存储介质 | |
| CN106294640B (zh) | 网页显示方法及装置 | |
| CN108573008A (zh) | 一种电子地图中的海量点展示方法及装置 | |
| CN105444754A (zh) | 导航图像显示方法及装置 | |
| US20140068495A1 (en) | Apparatus and method for processing handwriting input | |
| US20160342307A1 (en) | Method, electronic device, and non-transitory storage medium for adjusting icons | |
| US9030378B2 (en) | Sharing display processing system, display processing system, and display method | |
| CN111276110B (zh) | 一种字符显示方法、装置及电子设备 | |
| CN101763234A (zh) | 一种模拟各种屏幕分辨率的方法及其装置 | |
| CN101593455A (zh) | 电子地图线状流动注记的配置方法及装置 | |
| US8564630B2 (en) | Displaying widget elements based on display device resolution | |
| CN112148398B (zh) | 图像处理方法和装置 | |
| CN110443772B (zh) | 图片处理方法、装置、计算机设备和存储介质 | |
| CN102902500B (zh) | 一种数据矩阵信息的显示方法及装置 | |
| CN108108417A (zh) | 跨平台自适应控制的交互方法、系统、设备及存储介质 | |
| CN106708495B (zh) | 一种基于移动终端的页面显示方法及装置 | |
| CN109582269B (zh) | 物理拼接屏显示方法、装置及终端设备 | |
| CN103702169A (zh) | 菜单显示方法 | |
| US10210139B2 (en) | Information processing device and information processing method |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | 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 | ||
| TR01 | Transfer of patent right | ||
| TR01 | Transfer of patent right |
Effective date of registration: 20231110 Address after: Room 606-609, Compound Office Complex Building, No. 757, Dongfeng East Road, Yuexiu District, Guangzhou, Guangdong Province, 510699 Patentee after: China Southern Power Grid Internet Service Co.,Ltd. Address before: 430000 East Lake Development Zone, Wuhan City, Hubei Province, No. 1 Software Park East Road 4.1 Phase B1 Building 11 Building Patentee before: WUHAN DOUYU NETWORK TECHNOLOGY Co.,Ltd. |