CN105912336A - 一种移动端前端开发多屏适配方法 - Google Patents

一种移动端前端开发多屏适配方法 Download PDF

Info

Publication number
CN105912336A
CN105912336A CN201610222577.6A CN201610222577A CN105912336A CN 105912336 A CN105912336 A CN 105912336A CN 201610222577 A CN201610222577 A CN 201610222577A CN 105912336 A CN105912336 A CN 105912336A
Authority
CN
China
Prior art keywords
mobile terminal
screen
page
adaptive method
device pixel
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
CN201610222577.6A
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.)
JIANGSU ZHONGWEI TECHNOLOGY SOFTWARE SYSTEM Co Ltd
Original Assignee
JIANGSU ZHONGWEI TECHNOLOGY SOFTWARE SYSTEM 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 JIANGSU ZHONGWEI TECHNOLOGY SOFTWARE SYSTEM Co Ltd filed Critical JIANGSU ZHONGWEI TECHNOLOGY SOFTWARE SYSTEM Co Ltd
Priority to CN201610222577.6A priority Critical patent/CN105912336A/zh
Publication of CN105912336A publication Critical patent/CN105912336A/zh
Pending legal-status Critical Current

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
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Software Systems (AREA)
  • Databases & Information Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Data Mining & Analysis (AREA)
  • Human Computer Interaction (AREA)
  • User Interface Of Digital Computer (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

本发明提供了一种移动端前端开发多屏适配方法，具体包括以下步骤：步骤1：通过JavaScript获取移动端屏幕的设备像素缩放比值；步骤2：根据步骤1中获得的设备像素缩放比值对应调整页面属性；步骤3：加载不同尺寸的图片，并生成视觉稿；步骤4：前端开发时通过Sass的函数和混合宏将视觉稿中弹性元素的单位进行转换，并生成最终效果图。本发明将移动端的页面内任何需要弹性适配的元素的尺寸均换算为rem进行布局；当页面渲染时，根据页面有效宽度进行计算，并对应调整rem的大小，动态缩放以达到适配的效果，有效解决了因为页面宽度固定，无法满足大小屏展示效果的问题。

Description

一种移动端前端开发多屏适配方法
技术领域
本发明涉及网页设计技术领域，尤其涉及一种移动端前端开发多屏适配方法。
背景技术
传统的APP开发转向移动端Html5页面开发，移动端设备发展迅猛，面对不同分辨率的手机，面对不同屏幕尺寸的手机，很难有比较好的办法来实现移动端高清、多屏适配方案，传统开发有如下几种方法：1.固定页面宽度，禁止缩放，这种方案页面宽度固定，页面单一，无法满足多屏效果。2.固定高度，宽度自适应，以较小宽度的视觉稿作为参照布局，当屏幕变化时，拉伸或填充空白来补充容器。3.视觉稿、页面宽度使用统一宽度，利用浏览器自身缩放来完成适配。传统开发中存在很多问题，因此开发一种页面自适应的解决方案迫在眉睫，如申请号为：201310608370.9的中国专利公开了一种页面布局自适应方法及装置，该发明实施例***用于调整页面布局的程序代码；基于***的所述程序代码，获取移动终端的屏幕显示宽度；根据获取的屏幕显示宽度，按照预设比例调整网页的页面显示宽度；根据所述页面显示宽度，调整组成网页页面的各元素的显示宽度，同时设置所述元素的显示位置为浮动显示，还提供了一种页面布局自适应装置，包括：代码***模块，用于***用于调整页面布局的程序代码；参数获取模块，用于基于***的所述程序代码，获取移动终端的屏幕显示宽度；布局调整模块，用于根据获取的屏幕显示宽度，按照预设比例调整网页的页面显示宽度；根据所述页面显示宽度，调整组成网页页面的各元素的显示宽度，同时设置所述元素的显示位置为浮动显示。该发明通过程序代码与预设比例来调整网页的页面宽度，可以达到一定的适配效果，但是不适用于所有的屏幕宽度，仅适用于预设比例的宽度，并且没有考虑到网页转换时像素的问题，在实际使用的过程中仍存在较大的局限性。
又如申请号：201510679492.6的中国专利提供一种面向多终端的自适应网页布局方法，包括如下步骤：步骤10、创建和编辑页面布局的CSS，给CSS预设切换节点；步骤20、设置页面的样式布局架构，将图标和标题嵌套进各自对应的功能模块内；步骤30、编写节点切换的JavaScript脚本，对终端屏幕的分辨率进行判断并根据不同分辨率自动为网页最外层的全局对象切换相应样式的节点，呈现出对应的页面布局。还提供了一种面向多终端的自适应网页布局装置，包括预设模块、布局模块和切换模块：所述预设模块：用于创建和编辑页面布局的CSS，给CSS预设切换节点；所述布局模块：用于设置页面的样式布局架构，并将图标和标题嵌套进各自对应的功能模块内；所述切换模块：用于编写节点切换的JavaScript脚本，对终端屏幕的分辨率进行判断并根据不同分辨率自动为网页最外层的全局对象切换相应样式的节点，呈现出对应的页面布局。该发明通过判断终端屏幕的分辨率自动切换样式节点，需要提前预设多种样式，方法繁琐，并且没有考虑到普通屏与高清屏中设备像素缩放比等的差别，自适应页面的效果不佳。
发明内容
为克服现有技术中存在的无法兼容多屏设备，做不到页面统一且在高清屏下图片模糊，无法解决像素边框的问题，本发明提供了一种移动端前端开发多屏适配方法，其具体技术方案如下：
一种移动端前端开发多屏适配方法，包括以下步骤：
步骤1：通过JavaScript获取移动端屏幕的设备像素缩放比值；
步骤2：根据步骤1中获得的设备像素缩放比值对应调整页面属性；
步骤3：加载不同尺寸的图片，并生成视觉稿；
步骤4：前端开发时将视觉稿中的弹性元素的单位进行转换，并生成最终效果图。
在此基础上，所述步骤2中进一步包括：根据步骤1中获得的设备像素缩放比值计算出HTML的基准值,进而相应的进行页面属性的调整。
在此基础上，所述HTML的基准值＝屏幕宽度*设备像素缩放比值/16。
在此基础上，所述HTML的基准值与动态设备像素缩放比值一一对应，并均写入HTML。
在此基础上，所述步骤2中还进一步包括：根据步骤1获得的设备像素缩放比值动态设置页面的viewport,进而相应的进行页面属性的调整。
在此基础上，所述viewport根据不同的设备像素比值设置有不同的scale值。
在此基础上，所述scale值＝1/设备像素缩放比值。
在此基础上，所述步骤4的具体步骤为通过Sass的函数和混合宏将视觉稿中弹性元素的单位进行转换。
在此基础上，所述视觉稿中弹性元素的单位为像素单位。
在此基础上，所述步骤4中将像素单位转换为rem。
与现有技术相比，本发明的有益效果是：
1、本发明通过JavaScript获取移动端屏幕的设备像素缩放比值；并根据获得的设备像素缩放比值对应调整页面属性；加载不同尺寸的图片，并生成视觉稿；前端开发时将视觉稿中的弹性元素的单位进行转换，并生成最终效果图。本发明可以根据移动端屏幕动态缩放页面，能够满足大小屏的展示效果，也给设计带来无限的可能性。
2、本发明中通过Sass的函数和混合宏将视觉稿中弹性元素的单位进行转换，该视觉稿中的弹性元素的尺寸均换算为rem进行布局，当页面渲染时，根据页面有效宽度进行计算，调整rem的大小，动态缩放以达到适配的效果，该页面可以完美兼容多屏设备，并做到页面的一致性。
3、本发明中根据设备像素缩放比来计算HTML的基准值和页面viewport中的scale值，其中HTML的基准值＝屏幕宽度*设备像素缩放比值/16，scale值＝1/设备像素缩放比值，本发明可以解决图片在普通屏和高清屏(retina)切换时，像素边框和图片模糊的问题。
4、本发明在进行页面渲染时，根据页面有效宽度计算来调整rem的大小，通过动态缩放以到达适配的效果，无需运用媒体差选来动态改变rem基数，可以兼容到所有设备的各种尺寸，因此可以节约更多的时间并提供更好的用户体验。
附图说明
图1是本发明一种移动端前端开发多屏适配方法的流程示意图。
具体实施方式
以下结合附图和实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅用以解释本发明，并不用于限定本发明。
本发明披露了一种移动端前端开发多屏适配方法，如图1所示为该方法的流程示意图。本方法包括以下步骤：
步骤1：通过JavaScript获取移动端屏幕的设备像素缩放比值；
步骤2：根据步骤1中获得的设备像素缩放比值对应调整页面属性；
步骤3：加载不同尺寸的图片，并生成视觉稿；
步骤4：前端开发时将视觉稿中的弹性元素的单位进行转换，并生成最终效果图。
具体的步骤1：通过JavaScript的window.devicePixelRatio来获取移动端屏幕的设备像素缩放比值；在JavaScript文件中根据window.devicePixelRatio即可获得屏幕的设备像素缩放比(dpr)，window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels(dips))的比例。公式表示为window.devicePixelRatio＝物理像素/dips。
具体的步骤2：根据步骤1中获得的设备像素缩放比值对应调整页面属性，该页面属性包括HTML的基准值和页面的viewport。因此步骤2中进一步包括：根据步骤1中获得的设备像素缩放比值计算出HTML的基准值,进而相应的进行页面属性的调整。优选的，所述HTML的基准值＝屏幕宽度*设备像素缩放比值/16，优选地，根据JavaScript文件中的document.documentElement.clientWidth获取屏幕宽度，基于不同的设备，设备像素缩放比不断变化，根据步骤1获得的相应的设备像素缩放比，进而计算得出的HTML的基准值，该HTML的基准值与动态设备像素缩放比值一一对应，并将所有计算得出的HTML均写入HTML中保存。步骤2中还进一步包括：根据步骤1获得的设备像素缩放比值动态设置页面的viewport,即设备的屏幕上用来显示网页的区域，进而相应的进行页面属性的调整。viewport根据不同的设备像素比值设置有不同的scale值，优选的，scale值＝1/设备像素缩放比值，其中scale的值随着dpr变化可以解决1像素边框的问题。根据设备像素缩放比动态设置页面的viewport，进行缩放页面，以达到高清的效果。
例如：当dpr＝1；此时viewport设置为：
initial-scale＝1,maximum-scale＝1,minimum-scale＝1；
当dpr＝2；此时viewport设置为：
initial-scale＝0.5,maximum-scale＝0.5,minimum-scale＝0.5；
当dpr＝3；此时viewport设置为：
initial-scale＝0.3333333333333333，maximum-scale＝0.3333333333333333，
minimum-scale＝0.3333333333333333；
其中dpr即为设备像素缩放比。如当dpr为2的情况下，设置页面的scale值为0.5，这样就能实现1像素的边框。该1像素边框是指物理1像素的边框，在高分屏下的1像素是dpr*1像素的大小，通过viewport中的scale来缩放成物理1像素大小。1像素边框是指物理1像素的边框，在高分屏下的1像素是dpr*1像素的大小，通过，viewport中的scale来缩放成物理1像素大小。本发明可以解决图片在普通屏和高清屏(retina)切换时，像素边框和图片模糊的问题。
具体的步骤3：加载不同尺寸的图片，并生成视觉稿；例如：当dpr为1的时候加载跟屏幕像素相同比例的图片；当dpr为2是，加载屏幕尺寸两倍的图片。根据dpr的不同加载不同的图片，优选地，根据css中的background-size来改变图片的大小。优选地，本发明步骤3中还包括自动校正，通过寻找垂直和水平线条，根据线条的倾斜角度校正图片。首先通过边缘搜索算法对图像预处理强调图像边界，然后将图像进行变换，优选地，使用Hough Transform对图片进行变换，并其最终将图片中各个相邻像白色素连成的线段的角度和该线段离图像中心的距离标出，优选地，横轴是角度，纵轴是线段离中心距离，颜色越亮表示这样的线段越多。边缘图的一个点，对应着Hough参数空间中的一条正弦曲线，边缘图中的一条直线对应着参数空间的一个点，即点坐标到极坐标，而非直线坐标到极坐标。边缘图中所有点在参数空间画出的曲线在参数空间中能在某几个点处相交，这几个点即对应着边缘图中的直线，把上述的峰值点代表的线段放回原图像验证，可以得到多组有效线段，根据前一步找到的线段角度，就可以对图像进行有效的校正。
具体的步骤4：前端开发时将视觉稿中的弹性元素的单位进行转换，并生成最终效果图。优选的，步骤4的具体步骤为通过Sass的函数和混合宏将视觉稿中弹性元素的单位进行转换，步骤3中视觉稿中弹性元素的单位为像素单位(PX)。优选的，步骤4中将所有弹性元素的单位如像素均转换为rem，其中px像素(Pixel)为相对长度单位，像素px是相对于显示器屏幕分辨率而言的，比较稳定和精确，但在浏览器中放大或缩放浏览页面时会出现页面混乱的情况。Rem也是一个相对单位(root em，根em)，是相对HTML根元素。优选的，Sass的函数和混合宏将视觉稿中弹性元素的单位进行转换的具体步骤为：通过计算公式rem＝视觉稿的px值/rem基数将视觉稿中弹性元素的单位进行转换。将该视觉稿中的弹性元素的尺寸均换算为rem进行布局，当页面渲染时，根据页面有效宽度进行计算，调整rem的大小，动态缩放以达到适配的效果，无需运用媒体差选来动态改变rem基数，可以兼容到所有设备的各种尺寸，因此可以节约更多的时间并提供更好的用户体验。该页面可以完美兼容多屏设备，并做到页面的一致性。
本发明通过JavaScript获取移动端屏幕的设备像素缩放比值；并根据获得的设备像素缩放比值对应调整页面属性；加载不同尺寸的图片，并生成视觉稿；前端开发时将视觉稿中的弹性元素的单位进行转换，并生成最终效果图。本发明可以根据移动端屏幕动态缩放页面，能够满足大小屏的展示效果，也给设计带来无限的可能性。本发明在进行页面渲染时，根据页面有效宽度计算来调整rem的大小，通过动态缩放以到达适配的效果，无需运用媒体差选来动态改变rem基数，可以兼容到所有设备的各种尺寸，因此可以节约更多的时间并提供更好的用户体验。
上述说明示出并描述了本发明的优选实施例，如前所述，应当理解本发明并非局限于本文所披露的形式，不应看作是对其他实施例的排除，而可用于各种其他组合、修改和环境，并能够在本文所述发明构想范围内，通过上述教导或相关领域的技术或知识进行改动。而本领域人员所进行的改动和变化不脱离本发明的精神和范围，则都应在本发明所附权利要求的保护范围内。

