CN112261227A - 一种移动端多屏等比例适配的方法 - Google Patents

一种移动端多屏等比例适配的方法 Download PDF

Info

Publication number
CN112261227A
CN112261227A CN202011171564.3A CN202011171564A CN112261227A CN 112261227 A CN112261227 A CN 112261227A CN 202011171564 A CN202011171564 A CN 202011171564A CN 112261227 A CN112261227 A CN 112261227A
Authority
CN
China
Prior art keywords
mobile terminal
screen
visual
scaling ratio
equal
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
CN202011171564.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.)
Guanqun Information Technology Nanjing Co ltd
Original Assignee
Guanqun Information Technology Nanjing 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 Guanqun Information Technology Nanjing Co ltd filed Critical Guanqun Information Technology Nanjing Co ltd
Priority to CN202011171564.3A priority Critical patent/CN112261227A/zh
Publication of CN112261227A publication Critical patent/CN112261227A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T3/00—Geometric image transformations in the plane of the image
    • G06T3/40—Scaling of whole images or parts thereof, e.g. expanding or contracting
    • G06T3/4084—Scaling of whole images or parts thereof, e.g. expanding or contracting in the transform domain, e.g. fast Fourier transform [FFT] domain scaling

Landscapes

  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本发明涉及软件开发技术领域，具体涉及一种移动端多屏等比例适配的方法，依次包括步骤S1：接收浏览器发送的获取指定网页的请求；S2：获取移动端屏幕的设备像素缩放比值；S3：根据步骤S2中获得的设备像素缩放比值对应调整页面属性以获得多个不同尺寸的视觉稿，并对所述视觉稿进行存储；S4：对视觉稿中的弹性元素的单位进行转换为rem，并生成最终效果图进行展示。所述移动端多屏等比例适配的方法可对不同尺寸的移动端屏幕进行适配，以降低软件开发成本，提高用户体验。

Description

