CN111984351A - 页面适配方法、电子设备、计算机可读存储介质 - Google Patents
页面适配方法、电子设备、计算机可读存储介质 Download PDFInfo
- Publication number
- CN111984351A CN111984351A CN202010789569.6A CN202010789569A CN111984351A CN 111984351 A CN111984351 A CN 111984351A CN 202010789569 A CN202010789569 A CN 202010789569A CN 111984351 A CN111984351 A CN 111984351A
- Authority
- CN
- China
- Prior art keywords
- size
- page
- displayed
- font
- screen
- 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
- 230000006978 adaptation Effects 0.000 title claims abstract description 93
- 238000000034 method Methods 0.000 title claims abstract description 46
- 230000003044 adaptive effect Effects 0.000 claims abstract description 39
- 238000013461 design Methods 0.000 claims description 25
- 238000004590 computer program Methods 0.000 claims description 5
- 238000006243 chemical reaction Methods 0.000 claims description 4
- 238000011161 development Methods 0.000 abstract description 4
- 230000008859 change Effects 0.000 description 7
- 238000010586 diagram Methods 0.000 description 4
- 230000000007 visual effect Effects 0.000 description 4
- 230000009286 beneficial effect Effects 0.000 description 3
- 238000012545 processing Methods 0.000 description 3
- 230000006870 function Effects 0.000 description 2
- 230000006872 improvement Effects 0.000 description 2
- 238000007726 management method Methods 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 230000002093 peripheral effect Effects 0.000 description 2
- 230000008569 process Effects 0.000 description 2
- 230000005540 biological transmission Effects 0.000 description 1
- 238000002474 experimental method Methods 0.000 description 1
- 239000004973 liquid crystal related substance Substances 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
Images
Classifications
-
- 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)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
- Controls And Circuits For Display Device (AREA)
Abstract
本发明实施例涉及计算机技术领域,公开了一种页面适配方法、电子设备、计算机可读存储介质。上述页面适配方法包括:获取终端的屏幕尺寸;根据所述屏幕尺寸确定与待显示页面适配的适配尺寸;其中,所述待显示页面为在所述终端的屏幕上待显示的页面;根据所述适配尺寸,确定所述待显示页面的根元素的字体大小;根据所述根元素的字体大小,显示所述待显示的页面。本发明实施例提供的方案可以兼容不同屏幕尺寸的终端,避免重复开发,减少资源的投入,提高工作效率。
Description
技术领域
本发明实施例涉及计算机技术领域,特别涉及一种页面适配方法、电子设备、计算机可读存储介质。
背景技术
随着公众对手机等移动设备外观需求的提高,市面上发行的不同系统、不同设备终端的屏幕多种多样,屏幕的大小也各有不同。为了用户能够正常地打开需要浏览的页面,需要超级文本标记语言((Hyper Text Mark-up Language,简称:HTML)页面对各种设备屏幕进行适配。目前的适配方案包括基于媒体查询更改页面布局的技术、基于rem的Flexible技术。
发明人发现现有技术中至少存在如下问题:由于开发人员基于的设计稿尺寸不同,当用户设备需要打开一个以非本设备尺寸为基础设计稿的页面时,无论是基于媒体查询更改页面布局的技术,还是基于rem的Flexible技术,在对大屏幕设备进行页面适配时,都需要重新编写开发程序来配置适配系统,现有的适配系统不能友好地兼容不同屏幕尺寸的设备。这些方式没有统一的规则、规范,特别是基于媒体查询更改页面布局的技术,程序开发冗余且复杂,存在重复开发的现象,需反复投入资源,降低工作效率。
发明内容
本发明的实施方式的目的在于提供一种页面适配方法、电子设备、计算机可读存储介质,可以兼容不同屏幕尺寸的终端,避免重复开发,减少了资源的投入,提高开发人员的工作效率。
为解决上述技术问题,本发明的实施方式提供了一种页面适配的方法,包括以下步骤:获取终端的屏幕尺寸;根据所述屏幕尺寸确定与待显示页面适配的适配尺寸;其中,所述待显示页面为在所述终端的屏幕上待显示的页面;根据所述适配尺寸,确定所述待显示页面的根元素的字体大小;根据所述根元素的字体大小,显示所述待显示的页面。
本发明的实施方式还提供了一种电子设备,包括:至少一个处理器;以及,与所述至少一个处理器通信连接的存储器;其中,所述存储器存储有可被所述至少一个处理器执行的指令,所述指令被所述至少一个处理器执行,以使所述至少一个处理器能够执行上述页面适配的方法。
本发明的实施方式还提供了一种计算机可读存储介质,存储有计算机程序,所述计算机程序被处理器执行时实现上述页面适配的实现方法。
本发明的实施方式相对于现有技术而言,通过获取终端的屏幕尺寸,从而可以根据屏幕尺寸确定与待显示页面适配的适配尺寸,然后根据适配尺寸,确定待显示页面的根元素的字体大小,从而进一步根据根元素的字体大小,显示待显示的页面。考虑到不同终端可能具有不同的屏幕尺寸,通过结合终端的屏幕尺寸,有利于针对不同的屏幕尺寸,得到与待显示页面适配的适配尺寸。根据适配尺寸,确定待显示页面的根元素的字体大小,使得待显示页面显示在终端的屏幕上时,显示的字体可以和屏幕适配,从而提高用户的视觉体验。根据根元素的字体大小,显示待显示的页面,即本发明实施方式通过对待显示页面的根元素字体大小进行适配,完成对待显示页面的适配,从而可以兼容不同屏幕尺寸的终端。即对不同屏幕尺寸的终端分别适配,减少了资源的投入,提高开发人员的工作效率。而且,考虑到现有的Flexible技术,需要基于设备像素比(device pixels ratio,简称:dpr)进行适配,还存在如下弊端:不同品牌终端的dpr有多种值,并不方便做统一处理;而且Flexible技术需动态调整和dpr相关的参数值,在dpr>1的系统中,引用以px为单位的第三方组件会出现字体变小的现象,难以兼容以px为单位的第三方组件库。本发明的实施方式直接从根元素的字体大小入手,不需要动态调整和dpr相关的参数值,而是对待显示页面的根元素字体大小进行适配,不会对布局窗口进行比例缩放,可以友好地兼容以px为单位的第三方组件库。
另外,根据屏幕尺寸确定与待显示页面适配的适配尺寸,包括:若屏幕尺寸大于预设尺寸,则根据屏幕尺寸和预设尺寸确定尺寸调整量,然后根据尺寸调整量和预设的调整系数,计算所述与待显示页面适配的适配尺寸。其中,若屏幕尺寸大于预设尺寸,可以认为终端的屏幕为大屏幕,从而在确定为大屏幕时,先根据屏幕尺寸和预设尺寸确定尺寸调整量,然后根据尺寸调整量和预设的调整系数,计算与待显示页面适配的适配尺寸,有利于对具有大屏幕的终端进行针对性的适配,友好地兼容了大屏幕终端。
另外,在确定待显示页面的根元素的字体大小之后,还包括:通过获取终端的屏幕字体大小和终端对应的默认字体大小,来计算字体调整比例,然后根据字体调整比例,调整所述待显示页面的根元素的字体大小。考虑到当用户手动设置终端字体的大小时,根元素字体大小也会受到影响,基于rem的待显示页面的布局也就会受到影响,因此当用户自定义了终端字体大小时,本发明实施方式的页面适配的方法将对待显示页面的根元素的字体大小进行调整,获取终端的屏幕字体大小,即当前终端屏幕上实际显示的字体大小,结合实际显示的字体大小和终端对应的默认字体大小确定字体调整比例,从而根据调整比例对待显示页面的根元素的字体大小进行缩放,使得即使用户自定义了字体,也可以通过对根元素的字体大小进行回归调整,从而消除因用户自定义字体,而对待显示页面的布局的影响。
另外,根据适配尺寸,确定待显示页面的根元素的字体大小,包括:通过获取待显示页面的设计稿的逻辑分辨率和计算出的适配尺寸,确定根元素的字体适配比例,然后根据字体适配比例,确定待显示页面的根元素的字体大小。最后,通过结合终端对应的适配尺寸和即将在终端的屏幕上显示的待显示页面的设计稿的逻辑分辨率,确定根元素的字体适配比例。本发明的实施方式方便了根据字体适配比例准确的确定待显示页面的根元素的字体大小。
附图说明
一个或多个实施例通过与之对应的附图中的图片进行示例性说明,这些示例性说明并不构成对实施例的限定,附图中具有相同参考数字标号的元件表示为类似的元件,除非有特别申明,附图中的图不构成比例限制。
图1是根据本发明第一实施方式的页面适配方法的流程图;
图2是根据本发明第一实施方式中,根据自身的屏幕尺寸确定与待显示页面适配的适配尺寸的子步骤流程图;
图3是根据本发明第二实施方式的页面适配方法的流程图;
图4是根据本发明第三实施方式的页面适配方法的流程图;
图5是根据本发明第三实施方式的实现页面适配方法的模块图;
图6是根据本发明第四实施方式的电子设备的结构示意图。
具体实施方式
为使本发明实施例的目的、技术方案和优点更加清楚,下面将结合附图对本发明的各实施方式进行详细的阐述。然而,本领域的普通技术人员可以理解,在本发明各实施方式中,为了使读者更好地理解本申请而提出了许多技术细节。但是,即使没有这些技术细节和基于以下各实施方式的种种变化和修改,也可以实现本申请所要求保护的技术方案。以下各个实施例的划分是为了描述方便,不应对本发明的具体实现方式构成任何限定,各个实施例在不矛盾的前提下可以相互结合相互引用。
本发明的第一实施方式涉及一种页面适配的方法,应用于电子设备;其中,电子设备可以为终端或服务器,本实施方式以及以下个各个实施方式中电子设备以终端为例进行说明。下面对本实施方式的页面适配的方法的实现细节进行具体的说明,以下内容仅为方便理解提供的实现细节,并非实施本方案的必须。
本发明的实施方式的应用场景可以包括但不限于:终端的屏幕上显示页面、APP内页面在浏览器显示、浏览器页面跳转在APP内部打开等情况。其中,终端可以是智能手机、平板电脑或智能音箱等具有屏幕的设备。
本发明的实施方式基于rem进行适配,rem是层叠样式表(Cascading StyleSheets,简称:css)的一个相对单位,相对的是HTML页面的根元素的字体大小。css中的px是一个相对长度,它相对的是终端屏幕的分辨率;其中,终端屏幕可以为手机屏幕。典型的手机屏幕的分辨率是5.5每英寸点数(Dots Per Inch,简称:DPI),也就是1像素为1/5.5英寸。实际上,假设手机屏幕的逻辑分辨率都与物理分辨率一致,而液晶点距其实位于0.25mm到0.29mm之间,所以可能是准确的1/5.5英寸,而只是接近。css像素(px)与rem的转换关系为:1rem=k px,其中k为根元素的字体大小。
本实施方式的页面适配的方法的具体流程可以如图1所示,包括:
步骤101,获取终端的屏幕尺寸;
具体而言,当用户需要打开某个需要浏览的页面时,终端会获取自身的屏幕尺寸,其中屏幕尺寸可以是屏幕宽度,然并不以此为限。用户使用的终端可以是智能手机、平板电脑、智能音箱等具有屏幕的设备。
在一个例子中,可以先设置终端布局视口为理想视口,比如可以通过metaviewport将终端的布局视口设置为理想视口。在移动终端中,有三种视口:视觉视口,使用户当前看到的区域,用户可以通过缩放操作视觉视口,同时不会影响布局视口;布局视口,也就是浏览器默认的窗口,一般移动终端的浏览器都定义了一个虚拟的布局视口;理想视口,通常指的是屏幕分辨率,通常为了自适应布局,会将布局视口大小设置成理想视口大小。在具体实现中,将终端的布局视口设置为理想视口时获取的用户的可视区域大小可以理解为终端的屏幕尺寸。
在一个例子中,终端的屏幕尺寸可以通过JavaScript获取,JavaScript可根据特定需求或场景对方案进行更改,可移植性高、扩展性强。
步骤102,根据屏幕尺寸确定与待显示页面适配的适配尺寸;
其中,待显示页面指的是用户打开的需要浏览的HTML页面,待显示页面可以是以任何逻辑分辨率为设计稿进行设计的,如:414×736、375×667等。
在一个例子中,终端可以根据自身的屏幕尺寸确定与待显示页面适配的适配尺寸。比如,终端内可以预存屏幕尺寸与适配尺寸之间的对应关系,终端可以根据屏幕尺寸以及预存的上述对应关系确定与待显示页面适配的适配尺寸。
在另一个例子中,根据屏幕尺寸确定与待显示页面适配的适配尺寸,可以通过如图2所示的各子步骤实现,包括:
子步骤1021:判断屏幕尺寸是否大于预设尺寸;如果是,则执行步骤1022,否则执行步骤1023。
其中,预设尺寸可以由本领域技术人员根据实际需要进行设置,本实施方式对此不做具体限定。比如,终端以手机为例,般手机的屏幕宽度在320px至480px之间,可选择500px作为预设尺寸。
子步骤1022,根据屏幕尺寸和预设尺寸确定尺寸调整量,并根据预设的调整系数确定与待显示页面适配的适配尺寸;
具体而言,当终端判定屏幕尺寸大于预设尺寸时,可以确定自身屏幕为大屏幕,终端根据屏幕尺寸和预设尺寸确定尺寸调整量,并结合预设的调整系数确定与待显示页面适配的适配尺寸,该子步骤可以由公式c=w+(w-p)×a实现,其中,w-p为尺寸调整量,w为屏幕尺寸,p为预设尺寸,a为预设的调整系数,c为与待显示页面适配的适配尺寸。
其中,预设尺寸p和预设的调整系数a可以由本领域技术人员根据实际需要进行设定,比如由开发者根据开发需求进行设定,本实施方式对此不做具体限定。
以手机为例,一般手机的屏幕宽度在320px至480px之间,可选择500px作为预设尺寸,若用户的智能手机的宽度大于500px,判断该用户的智能手机的屏幕为大屏幕。例如,当用户的手机的屏幕宽度为640px时,终端判断自身屏幕为大屏幕。屏幕宽度大于500px的部分即需要调整的尺寸调整量,尺寸调整量可以乘以预设的调整系数进行调整(其中,预设的调整系数由开发者设定,可以选择的范围为为0.089至0.12)。经多次实验发现,当预设的调整系数取0.1时,可获得友好的适配效果。在预设的调整系数取0.1的情况下,该屏幕宽度为640px的智能手机的适配宽度为:500+(640-500)×0.1px,即514px。
子步骤1023,将屏幕尺寸作为与待显示页面适配的适配尺寸;
具体而言,仍选择500px作为预设尺寸,若用户的智能手机宽度小于或等于500px,判断该用户的智能手机的屏幕为小屏幕。
例如,当用户的手机的屏幕宽度为480px时,终端判断该用户的手机的屏幕为小屏幕,终端直接将屏幕宽度确定为与待显示页面适配的适配宽度,即480px。
步骤103,根据适配尺寸,确定根元素的字体大小;
在一个例子中,终端可以根据步骤102得到的适配尺寸,确定根元素的字体大小。比如,终端内可以预存适配尺寸与根元素的字体大小之间的对应关系,终端可以根据适配尺寸以及预存的上述对应关系确定根元素的字体大小。
步骤104,根据根元素的字体大小,显示待显示的页面。
具体而言,在进行页面适配时,组成HTML页面的各子元素大小均跟随根元素的字体大小变化而变化,本实施例基于rem进行页面适配,根元素的字体大小从以px为单位最终转化成以rem为单位,转换关系为:1rem=k px,其中k为根元素的字体大小。
在具体实现中,在终端的屏幕上显示上述待显示的页面时,可以将根元素的字体大小设置为步骤103中确定的根元素的字体大小,从而待显示的页面上与根元素对应的其他子元素的字体大小也会随着根元素的字体大小的变化而变化,从而实现待显示的页面与终端的屏幕适配。
本发明的第一实施方式相对于现有技术而言,通过获取终端的屏幕尺寸,从而可以根据屏幕尺寸确定与待显示页面适配的适配尺寸,然后根据适配尺寸,确定待显示页面的根元素的字体大小,从而进一步根据根元素的字体大小,显示待显示的页面。考虑到不同终端可能具有不同的屏幕尺寸,通过结合终端的屏幕尺寸,有利于针对不同的屏幕尺寸,得到与待显示页面适配的适配尺寸。根据适配尺寸,确定待显示页面的根元素的字体大小,使得待显示页面显示在终端的屏幕上时,显示的字体可以和屏幕适配,从而提高用户的视觉体验。根据根元素的字体大小,显示待显示的页面,即本发明实施方式通过对待显示页面的根元素字体大小进行适配,完成对待显示页面的适配,从而可以兼容不同屏幕尺寸的终端。即对不同屏幕尺寸的终端分别适配,减少了资源的投入,提高工作效率。而且,考虑到现有的Flexible技术,需要基于dpr进行适配,还存在如下弊端:不同品牌终端的dpr有多种值,并不方便做统一处理;而且Flexible技术需动态调整和dpr相关的参数值,在dpr>1的系统中,引用以px为单位的第三方组件会出现字体变小的现象,难以兼容以px为单位的第三方组件库。本发明的实施方式直接从根元素的字体大小入手,不需要动态调整和dpr相关的参数值,而是对待显示页面的根元素字体大小进行适配,不会对布局窗口进行比例缩放,可以友好地兼容以px为单位的第三方组件库。
本发明的第二实施方式涉及一种页面适配的方法。第二实施方式与第一实施方式大致相同,主要区别之处在于:在第一实施方式中通过预存的对应关系确定根元素的字体大小,在第二实施方式中,根据待显示页面的设计稿的逻辑分辨率和适配尺寸,确定待显示页面的根元素的字体大小。
下面对本实施方式的页面适配的方法的实现细节进行具体的说明,以下内容仅为方便理解提供的实现细节,并非实施本方案的必须。
图3是第二实施方式所述的页面适配的方法的示意图,包括:
步骤201,获取终端的屏幕尺寸;
步骤202,根据屏幕尺寸确定与待显示页面适配的适配尺寸;
其中,步骤201、步骤202和第一实施方式的步骤101、步骤102大致相同,此处不再赘述。
步骤203,获取待显示页面的设计稿的逻辑分辨率;
具体而言,当用户打开某个需要浏览的页面时,终端可以获取待显示页面的设计稿的逻辑分辨率。例如,用户打开某个以414×736为设计稿的页面,终端获取该页面的设计稿的逻辑分辨率为414×736;其中,设计稿的宽度为414px,设计稿的高度为736px。
在一个例子中,待显示页面的设计稿的逻辑分辨率通过JavaScript获取,JavaScript可根据特定需求或场景对方案进行更改,可移植性高、扩展性强。
步骤204,根据待显示页面的设计稿的逻辑分辨率和适配尺寸,确定根元素的字体适配比例;
具体而言,终端获取了待显示页面的设计稿的逻辑分辨率后,根据逻辑分辨率和适配尺寸,确定根元素的字体适配比例。例如,本实施方式使用公式c÷d计算根元素的字体适配比例,其中,c为适配尺寸,d为待显示页面的设计稿的逻辑分辨率。
在具体实现中,假设用户的手机屏幕宽度为640px,计算出终端的适配尺寸为514px,该用户需要打开一个设计稿的逻辑分辨率为414×736的页面,终端获取该页面的设计稿宽度414px,计算出根元素的字体适配比例为1.24。
步骤205,根据字体适配比例,确定待显示页面的根元素的字体大小;
具体而言,终端计算出字体适配比例后,根据字体适配比例,确定待显示页面的根元素的字体大小。例如,本实施方式使用公式f=t×(c÷d)计算待显示页面的根元素的字体大小,其中,c÷d为字体适配比例,t为预设的转换系数(t可以由开发人员根据实际情况进行设定,比如10、100等),f为待显示页面的根元素的字体大小。
在具体实现中,假设用户的手机屏幕宽度为640px,计算出终端的适配尺寸为514px,该用户需要打开一个设计稿宽度为414px的页面,终端计算出根元素的字体适配比例为1.24,取转换系数为100,计算出待显示页面的根元素的字体大小:100×1.24px,即124px。本发明基于rem进行页面适配,即1rem=124px。
步骤206:根据根元素的字体大小,显示待显示的页面。
其中,步骤206和第一实施方式中的步骤104大致相同,此处不再赘述。
与现有技术相比,本实施例中,当用户打开某个需要浏览的页面时,通过获取待显示页面的设计稿的逻辑分辨率和计算出的适配尺寸,确定根元素的字体适配比例,然后根据字体适配比例,确定待显示页面的根元素的字体大小。最后,通过结合终端对应的适配尺寸和即将在终端的屏幕上显示的待显示页面的设计稿的逻辑分辨率,确定根元素的字体适配比例。本发明的实施方式方便了根据字体适配比例准确的确定待显示页面的根元素的字体大小,从而有效地提高页面适配的准确性。
本发明的第三实施方式涉及一种页面适配的方法。第三实施方式与第一实施方式大致相同,主要区别之处在于:第三实施方式在确定根元素的字体大小之后,还可以可根据终端屏幕大小和终端默认的字体大小,调整待显示页面的根元素的字体大小。下面对本实施方式的页面适配的方法的实现细节进行具体的说明,以下内容仅为方便理解提供的实现细节,并非实施本方案的必须。
图4是第三实施方式所述的页面适配的方法的示意图,包括:
步骤301:获取终端的屏幕尺寸;
步骤302:根据屏幕尺寸确定与待显示页面适配的适配尺寸;
步骤303:根据适配尺寸,确定根元素的字体大小;
其中,步骤301至步骤303和第一实施方式中的步骤101至步骤103大致相同,此处不再赘述。
步骤304,获取终端的屏幕字体大小;
具体而言,当用户自定义终端屏幕字体大小时,终端会获取自身屏幕的字体大小。
在一个例子中,用户自定义手机屏幕字体为18px时,终端会获取手机屏幕字体为18px。其中,终端的屏幕字体大小可以通过JavaScript获取,JavaScript可根据特定需求或场景对方案进行更改,可移植性高、扩展性强。
步骤305,根据屏幕字体大小和终端对应的默认字体大小,计算字体调整比例;
具体而言,终端获取自身屏幕字体大小后,会根据终端对应的默认字体大小计算字体调整比例。例如,本实施方式中用公式b÷n计算字体调整比例,其中,b为屏幕字体大小,n为默认字体大小。屏幕字体大小b可由用户根据实际需要进行设定,即用户自定义的字体大小,比如18px;终端对应的默认字体大小可由终端开发人员设定,比如16px。
在具体实现中,假设某品牌手机的默认字体大小为16px,当用户自定义手机屏幕字体为18px时,终端计算出字体调整比例为1.125。
步骤306,根据字体调整比例,调整根元素的字体大小;
具体而言,终端计算出字体调整比例后,会对根元素字体大小进行回归调整。例如,本实施方式中用公式:f′=f÷(b÷n)调整根元素的字体大小。其中,b÷n为字体调整比例,f为待显示页面的根元素的字体大小,f′为调整后的待显示页面的根元素的字体大小。
在具体实现中,假设用户的手机屏幕宽度为640px,计算出待显示页面的根元素的字体大小为124px,手机的默认字体大小为16px,当用户自定义手机屏幕字体为18px时,终端计算出字体调整比例为1.125,终端对待显示页面的根元素的字体大小进行回归调整,调整后的待显示页面的根元素的字体大小为:124÷(18÷16),即110px。本发明基于rem进行页面适配,即1rem=110px。
在一个例子中,可以在确定字体调整比例不等于1时,调整根元素的字体大小,如果字体调整比例等于1,可以认为当前屏幕上的字体与待显示页面适配,无需进一步调整字体大小。也就是说,可以针对字体调整比例不等于1的情况,进行字体调整,有利于提高调整字体的针对性。
步骤307,根据根元素的字体大小,显示待显示的页面。
其中,步骤307和第一实施方式中的步骤104大致相同,此处不再赘述。
与现有技术相比,本实施例中,考虑到当用户手动设置终端字体的大小时,根元素字体大小也会受到影响,基于rem的待显示页面的布局也就会受到影响,因此当用户自定义了终端字体大小时,本发明实施方式的页面适配的方法将对待显示页面的根元素的字体大小进行调整,获取终端的屏幕字体大小,即当前终端屏幕上实际显示的字体大小,结合实际显示的字体大小和终端对应的默认字体大小确定字体调整比例,从而根据调整比例对待显示页面的根元素的字体大小进行缩放,使得即使用户自定义了字体,也可以通过对根元素的字体大小进行回归调整,从而消除因用户自定义字体,而对待显示页面的布局的影响,使得页面适配更加准确,显示带显示页面时更加美观。
在一个例子中,本实施例可由如图5的三个模块实现:
适配尺寸选择模块401,该模块用于获取终端的屏幕尺寸,然后根据屏幕尺寸确定与待显示页面适配的适配尺寸。
根元素字体取值规划模块402,该模块用于根据适配尺寸,确定根元素的字体大小。
根元素字体回归调整模块403,该模块用于获取终端的屏幕字体大小,然后根据屏幕字体大小和终端对应的默认字体大小,计算字体调整比例,最后,根据字体调整比例,调整根元素的字体大小,显示待显示的页面。
需要说明的是,本实施例也可以是在第二实施例基础上的改进。
上面各种方法的步骤划分,只是为了描述清楚,实现时可以合并为一个步骤或者对某些步骤进行拆分,分解为多个步骤,只要包括相同的逻辑关系,都在本专利的保护范围内;对算法中或者流程中添加无关紧要的修改或者引入无关紧要的设计,但不改变其算法和流程的核心设计都在该专利的保护范围内。
本发明第四实施方式涉及一种电子设备,如图6所示,包括:至少一个处理器501;以及,与所述至少一个处理器501通信连接的存储器502;其中,所述存储器502存储有可被所述至少一个处理器501执行的指令,所述指令被所述至少一个处理器501执行,以使所述至少一个处理器501能够执行上述各实施方式中的页面适配的方法。
其中,存储器和处理器采用总线方式连接,总线可以包括任意数量的互联的总线和桥,总线将一个或多个处理器和存储器的各种电路连接在一起。总线还可以将诸如外围设备、稳压器和功率管理电路等之类的各种其他电路连接在一起,这些都是本领域所公知的,因此,本文不再对其进行进一步描述。总线接口在总线和收发机之间提供接口。收发机可以是一个元件,也可以是多个元件,比如多个接收器和发送器,提供用于在传输介质上与各种其他装置通信的单元。经处理器处理的数据通过天线在无线介质上进行传输,进一步,天线还接收数据并将数据传送给处理器。
处理器负责管理总线和通常的处理,还可以提供各种功能,包括定时,外围接口,电压调节、电源管理以及其他控制功能。而存储器可以被用于存储处理器在执行操作时所使用的数据。
本发明第五实施方式涉及一种计算机可读存储介质,存储有计算机程序。计算机程序被处理器执行时实现上述方法实施例。
即,本领域技术人员可以理解,实现上述实施例方法中的全部或部分步骤是可以通过程序来指令相关的硬件来完成,该程序存储在一个存储介质中,包括若干指令用以使得一个设备(可以是单片机,芯片等)或处理器(processor)执行本申请各个实施例所述方法的全部或部分步骤。而前述的存储介质包括:U盘、移动硬盘、只读存储器(ROM,Read-OnlyMemory)、随机存取存储器(RAM,Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。
本领域的普通技术人员可以理解,上述各实施方式是实现本发明的具体实施例,而在实际应用中,可以在形式上和细节上对其作各种改变,而不偏离本发明的精神和范围。
Claims (10)
1.一种页面适配的方法,其特征在于,包括:
获取终端的屏幕尺寸;
根据所述屏幕尺寸确定与待显示页面适配的适配尺寸;其中,所述待显示页面为在所述终端的屏幕上待显示的页面;
根据所述适配尺寸,确定所述待显示页面的根元素的字体大小;
根据所述根元素的字体大小,显示所述待显示页面。
2.根据权利要求1所述的页面适配的方法,其特征在于,所述根据所述屏幕尺寸确定与待显示页面适配的适配尺寸,包括:
若所述屏幕尺寸大于预设尺寸,根据所述屏幕尺寸和所述预设尺寸确定尺寸调整量;
根据所述尺寸调整量和预设的调整系数,计算所述与待显示页面适配的适配尺寸。
3.根据权利要求2所述的页面适配的方法,其特征在于,通过以下公式计算所述与待显示页面适配的适配尺寸:
c=w+(w-p)×a
其中,w-p为所述尺寸调整量,w为所述屏幕尺寸,p为所述预设尺寸,a为所述预设的调整系数,c为所述与待显示页面适配的适配尺寸。
4.根据权利要求1所述的页面适配的方法,其特征在于,所述根据所述屏幕尺寸确定与待显示页面适配的适配尺寸,包括:
若所述屏幕尺寸小于或等于预设尺寸,将所述屏幕尺寸作为所述与待显示页面适配的适配尺寸。
5.根据权利要求1所述的页面适配的方法,其特征在于,所述根据所述适配尺寸,确定所述待显示页面的根元素的字体大小,包括:
获取所述待显示页面的设计稿的逻辑分辨率;
根据所述待显示页面的设计稿的逻辑分辨率和所述适配尺寸,确定根元素的字体适配比例;
根据所述字体适配比例,确定所述待显示页面的根元素的字体大小。
6.根据权利要求5所述的页面适配的方法,其特征在于,通过以下公式确定所述待显示页面的根元素的字体大小:
f=t×(c÷d)
其中,c÷d为所述字体适配比例,c为所述适配尺寸,d为所述待显示页面的设计稿的逻辑分辨率,t为预设的转换系数,f为所述待显示页面的根元素的字体大小。
7.根据权利要求1-6任一项所述的页面适配的方法,其特征在于,在所述确定所述待显示页面的根元素的字体大小之后,还包括:
获取所述终端的屏幕字体大小;
根据所述屏幕字体大小和所述终端对应的默认字体大小,计算字体调整比例;
根据所述字体调整比例,调整所述待显示页面的根元素的字体大小。
8.根据权利要求7所述的页面适配的方法,其特征在于,所述根据所述字体调整比例,调整所述待显示页面的根元素的字体大小,包括:
通过如下公式确定调整后的所述待显示页面的根元素的字体大小:
f′=f÷(b÷n)
其中,b÷n为所述字体调整比例,b为所述屏幕字体大小,n为所述默认字体大小,f为所述待显示页面的根元素的字体大小,f′为所述调整后的所述待显示页面的根元素的字体大小。
9.一种电子设备,其特征在于,包括:
至少一个处理器;以及,
与所述至少一个处理器通信连接的存储器;其中,
所述存储器存储有可被所述至少一个处理器执行的指令,所述指令被所述至少一个处理器执行,以使所述至少一个处理器能够执行如权利要求1至8中任一所述的页面适配的方法。
10.一种计算机可读存储介质,存储有计算机程序,其特征在于,所述计算机程序被处理器执行时实现权利要求1至8中任一项所述的页面适配的方法。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202010789569.6A CN111984351B (zh) | 2020-08-07 | 2020-08-07 | 页面适配方法、电子设备、计算机可读存储介质 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202010789569.6A CN111984351B (zh) | 2020-08-07 | 2020-08-07 | 页面适配方法、电子设备、计算机可读存储介质 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN111984351A true CN111984351A (zh) | 2020-11-24 |
CN111984351B CN111984351B (zh) | 2024-05-03 |
Family
ID=73445728
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202010789569.6A Active CN111984351B (zh) | 2020-08-07 | 2020-08-07 | 页面适配方法、电子设备、计算机可读存储介质 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN111984351B (zh) |
Cited By (12)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN112416331A (zh) * | 2020-12-07 | 2021-02-26 | 建信金融科技有限责任公司 | 页面的适配方法、装置、电子设备及计算机可读存储介质 |
CN112579940A (zh) * | 2020-12-17 | 2021-03-30 | 北京航天云路有限公司 | 一种可视化大屏接入视频会议界面的方法 |
CN112800373A (zh) * | 2021-02-23 | 2021-05-14 | 广州虎牙科技有限公司 | 网页资源数据生成方法、装置、计算机设备及存储介质 |
CN113407878A (zh) * | 2021-08-18 | 2021-09-17 | 深圳市明源云客电子商务有限公司 | 页面适配方法、显示终端及可读存储介质 |
CN113542903A (zh) * | 2021-07-16 | 2021-10-22 | 思享智汇(海南)科技有限责任公司 | 一种支持字号自适应的字幕生成方法及装置 |
CN113626126A (zh) * | 2021-08-18 | 2021-11-09 | 平安普惠企业管理有限公司 | 应用程序启动页适配方法、装置、设备及介质 |
CN113778436A (zh) * | 2021-07-19 | 2021-12-10 | 福建野小兽健康科技有限公司 | 一种基于h5的页面宽度适配的方法及装置 |
CN113918265A (zh) * | 2021-11-12 | 2022-01-11 | 合众新能源汽车有限公司 | 动态调节车内显示信息的字体大小的方法和系统 |
CN114281445A (zh) * | 2021-11-26 | 2022-04-05 | 华能酒泉风电有限责任公司 | 页面显示方法、装置、电子设备和存储介质 |
CN114416230A (zh) * | 2021-12-20 | 2022-04-29 | 青岛海尔科技有限公司 | 一种适配屏幕的组件显示方法及系统 |
CN114564130A (zh) * | 2022-02-23 | 2022-05-31 | 成都智元汇信息技术股份有限公司 | 基于公共交通的文本自适应方法、显示终端、系统及介质 |
CN116578219A (zh) * | 2023-04-28 | 2023-08-11 | 北京洞悉网络有限公司 | 适用于左右双屏的表单页面自适配展示方法、装置、计算机设备及计算机可读存储介质 |
Citations (8)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US20060174217A1 (en) * | 2005-01-31 | 2006-08-03 | Microsoft Corporation | Method and system for a target device display simulation |
CN101996206A (zh) * | 2009-08-11 | 2011-03-30 | 阿里巴巴集团控股有限公司 | 一种呈现网页页面的方法、装置及系统 |
US20140351721A1 (en) * | 2013-05-21 | 2014-11-27 | International Business Machines Corporation | Modification of windows across multiple displays |
US20150331962A1 (en) * | 2012-12-20 | 2015-11-19 | Uc Mobile Limited | Method and device for scaling font size of page in mobile terminal |
CN106502659A (zh) * | 2016-10-14 | 2017-03-15 | 武汉斗鱼网络科技有限公司 | 一种移动设备网页单页面的布局方法及系统 |
CN108241505A (zh) * | 2016-12-26 | 2018-07-03 | 航天信息股份有限公司 | 一种页面适配方法及装置 |
CN108733336A (zh) * | 2018-05-21 | 2018-11-02 | 北京字节跳动网络技术有限公司 | 页面显示方法和装置 |
CN110532488A (zh) * | 2018-05-23 | 2019-12-03 | 腾讯科技(深圳)有限公司 | 网页渲染方法、装置和电子设备 |
-
2020
- 2020-08-07 CN CN202010789569.6A patent/CN111984351B/zh active Active
Patent Citations (9)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US20060174217A1 (en) * | 2005-01-31 | 2006-08-03 | Microsoft Corporation | Method and system for a target device display simulation |
CN101996206A (zh) * | 2009-08-11 | 2011-03-30 | 阿里巴巴集团控股有限公司 | 一种呈现网页页面的方法、装置及系统 |
US20120131437A1 (en) * | 2009-08-11 | 2012-05-24 | Alibaba Group Holding Limited | Method, Apparatus and System of Displaying Webpages |
US20150331962A1 (en) * | 2012-12-20 | 2015-11-19 | Uc Mobile Limited | Method and device for scaling font size of page in mobile terminal |
US20140351721A1 (en) * | 2013-05-21 | 2014-11-27 | International Business Machines Corporation | Modification of windows across multiple displays |
CN106502659A (zh) * | 2016-10-14 | 2017-03-15 | 武汉斗鱼网络科技有限公司 | 一种移动设备网页单页面的布局方法及系统 |
CN108241505A (zh) * | 2016-12-26 | 2018-07-03 | 航天信息股份有限公司 | 一种页面适配方法及装置 |
CN108733336A (zh) * | 2018-05-21 | 2018-11-02 | 北京字节跳动网络技术有限公司 | 页面显示方法和装置 |
CN110532488A (zh) * | 2018-05-23 | 2019-12-03 | 腾讯科技(深圳)有限公司 | 网页渲染方法、装置和电子设备 |
Non-Patent Citations (2)
Title |
---|
度_琪: "关于rem适配", pages 1 - 2, Retrieved from the Internet <URL:https://www.jianshu.com/p/38c2a696469c> * |
芒果加奶: "pc端自适应——rem", pages 1, Retrieved from the Internet <URL:https://www.jianshu.com/p/595f5ba30f34> * |
Cited By (14)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN112416331A (zh) * | 2020-12-07 | 2021-02-26 | 建信金融科技有限责任公司 | 页面的适配方法、装置、电子设备及计算机可读存储介质 |
CN112579940A (zh) * | 2020-12-17 | 2021-03-30 | 北京航天云路有限公司 | 一种可视化大屏接入视频会议界面的方法 |
CN112800373A (zh) * | 2021-02-23 | 2021-05-14 | 广州虎牙科技有限公司 | 网页资源数据生成方法、装置、计算机设备及存储介质 |
CN112800373B (zh) * | 2021-02-23 | 2023-10-17 | 广州虎牙科技有限公司 | 网页资源数据生成方法、装置、计算机设备及存储介质 |
CN113542903A (zh) * | 2021-07-16 | 2021-10-22 | 思享智汇(海南)科技有限责任公司 | 一种支持字号自适应的字幕生成方法及装置 |
CN113778436A (zh) * | 2021-07-19 | 2021-12-10 | 福建野小兽健康科技有限公司 | 一种基于h5的页面宽度适配的方法及装置 |
CN113407878A (zh) * | 2021-08-18 | 2021-09-17 | 深圳市明源云客电子商务有限公司 | 页面适配方法、显示终端及可读存储介质 |
CN113407878B (zh) * | 2021-08-18 | 2022-02-08 | 深圳市明源云客电子商务有限公司 | 页面适配方法、显示终端及可读存储介质 |
CN113626126A (zh) * | 2021-08-18 | 2021-11-09 | 平安普惠企业管理有限公司 | 应用程序启动页适配方法、装置、设备及介质 |
CN113918265A (zh) * | 2021-11-12 | 2022-01-11 | 合众新能源汽车有限公司 | 动态调节车内显示信息的字体大小的方法和系统 |
CN114281445A (zh) * | 2021-11-26 | 2022-04-05 | 华能酒泉风电有限责任公司 | 页面显示方法、装置、电子设备和存储介质 |
CN114416230A (zh) * | 2021-12-20 | 2022-04-29 | 青岛海尔科技有限公司 | 一种适配屏幕的组件显示方法及系统 |
CN114564130A (zh) * | 2022-02-23 | 2022-05-31 | 成都智元汇信息技术股份有限公司 | 基于公共交通的文本自适应方法、显示终端、系统及介质 |
CN116578219A (zh) * | 2023-04-28 | 2023-08-11 | 北京洞悉网络有限公司 | 适用于左右双屏的表单页面自适配展示方法、装置、计算机设备及计算机可读存储介质 |
Also Published As
Publication number | Publication date |
---|---|
CN111984351B (zh) | 2024-05-03 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN111984351B (zh) | 页面适配方法、电子设备、计算机可读存储介质 | |
WO2021068331A1 (zh) | 一种网页自适应布局方法、服务器及计算机可读存储介质 | |
CN108733336B (zh) | 页面显示方法和装置 | |
JP5967614B2 (ja) | ウェブページを表示する方法、装置およびシステム | |
CN108628656A (zh) | Ios设备上界面适配方法、装置、计算机设备及存储介质 | |
CN110083415A (zh) | 设备屏幕适配方法、终端设备、及存储介质 | |
CN106383689A (zh) | 显示字体大小调整方法、装置及终端设备 | |
CN109284464B (zh) | 页面加载方法及终端、页面响应方法及服务器 | |
US8887059B2 (en) | Method and apparatus of locally controlling display content of a remote system | |
CN108377421B (zh) | 视频的播放方法及显示设备、计算机可读存储介质 | |
CN113127784A (zh) | 大屏数据可视化显示方法、装置、存储介质和计算机设备 | |
CN112333538A (zh) | 一种分辨率调整方法、装置、显示屏控制器及信源设备 | |
EP2874054A1 (en) | Application text adjusting method, device, and terminal | |
CN109144443A (zh) | 电子设备多屏显示方法、电子设备及计算机可读存储介质 | |
CN112380475A (zh) | 用于生成页面的方法和装置 | |
CN110825294A (zh) | 显示方法、电子设备及计算机可读存储介质 | |
CN109359255B (zh) | 一种表格数据展示方法及终端设备 | |
TWI540864B (zh) | 資訊傳輸方法與無線顯示系統 | |
CN111045576A (zh) | 显示控制方法、显示控制装置、终端设备和电子设备 | |
CN107085567B (zh) | 智能终端数据布局显示的控制方法及系统 | |
CN111683254B (zh) | 一种图像压缩方法、装置及电子设备和存储介质 | |
CN107704221A (zh) | 屏幕的圆角显示方法、移动终端及存储介质 | |
CN113641440A (zh) | 前端多语言展示方法及装置 | |
CN113656020A (zh) | 一种基于ReactNative的图片展示组件开发方法及相关组件 | |
CN112261227A (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 |