Claims (10)

1.一种移动端前端开发多屏适配方法，其特征在于：包括以下步骤：
步骤1：通过JavaScript获取移动端屏幕的设备像素缩放比值；
步骤2：根据步骤1中获得的设备像素缩放比值对应调整页面属性；
步骤3：加载不同尺寸的图片，并生成视觉稿；
步骤4：前端开发时将视觉稿中的弹性元素的单位进行转换，并生成最终效果图。
2.根据权利要求1所述的一种移动端前端开发多屏适配方法，其特征在于：所述步骤2中进一步包括：根据步骤1中获得的设备像素缩放比值计算出HTML的基准值,进而相应的进行页面属性的调整。
3.根据权利要求2所述的一种移动端前端开发多屏适配方法，其特征在于：所述HTML的基准值＝屏幕宽度*设备像素缩放比值/16。
4.根据权利要求3所述的一种移动端前端开发多屏适配方法，其特征在于：所述HTML的基准值与动态设备像素缩放比值一一对应，并均写入HTML。
5.根据权利要求1所述的一种移动端前端开发多屏适配方法，其特征在于：所述步骤2中还进一步包括：根据步骤1获得的设备像素缩放比值动态设置页面的viewport,进而相应的进行页面属性的调整。
6.根据权利要求5所述的一种移动端前端开发多屏适配方法，其特征在于：所述viewport根据不同的设备像素比值设置有不同的scale值。
7.根据权利要求6所述的一种移动端前端开发多屏适配方法，其特征在于：所述scale值＝1/设备像素缩放比值。
8.根据权利要求1所述的一种移动端前端开发多屏适配方法，其特征在于：所述步骤4的具体步骤为通过Sass的函数和混合宏将视觉稿中弹性元素的单位进行转换。
9.根据权利要求8所述的一种移动端前端开发多屏适配方法，其特征在于：所述视觉稿中弹性元素的单位为像素单位。
10.根据权利要求8所述的一种移动端前端开发多屏适配方法，其特征在于：所述步骤4中将像素单位转换为rem。
CN201610222577.6A 2016-04-11 2016-04-11 一种移动端前端开发多屏适配方法 Pending CN105912336A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201610222577.6A CN105912336A (zh) 2016-04-11 2016-04-11 一种移动端前端开发多屏适配方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201610222577.6A CN105912336A (zh) 2016-04-11 2016-04-11 一种移动端前端开发多屏适配方法