一种移动端多屏等比例适配的方法
技术领域
本发明涉及软件开发技术领域，尤其涉及一种移动端多屏等比例适配的方法。
背景技术
随着移动端设备发展迅猛，手机尺寸越来越多，不但iphone出了好几个device-width(320p软件开发，375p软件开发，414p软件开发)等，android更时百花齐放。如果设计只提供一套设计稿，由于iPhone5s的屏幕比较小，iPhonePlus又太大，会使得界面变得太狭窄或留白过多。面对不同分辨率的手机，面对不同屏幕寸的手机，很难有比较好的办法来实现移动端高清、多屏适配。针对同一内容重复设计、开发，需耗费大量的人力、物力、资金、时间等，产生严重的资源浪费；基于不同屏幕终端各自孤立设计、开发的内容，后续的更新、维护极为不便，也难以保证内容的一致性；针对不同终端各自开发，难以保证相对一致的界面风格、产品体验，并且不便于资源的共享和管理；响应式设计实施难度大，需要针对多种情况编写开发代码，不仅对终端、浏览器要求较高，也不适应大量信息的频繁更新。因此，为了提高用户体检，节省各方面成本，对于不同屏幕尺寸下页面等比例适配，如果能用一套css搞定，就显得尤为重要。
发明内容
为解决上述技术问题，本发明的目的在于提供一种移动端多屏等比例适配的方法，便有降低软件开发成本，提高用户体验。
为达到上述技术效果，本发明采用了以下技术方案：
一种移动端多屏等比例适配的方法，具体包括以下步骤：
S1：接收浏览器发送的获取指定网页的请求；
S2：获取移动端屏幕的设备像素缩放比值；
S3：根据步骤S2中获得的设备像素缩放比值对应调整页面属性以获得多个不同尺寸的视觉稿，并对所述视觉稿进行存储；
S4：对视觉稿中的弹性元素的单位进行转换为rem，并生成最终效果图进行展示。
进一步地，所述步骤S2中获取设备像素缩放比值的方法为通过通过JavaScript获取。
进一步地，所述弹性元素为像素单位。
进一步地，所述设备像素缩放比值等于屏幕宽度与设计图宽的比值。
与现有技术相比，本发明的有益效果为：
一方面，本发明提供的一种移动端多屏等比例适配的方法，首先通过接收终端设备上的浏览器发送的获取指定网页的请求，再通过JavaScript获移动端屏幕的设备像素缩放比值，根据获得的设备像素缩放比值对应调整页面属性以获得多个不同尺寸的视觉稿，并对生成的视觉稿进行存储，最后通过对视觉稿中的弹性元素的单位进行转换，并生成最终效果图进行展示，便于对不同比例的显示屏进行适配，且显示效果较好。另一方面，本发明提供的一种移动端多屏等比例适配的方法，通过将移动端的页面内任何需要弹性适配的元素的尺寸均换算为rem进行布局；当页面渲染时，根据页面有效宽度进行计算，并对应调整rem的大小，动态缩放以达到适配的效果，有效解决了因为页面宽度固定，无法满足大小屏展示效果的问题。
附图说明
图1为本发明一实施例提供的一种移动端多屏等比例适配的方法的工作流程图；
具体实施方式
下面将结合附图对本发明技术方案的实施例进行详细的描述。以下实施例仅用于更加清楚地说明本发明的技术方案，因此只作为示例，而不能以此来限制本发明的保护范围。
如图1所示，本实施例提供的一种移动端多屏等比例适配的方法，在具体实施时，包括步骤1.一种移动端多屏等比例适配的方法，其特征在于，包括以下步骤：
S1：接收浏览器发送的获取指定网页的请求；
S2：获取移动端屏幕的设备像素缩放比值；具体地，设备像素缩放比值等于屏幕宽除以设计图宽得到数值，比如屏幕宽等于750px，设计图宽等于1000px，750除以1000得到0.75px，等于说是设计图的1px，在浏览器上展示的大小为0.75px。
S3：根据步骤S2中获得的设备像素缩放比值对应调整页面属性以获得多个不同尺寸的视觉稿，并对所述视觉稿进行存储；具体地，通过继承这个比例大小，采用rem的方法，继承html的font-size大小的方法去实现，设置html的font-size等于0.75px(屏幕的0.75px相当于设计图的1px),rem会继承html的font-size大小，所以在页面里面使用的1rem就等于设计图的1px，然后把得到的设计图和屏幕宽的比例乘以100，等于75，现在1rem等于设计图的100px,0.01rem等于设计图的1px，以得到多个不同尺寸的视觉稿。
S4：对视觉稿中的弹性元素的单位进行转换，并生成最终效果图进行展示。具体地，通过把得到的设计图和屏幕宽的比例乘以100，等于75，现在1rem等于设计图的100px,0.01rem等于设计图的1px。把所有的尺寸都转成百分比布局，那么所有不同宽度的页面都可以用采用一套css。最后只需要把html的font-size设置成document.documentElement.clientWidth/设计图宽度，则能够实现对不同尺寸的显示屏进行适配的目的。
以上实施例仅用以说明本发明的技术方案而非限制，尽管参照较佳实施例对本发明进行了详细说明，本领域的普通技术人员应当理解，可以对本发明的技术方案进行修改或者等同替换，而不脱离本发明技术方案的宗旨和范围，其均应涵盖在本发明的权利要求范围当中。本发明未详细描述的技术、形状、构造部分均为公知技术。

Claims (4)

1.一种移动端多屏等比例适配的方法，其特征在于，包括以下步骤：
S1：接收浏览器发送的获取指定网页的请求；
S2：获取移动端屏幕的设备像素缩放比值；
S3：根据步骤S2中获得的设备像素缩放比值对应调整页面属性以获得多个不同尺寸的视觉稿，并对所述视觉稿进行存储；
S4：对视觉稿中的弹性元素的单位进行转换为rem，并生成最终效果图进行展示。
2.如权利要求1所述的一种移动端多屏等比例适配的方法，其特征在于：所述步骤S2中获取设备像素缩放比值的方法为通过通过JavaScript获取。
3.如权利要求1所述的一种移动端多屏等比例适配的方法，其特征在于：所述弹性元素为像素单位。
4.如权利要求1所述的一种移动端多屏等比例适配的方法，其特征在于：所述设备像素缩放比值等于屏幕宽度与设计图宽的比值。
CN202011171564.3A 2020-10-28 2020-10-28 一种移动端多屏等比例适配的方法 Pending CN112261227A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202011171564.3A CN112261227A (zh) 2020-10-28 2020-10-28 一种移动端多屏等比例适配的方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202011171564.3A CN112261227A (zh) 2020-10-28 2020-10-28 一种移动端多屏等比例适配的方法