Publications (1)

Publication Number Publication Date
CN105912336A true CN105912336A (zh) 2016-08-31

Family

ID=56745088

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201610222577.6A Pending CN105912336A (zh) 2016-04-11 2016-04-11 一种移动端前端开发多屏适配方法

Country Status (1)

Country Link
CN (1) CN105912336A (zh)

Cited By (18)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN106502659A (zh) * 2016-10-14 2017-03-15 武汉斗鱼网络科技有限公司 一种移动设备网页单页面的布局方法及***
CN106708985A (zh) * 2016-12-12 2017-05-24 北京奇虎科技有限公司 多栏网页的布局方法及装置
CN107092684A (zh) * 2017-04-21 2017-08-25 腾讯科技（深圳）有限公司 图像处理方法及装置、存储介质
CN107402757A (zh) * 2017-07-11 2017-11-28 北京潘达互娱科技有限公司 页面渲染方法及装置
CN108241505A (zh) * 2016-12-26 2018-07-03 航天信息股份有限公司 一种页面适配方法及装置
CN108427546A (zh) * 2018-05-03 2018-08-21 深圳Tcl新技术有限公司 显示装置的全屏幕适配方法、显示装置及存储介质
CN108829474A (zh) * 2018-05-28 2018-11-16 深圳市共进电子股份有限公司 移动端界面的适配方法、装置、移动终端及存储介质
CN109101303A (zh) * 2018-07-04 2018-12-28 杭州涂鸦信息技术有限公司 智能图片懒加载方法
CN109408365A (zh) * 2018-08-30 2019-03-01 深圳壹账通智能科技有限公司 辅助页面测试方法、装置、存储介质和计算机设备
CN110147230A (zh) * 2019-04-18 2019-08-20 浙江数链科技有限公司 页面适配方法、装置、设备和存储介质
CN110297996A (zh) * 2019-05-21 2019-10-01 深圳壹账通智能科技有限公司 基于h5页面的动画显示方法、装置、设备及存储介质
CN110515624A (zh) * 2019-07-29 2019-11-29 济南浪潮数据技术有限公司 一种前端单位转换方法、装置、设备和存储介质
CN112261227A (zh) * 2020-10-28 2021-01-22 冠群信息技术(南京)有限公司 一种移动端多屏等比例适配的方法
CN113486280A (zh) * 2021-07-02 2021-10-08 北京达佳互联信息技术有限公司 页面渲染显示方法、装置、设备、存储介质和程序产品
CN113934339A (zh) * 2021-09-14 2022-01-14 南方电网深圳数字电网研究院有限公司 一种基于rem的页面自适应布局的方法及装置
CN114040100A (zh) * 2021-11-02 2022-02-11 上汽通用五菱汽车股份有限公司 一种基于动态适配的车载摄像头显示方法、***及设备
CN114296674A (zh) * 2021-12-30 2022-04-08 北京天融信网络安全技术有限公司 屏幕适配方法、装置、计算机设备及存储介质
CN116226951A (zh) * 2022-12-05 2023-06-06 中山市可讯科技有限公司 一种新型的在线平面测量方法及其应用

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103455571A (zh) * 2013-08-19 2013-12-18 小米科技有限责任公司 网页中的图片显示方法、装置及终端
CN104090926A (zh) * 2014-06-20 2014-10-08 北京奇虎科技有限公司 浏览器缩放状态检测方法与装置
CN104932923A (zh) * 2015-06-19 2015-09-23 上海卓悠网络科技有限公司 一种更新桌面的方法、服务器和移动终端
CN105204853A (zh) * 2015-09-14 2015-12-30 新浪网技术(中国)有限公司 一种网页浏览器的Canvas绘图方法及装置

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103455571A (zh) * 2013-08-19 2013-12-18 小米科技有限责任公司 网页中的图片显示方法、装置及终端
CN104090926A (zh) * 2014-06-20 2014-10-08 北京奇虎科技有限公司 浏览器缩放状态检测方法与装置
CN104932923A (zh) * 2015-06-19 2015-09-23 上海卓悠网络科技有限公司 一种更新桌面的方法、服务器和移动终端
CN105204853A (zh) * 2015-09-14 2015-12-30 新浪网技术(中国)有限公司 一种网页浏览器的Canvas绘图方法及装置

Cited By (24)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN106502659B (zh) * 2016-10-14 2019-05-17 武汉斗鱼网络科技有限公司 一种移动设备网页单页面的布局方法及***
CN106502659A (zh) * 2016-10-14 2017-03-15 武汉斗鱼网络科技有限公司 一种移动设备网页单页面的布局方法及***
CN106708985A (zh) * 2016-12-12 2017-05-24 北京奇虎科技有限公司 多栏网页的布局方法及装置
CN106708985B (zh) * 2016-12-12 2020-08-18 北京奇虎科技有限公司 多栏网页的布局方法及装置
CN108241505A (zh) * 2016-12-26 2018-07-03 航天信息股份有限公司 一种页面适配方法及装置
CN107092684A (zh) * 2017-04-21 2017-08-25 腾讯科技（深圳）有限公司 图像处理方法及装置、存储介质
CN107402757A (zh) * 2017-07-11 2017-11-28 北京潘达互娱科技有限公司 页面渲染方法及装置
CN107402757B (zh) * 2017-07-11 2021-03-02 北京潘达互娱科技有限公司 页面渲染方法及装置
CN108427546A (zh) * 2018-05-03 2018-08-21 深圳Tcl新技术有限公司 显示装置的全屏幕适配方法、显示装置及存储介质
CN108829474A (zh) * 2018-05-28 2018-11-16 深圳市共进电子股份有限公司 移动端界面的适配方法、装置、移动终端及存储介质
CN109101303A (zh) * 2018-07-04 2018-12-28 杭州涂鸦信息技术有限公司 智能图片懒加载方法
CN109408365A (zh) * 2018-08-30 2019-03-01 深圳壹账通智能科技有限公司 辅助页面测试方法、装置、存储介质和计算机设备
CN110147230A (zh) * 2019-04-18 2019-08-20 浙江数链科技有限公司 页面适配方法、装置、设备和存储介质
CN110297996A (zh) * 2019-05-21 2019-10-01 深圳壹账通智能科技有限公司 基于h5页面的动画显示方法、装置、设备及存储介质
CN110297996B (zh) * 2019-05-21 2023-09-01 深圳壹账通智能科技有限公司 基于h5页面的动画显示方法、装置、设备及存储介质
CN110515624A (zh) * 2019-07-29 2019-11-29 济南浪潮数据技术有限公司 一种前端单位转换方法、装置、设备和存储介质
CN112261227A (zh) * 2020-10-28 2021-01-22 冠群信息技术(南京)有限公司 一种移动端多屏等比例适配的方法
CN113486280A (zh) * 2021-07-02 2021-10-08 北京达佳互联信息技术有限公司 页面渲染显示方法、装置、设备、存储介质和程序产品
CN113934339A (zh) * 2021-09-14 2022-01-14 南方电网深圳数字电网研究院有限公司 一种基于rem的页面自适应布局的方法及装置
CN114040100A (zh) * 2021-11-02 2022-02-11 上汽通用五菱汽车股份有限公司 一种基于动态适配的车载摄像头显示方法、***及设备
CN114296674A (zh) * 2021-12-30 2022-04-08 北京天融信网络安全技术有限公司 屏幕适配方法、装置、计算机设备及存储介质
CN114296674B (zh) * 2021-12-30 2024-03-12 北京天融信网络安全技术有限公司 屏幕适配方法、装置、计算机设备及存储介质
CN116226951A (zh) * 2022-12-05 2023-06-06 中山市可讯科技有限公司 一种新型的在线平面测量方法及其应用
CN116226951B (zh) * 2022-12-05 2024-04-30 中山市可讯科技有限公司 一种新型的在线平面测量方法及其应用