Publications (1)

Publication Number Publication Date
CN112261227A true CN112261227A (zh) 2021-01-22

Family

ID=74262184

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202011171564.3A Pending CN112261227A (zh) 2020-10-28 2020-10-28 一种移动端多屏等比例适配的方法

Country Status (1)

Country Link
CN (1) CN112261227A (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114296674A (zh) * 2021-12-30 2022-04-08 北京天融信网络安全技术有限公司 屏幕适配方法、装置、计算机设备及存储介质

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
EP2750049A1 (en) * 2011-10-25 2014-07-02 ZTE Corporation Method and device for displaying picture on browser of user terminal as required
CN105912336A (zh) * 2016-04-11 2016-08-31 江苏中威科技软件系统有限公司 一种移动端前端开发多屏适配方法
CN105975576A (zh) * 2016-05-04 2016-09-28 北京京东尚科信息技术有限公司 终端内容适配显示方法、装置和终端
CN110147230A (zh) * 2019-04-18 2019-08-20 浙江数链科技有限公司 页面适配方法、装置、设备和存储介质
CN110837617A (zh) * 2019-10-11 2020-02-25 平安科技（深圳）有限公司 一种网页自适应布局方法、服务器及计算机可读存储介质

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
EP2750049A1 (en) * 2011-10-25 2014-07-02 ZTE Corporation Method and device for displaying picture on browser of user terminal as required
CN105912336A (zh) * 2016-04-11 2016-08-31 江苏中威科技软件系统有限公司 一种移动端前端开发多屏适配方法
CN105975576A (zh) * 2016-05-04 2016-09-28 北京京东尚科信息技术有限公司 终端内容适配显示方法、装置和终端
CN110147230A (zh) * 2019-04-18 2019-08-20 浙江数链科技有限公司 页面适配方法、装置、设备和存储介质
CN110837617A (zh) * 2019-10-11 2020-02-25 平安科技（深圳）有限公司 一种网页自适应布局方法、服务器及计算机可读存储介质

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114296674A (zh) * 2021-12-30 2022-04-08 北京天融信网络安全技术有限公司 屏幕适配方法、装置、计算机设备及存储介质
CN114296674B (zh) * 2021-12-30 2024-03-12 北京天融信网络安全技术有限公司 屏幕适配方法、装置、计算机设备及存储介质

Similar Documents

Publication Publication Date Title
CN107885848B (zh) 基于web技术的网页截屏方法
CN107066430B (zh) 图片处理方法、装置、服务端及客户端
CN103823620B (zh) 一种屏幕适配的方法和装置
CN103631958B (zh) 一种页面自动适配实现内容多屏展示的方法
CN110795177B (zh) 图形绘制方法及装置
CN113127784B (zh) 大屏数据可视化显示方法、装置、存储介质和计算机设备
US20160275054A1 (en) Webpage display method and device
CN103514241A (zh) 图片加载方法及系统
CN107256259B (zh) 页面显示方法、装置、电子设备以及存储介质
US9117314B2 (en) Information output apparatus, method, and recording medium for displaying information on a video display
CN104123362A (zh) 一种面向多终端设备的网页适应性布局方法
CN110598140A (zh) 页面调整方法、装置及服务器
CN108647348A (zh) 文本展示方法、装置、设备及存储介质
CN111915705B (zh) 图片可视化编辑方法、装置、设备和介质
CN112287257A (zh) 一种页面展示方法、装置、电子设备及存储介质
CN106599023A (zh) 一种图片显示的优化方法及装置
CN108874373B (zh) 向网页内插入信息的方法及装置、显示终端及存储介质
CN112261227A (zh) 一种移动端多屏等比例适配的方法
CN110765384A (zh) 客户端的分辨率适配方法、存储介质及终端
CN117971369A (zh) 可视化监控界面响应式布局方法
CN105389308B (zh) 网页的显示处理方法及装置
CN111757020B (zh) 分屏显示方法、装置、多媒体终端以及存储介质
CN112752107A (zh) 网页图片预处理方法、系统、存储介质及计算机设备
JP2014071448A (ja) ディスプレイのフォント生成システム及び方法
CN109710122B (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
RJ01 Rejection of invention patent application after publication
RJ01 Rejection of invention patent application after publication

Application publication date: 20210122