Similar Documents

Publication Publication Date Title
CN105912336A (zh) 一种移动端前端开发多屏适配方法
CN107885848B (zh) 基于web技术的网页截屏方法
US10339209B2 (en) Webpage display method and device
CN109308155A (zh) 调整页面的方法、装置、计算机设备及存储介质
CN105975576B (zh) 终端内容适配显示方法、装置和终端
CN104050185B (zh) 一种页面内容缩放显示处理方法及装置
CN105094563B (zh) 一种图片裁剪方法及裁剪***
CN106095437B (zh) 用户界面从右到左rtl的布局方式的实现方法及装置
CN106502659B (zh) 一种移动设备网页单页面的布局方法及***
US20120110438A1 (en) Proportional Font Scaling
CN106648581B (zh) 页面显示方法及装置
CN103544253A (zh) 一种以瀑布流方式显示图片的实现方法及***
CN107256259B (zh) 页面显示方法、装置、电子设备以及存储介质
CN102073650A (zh) 一种网页自适应调节的方法和设备
CN107015793A (zh) 设计稿适配方法、装置及***
CN105930464B (zh) Web富媒体跨屏适配方法和装置
US20160232151A1 (en) Responsive course design system and method
CN109871206A (zh) Json树的视图化方法、装置、设备及可读存储介质
CN103186880B (zh) 生成缩略图的方法和装置
CN101593455A (zh) 电子地图线状流动注记的配置方法及装置
CN110443772B (zh) 图片处理方法、装置、计算机设备和存储介质
CN104424174B (zh) 文档处理***和文档处理方法
CN111310082B (zh) 一种页面显示方法和装置
US9817795B2 (en) Document layout for electronic displays
CN110780872B (zh) 元素排布方法、装置、计算机可读存储介质及设备

Legal Events

Date Code Title Description
C06 Publication
PB01 Publication
C10 Entry into substantive examination
SE01 Entry into force of request for substantive examination
RJ01 Rejection of invention patent application after publication
RJ01 Rejection of invention patent application after publication

Application publication date: 20160831