CN107402757A - 页面渲染方法及装置 - Google Patents
页面渲染方法及装置 Download PDFInfo
- Publication number
- CN107402757A CN107402757A CN201710562304.0A CN201710562304A CN107402757A CN 107402757 A CN107402757 A CN 107402757A CN 201710562304 A CN201710562304 A CN 201710562304A CN 107402757 A CN107402757 A CN 107402757A
- Authority
- CN
- China
- Prior art keywords
- rendered
- screen
- page
- pixel value
- rem
- 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
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/9574—Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching
-
- 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)
- Controls And Circuits For Display Device (AREA)
Abstract
本发明实施例提供一种页面渲染方法及装置,该方法包括:根据屏幕宽度以及预设满屏rem值确定转换系数,其中,预设满屏rem值为页面满屏显示时对应的rem值。利用转换系数对待渲染元素的缩放可以使页面在不同宽度的显示设备上都能以相同的显示形式显示。再根据页面的像素值、页面中待渲染元素的第一像素值以及预设满屏rem值确定出待渲染元素对应的rem值。基于上述转换系数以及待渲染元素对应的rem值得到渲染元素在用于显示页面的屏幕中对应的第二像素值,此第二像素值是适应于显示屏幕宽度的。最后,根据此适应于显示屏幕宽度的第二像素值渲染待渲染元素,保证页面在任何尺寸的屏幕中都能以相同的显示形式显示,优化页面显示效果。
Description
技术领域
本发明涉及互联网技术领域,尤其涉及一种页面渲染方法及装置。
背景技术
随着移动终端的不断普及,人们浏览网页所使用的设备也逐步转变为移动终端。
而不同的移动终端往往会对应于不同的屏幕尺寸,在显示目标页面中的页面内容时,对于屏幕尺寸较宽的终端,会出现内容填不满显示屏的情况,对于屏幕尺寸小窄的终端,又会出现无法将所有内容显示于一屏内的情况,需要滑动页面的横向滚动条才能看到其他未显示于显示屏内的内容。从而导致页面显示效果不佳。
发明内容
有鉴于此,本发明实施例提供一种页面渲染方法及装置,针对不同尺寸的显示设备缩放页面中各页面元素,使页面中的页面元素都能够以相同的显示形式显示在在不同屏幕宽度的显示设备中。
本发明实施例提供一种页面渲染方法,包括:
根据屏幕宽度和预设满屏rem值,确定转换系数,所述满屏rem值是满屏显示时对应的rem值;
根据页面的像素值、所述页面中待渲染元素的第一像素值以及所述预设满屏rem值,确定所述待渲染元素对应的rem值;
根据所述转换系数和所述待渲染元素对应的rem值,确定所述待渲染元素对应的第二像素值;
以所述第二像素值渲染所述待渲染元素。
可选地,所述根据屏幕宽度和预设满屏rem值,确定转换系数,包括:
根据所述屏幕的像素密度比确定所述屏幕的缩放比例;
根据所述缩放比例和所述屏幕的分辨率,确定所述缩放屏幕宽度;
确定所述转换系数为:所述缩放屏幕宽度/所述预设满屏rem值,其中,所述缩放屏幕宽度=屏幕宽度/缩放比例。
可选地,所述根据页面的像素值、所述页面中待渲染元素的第一像素值以及所述预设满屏rem值,确定所述待渲染元素对应的rem值,包括:
通过如下公式确定所述待渲染元素对应的rem值:
所述页面中待渲染元素的第一像素值/所述页面的像素值=所述待渲染元素对应的rem值/所述预设满屏rem值。
可选地,所述根据页面的像素值、所述页面中待渲染元素的第一像素值以及所述预设满屏rem值之前,还包括:
识别所述待渲染元素是否为可缩放类型的待渲染元素;
若所述待渲染元素为可缩放类型的待渲染元素,则执行所述根据页面的像素值、所述页面中待渲染元素的第一像素值以及所述预设满屏rem值,确定所述待渲染元素对应的rem值的步骤。
可选地,所述方法还包括:
若所述待渲染元素为非缩放类型的待渲染元素,则以所述第一像素值渲染所述待渲染元素。
本发明实施例提供一种页面渲染装置,包括:
第一确定模块,用于根据屏幕宽度和预设满屏rem值,确定转换系数,所述满屏rem值是满屏显示时对应的rem值;
第二确定模块,根据页面的像素值、所述页面中待渲染元素的第一像素值以及所述预设满屏rem值,确定所述待渲染元素对应的rem值;
第三确定模块,根据所述转换系数和所述待渲染元素对应的rem值,确定所述待渲染元素对应的第二像素值;
渲染模块,用于以所述第二像素值渲染所述待渲染元素。
可选地,所述第一确定模块具体用于:
根据所述屏幕的像素密度比确定所述屏幕的缩放比例;
根据所述缩放比例和所述屏幕的分辨率,确定所述缩放屏幕宽度;
确定所述转换系数为:所述缩放屏幕宽度/所述预设满屏rem值,其中,所述缩放屏幕宽度=屏幕宽度/缩放比例。
可选地,所述第二确定模块具体用于:
通过如下公式确定所述待渲染元素对应的rem值:
所述页面中待渲染元素的第一像素值/所述页面的像素值=所述待渲染元素对应的rem值/所述预设满屏rem值。
可选地,所述装置还包括:
识别模块,用于识别所述待渲染元素是否为可缩放类型的页面元素;
若所述待渲染元素为可缩放类型的待渲染元素,则所述第二确定模块具体用于,根据页面的像素值、页面中元素类型为可缩放类型的待渲染元素的第一像素值以及所述预设满屏rem值,确定所述元素类型为可缩放类型的待渲染元素对应的rem值。
可选地,所述渲染模块具体用于:若所述待渲染元素为非缩放类型的待渲染元素,则以所述第一像素值渲染所述待渲染元素。
本发明实施例提供的页面渲染方法及装置,页面渲染工具先根据用于显示页面的显示设备的屏幕宽度以及预设满屏rem值确定转换系数,其中,预设满屏rem值为页面满屏显示时对应的rem值。此转换系数用于对待渲染元素进行相应缩放。通过对待渲染元素的缩放可以使页面在不同宽度的显示设备上以相同的显示形式进行显示。页面渲染工具再根据页面的像素值、页面中待渲染元素的第一像素值以及预设满屏rem值确定出待渲染元素对应的rem值。基于确定出的转换系数以及待渲染元素对应的rem值可以得到渲染元素在用于显示页面的屏幕中对应的第二像素值,此第二像素值是利用转换系数对第一像素值进行缩放后得到的,并且是适应于显示屏幕宽度的。最后,页面渲染工作根据此适应于显示屏幕宽度的第二像素值渲染待渲染元素,从而保证页面在任何尺寸的屏幕中都能以相同的显示形式显示,优化页面显示效果。
附图说明
为了更清楚地说明本发明实施例或现有技术中的技术方案,下面将对实施例或现有技术描述中所需要使用的附图作一简单地介绍,显而易见地,下面描述中的附图是本发明的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其他的附图。
图1为本发明实施例提供的页面渲染方法实施例一的流程图;
图2为本发明实施例提供的页面渲染方法实施例二的流程图;
图3为本发明实施例提供的页面渲染方法实施例三的流程图;
图4为本发明实施例提供的页面渲染方法实施例四的流程图;
图5为本发明实施例提供的页面渲染装置实施例一的结构示意图;
图6为本发明实施例提供的页面渲染装置实施例二的结构示意图。
具体实施方式
为使本发明实施例的目的、技术方案和优点更加清楚,下面将结合本发明实施例中的附图,对本发明实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例是本发明一部分实施例,而不是全部的实施例。基于本发明中的实施例,本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例,都属于本发明保护的范围。
在本发明实施例中使用的术语是仅仅出于描述特定实施例的目的,而非旨在限制本发明。在本发明实施例和所附权利要求书中所使用的单数形式的“一种”、“所述”和“该”也旨在包括多数形式,除非上下文清楚地表示其他含义,“多种”一般包含至少两种,但是不排除包含至少一种的情况。
应当理解,本文中使用的术语“和/或”仅仅是一种描述关联对象的关联关系,表示可以存在三种关系,例如,A和/或B,可以表示:单独存在A,同时存在A和B,单独存在B这三种情况。另外,本文中字符“/”,一般表示前后关联对象是一种“或”的关系。
应当理解,尽管在本发明实施例中可能采用术语第一、第二、第三等来描述XXX,但这些XXX不应限于这些术语。这些术语仅用来将XXX彼此区分开。例如,在不脱离本发明实施例范围的情况下,第一XXX也可以被称为第二XXX,类似地,第二XXX也可以被称为第一XXX。
取决于语境,如在此所使用的词语“如果”、“若”可以被解释成为“在……时”或“当……时”或“响应于确定”或“响应于检测”。类似地,取决于语境,短语“如果确定”或“如果检测(陈述的条件或事件)”可以被解释成为“当确定时”或“响应于确定”或“当检测(陈述的条件或事件)时”或“响应于检测(陈述的条件或事件)”。
还需要说明的是,术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含,从而使得包括一系列要素的商品或者系统不仅包括那些要素,而且还包括没有明确列出的其他要素,或者是还包括为这种商品或者系统所固有的要素。在没有更多限制的情况下,由语句“包括一个……”限定的要素,并不排除在包括所述要素的商品或者系统中还存在另外的相同要素。
图1为本发明实施例提供的页面渲染方法实施例一的流程图,本实施例提供的该页面渲染方法的执行主体可以为页面渲染工具,如图1所示,该方法包括如下步骤:
S101,根据屏幕宽度和预设满屏rem值,确定转换系数,满屏rem值是满屏显示时对应的rem值。
设计人员在设计一个页面时,会预先设置此页面的页面宽度并根据此预设页面宽度对页面中的各个页面元素进行布局。页面布局完成后,当某一显示设备想要显示此页面时,页面渲染工具会按照此页面布局将页面中的各页面元素渲染到此显示设备的屏幕上。由于页面中的各个页面元素都要渲染后才能显示到屏幕上,因此页面中的每个页面元素也都可以称为待渲染元素。而在实际显示时,很容易出现显示设备的屏幕宽度与预设页面宽度不符的情况,此宽度不符会导致页面在不同显示设备上出现不同的显示形式。为了使页面能够在不同宽度的屏幕上以相同的显示形式显示,则需要对页面中的各个页面元素进行相应缩放。其中,页面的宽度和屏幕的宽度都可以用像素来表示。
在这种背景下,页面渲染工具获取显示设备的屏幕宽度以及预设满屏rem值,其中,满屏rem值是将页面中的内容进行满屏显示时对应的rem值。需要说明的是,rem是与像素类似,是一个相对尺寸单位。在实际应用中,对于任何宽度的屏幕都可以对应于一个相同的预设满屏rem值,此预设满屏rem值通常设置为16rem。举例来说,当预设满屏rem值为16rem时,对于任意宽度的屏幕来说,都会被平均分成16份,其中每一份就对应1rem。由于屏幕的宽度是不同的,因此对于不同宽度的屏幕,1rem对应的像素值是不同的。
页面渲染工具可以在获取的屏幕宽度和预设满屏rem值的基础上,采用以下公式确定出转换系数:
转换系数=屏幕宽度/预设满屏rem值
此转换系数可以体现出在某个宽度的屏幕下,1rem与像素之间的对应关系:1rem=转换系数px,其中,px为像素单位。
S102,根据页面的像素值、页面中待渲染元素的第一像素值以及预设满屏rem值,确定待渲染元素对应的rem值。
页面渲染工具在获取到已经完成布局的一个页面后,即可获取该页面的像素值,再通过量取页面中各个待渲染元素的像素值,即可获取在该页面中各待渲染元素对应的第一像素值。可选地,内置于页面渲染工具中的图像处理软件可以量取页面中各待渲染元素的第一像素值。其中,页面渲染工具中的图像处理软件通常可以为photoshop。假设页面中待渲染元素对应的rem设置为X,则页面渲染工具通过页面的像素值、待渲染元素的第一像素值、预设满屏rem值以及X之间的比例关系即可确定出待渲染元素对应的rem值。
S103,根据转换系数和待渲染元素对应的rem值,确定待渲染元素对应的第二像素值。
页面渲染工具利用确定出的转换系数以及待渲染元素对应的rem值即可进一步确定出以原始显示形式将待渲染元素显示于屏幕宽度与预设页面宽度不符的显示设备上时,此待渲染元素对应的第二像素值。可选地,可以根据以下公式确定出待渲染元素的第二像素值:
第二像素值=待渲染元素的rem值*转换系数
S104,以第二像素值渲染待渲染元素。
页面渲染工具按照上述方式获得页面中各个待渲染元素对应的第二像素值后,按照此第二像素值对各个待渲染元素进行渲染,以使页面能够按照预设的页面布局格式显示于与原始页面宽度不相符的显示设备中。
本实施例中,页面渲染工具先根据用于显示页面的显示设备的屏幕宽度以及预设满屏rem值确定转换系数,其中,预设满屏rem值为页面满屏显示时对应的rem值。此转换系数用于对待渲染元素进行相应缩放。通过对待渲染元素的缩放可以使页面在不同宽度的显示设备上以相同的显示形式进行显示。页面渲染工具再根据页面的像素值、页面中待渲染元素的第一像素值以及预设满屏rem值确定出待渲染元素对应的rem值。基于确定出的转换系数以及待渲染元素对应的rem值可以得到渲染元素在用于显示页面的屏幕中对应的第二像素值,此第二像素值是利用转换系数对第一像素值进行缩放后得到的,并且是适应于显示屏幕宽度的。最后,页面渲染工作根据此适应于显示屏幕宽度的第二像素值渲染待渲染元素,从而保证页面在任何尺寸的屏幕中都能以相同的显示形式显示,优化页面显示效果。
在实施例一的基础上,虽然通过对页面中的待渲染元素进行缩放,能够保证在不同尺寸的屏幕上都能以相同的形式显示页面,但通过上述缩放过程有可能会出现页面显示的失真的情况。为了避免此情况,图2为本发明实施例提供的页面渲染方法实施例二的流程图,如图2所示,该方法可以包括如下步骤:
S201,根据屏幕的像素密度比确定屏幕的缩放比例。
S202,根据缩放比例和屏幕的分辨率,确定缩放屏幕宽度。
S203,确定转换系数为:缩放屏幕宽度/预设满屏rem值,其中,缩放屏幕宽度=屏幕宽度/缩放比例。
页面渲染工具获取显示设备屏幕自身的像素密度比。显示设备的像素密度比越大,则显示设备显示画面细节就越丰富,并且缩放比例与像素密度比之间存在倒数关系。通常情况下,像素密度比可以取1、2、3,相对地,缩放比例即为1,1/2,1/3。将待渲染元素在不同像素密度比的屏幕上以相同的清晰度显示时,每个待渲染元素对应的像素值也是不同的,举例来说,当屏幕的像素密度比为1,某个待渲染元素对应于A个像素,则当屏幕的像素密度比为2时,则此待渲染元素对应于2A个像素。
此时,在获取用于计算转换系数时所需的屏幕宽度时,为了保证页面显示的清晰度,则还需要考虑屏幕的缩放比例。基于此,转换系数为:缩放屏幕宽度/预设满屏rem值。
其中,缩放屏幕宽度=屏幕宽度/缩放比例。
S204,根据页面的像素值、页面中待渲染元素的第一像素值以及预设满屏rem值,确定待渲染元素对应的rem值。
S205,根据转换系数和待渲染元素对应的rem值,确定待渲染元素对应的第二像素值。
S206,以第二像素值渲染待渲染元素。
上述步骤S204-S206的执行过程与前述实施例一的相应步骤相似,可以参见如图1所示实施例中的相关描述,在此不赘述。
本实施例中,将页面中的各待渲染元素进行缩放能够保证页面在宽度不同的屏幕中都能以相同的显示形式显示,同时在保证显示形式相同的情况下,将显示设备屏幕的像素密度比也考虑到缩放过程中,使得页面中的待渲染元素在缩放的同时能够保证原始的显示清晰度,也即是同时保证了页面在不同宽度屏幕中显示时具有相同的显示形式以及显示清晰度,优化了显示效果。
图3为本发明实施例提供的页面渲染方法实施例三的流程图,如图3所示,该方法可以包括如下步骤:
S301,根据屏幕宽度和预设满屏rem值,确定转换系数,满屏rem值是满屏显示时对应的rem值。
上述步骤S301的执行过程与前述实施例一的相应步骤相似,可以参见如图1所示实施例中的相关描述,在此不赘述。
S302,通过如下公式确定待渲染元素对应的rem值:
页面中待渲染元素的第一像素值/页面的像素值=待渲染元素对应的rem值/预设满屏rem值。
页面渲染工具可以通过以下公式计算得到待渲染元素对应的rem值:
页面中待渲染元素的第一像素值/页面的像素值=待渲染元素对应的rem值/预设满屏rem值。
上述公式中涉及到的参数可以通过以下方式获得:预设满屏rem值是已经预先存储于页面渲染工具中的一个参数,并且在将完成页面布局的一个页面输入页面渲染工具后,页面渲染工具即可获得该页面的像素值以及该页面中每个待渲染元素对应的第一像素值。可选地,可以通过内置于页面渲染工具中的图像处理软件获取页面的像素值以及待渲染元素的第一像素值。
S303,根据转换系数和待渲染元素对应的rem值,确定待渲染元素对应的第二像素值。
S304,以第二像素值渲染待渲染元素。
上述步骤S303-S304的执行过程与前述实施例一的相应步骤相似,可以参见如图1所示实施例中的相关描述,在此不赘述。
本实施例中,根据显示该页面的显示设备的屏幕宽度将页面中的待渲染元素进行相应缩放,以使页面在不同宽度的屏幕上都能够以相应的显示形式进行显示,优化页面显示效果。
通常情况下,页面中会包含多种类型的内容,例如图片类型的内容、视频类型的内容以及文字类型的内容等等。为了提高页面浏览的舒适性,某些类型的内容并不需要将其根据屏幕的宽度进行相应缩放。基于此,图4为本发明实施例提供的页面渲染方法实施例四的流程图,如图4所示,该方法可以包括如下步骤:
S401,根据屏幕宽度和预设满屏rem值,确定转换系数,满屏rem值是满屏显示时对应的rem值。
上述步骤S401的执行过程与前述实施例一的相应步骤相似,可以参见如图1所示实施例中的相关描述,在此不赘述。
S402,识别待渲染元素是否为可缩放类型的待渲染元素,若待渲染元素是可缩放类型的待渲染元素,则执行步骤S403。
在对页面进行布局时,会根据页面中的各待渲染元素的类型为各待渲染元素设置相应的可缩放类型。将页面输入到页面渲染工具中,页面渲染工具便能够识别出每个待渲染元素对应的可缩放类型。可选地,文字类型的待渲染元素的缩放类型通常为非缩放类型,图片和视频类型的待渲染元素的缩放类型通常为可缩放类型。
当待渲染元素是可缩放类型的待渲染元素时,则对此待渲染元素进行一步缩放处理,以保证可缩放类型的待渲染元素在不同宽度的屏幕上都能够以相同的显示形式显示。而缩放处理的具体描述可以参见上述实施例中的相关描述,在此不再赘述。
当待渲染元素是非缩放类型的待渲染元素时,则以第一像素值渲染待渲染元素,此时并不对此待渲染元素进行缩放处理。
可选地,为了保证待渲染元素在不同宽度的屏幕上显示时能够有相同的清晰度,对于非缩放类型的待渲染元素,还需要结合屏幕的像素密度比,以调整后像素值渲染此待渲染元素,其中,调整后像素值=第一像素值*像素密度比。
S403,根据页面的像素值、页面中待渲染元素的第一像素值以及预设满屏rem值,确定待渲染元素对应的rem值。
S404,根据转换系数和待渲染元素对应的rem值,确定待渲染元素对应的第二像素值。
S405,以第二像素值渲染待渲染元素。
上述步骤S403-S405的执行过程与前述实施例一的相应步骤相似,可以参见如图1所示实施例中的相关描述,在此不赘述。
本实施例中,页面渲染工具获取一个页面后,通过识别页面中各待渲染元素的缩放类型,来对不同缩放类型的元素采取不同方式的处理,也即是实现了对待渲染元素的区别处理,使页面在不同屏幕宽度的显示设备中显示时都能具有合理、相同的显示形式。并且对于非缩放类型的待渲染元素,通过引入屏幕的像素密度比,使其在不缩放的情况下,保证在不同宽度屏幕中以相同的清晰度进行显示,优化了页面的显示效果。
图5为本发明实施例提供的页面渲染装置实施例一的结构示意图,如图5所示,该页面渲染装置包括:第一确定模块11、第二确定模块12、第三确定模块13、渲染模块14。
第一确定模块11,用于根据屏幕宽度和预设满屏rem值,确定转换系数,满屏rem值是满屏显示时对应的rem值。
第二确定模块12,根据页面的像素值、页面中待渲染元素的第一像素值以及预设满屏rem值,确定待渲染元素对应的rem值。
第三确定模块13,根据转换系数和待渲染元素对应的rem值,确定待渲染元素对应的第二像素值。
渲染模块14,用于以第二像素值渲染待渲染元素。
可选地,第一确定模块11具体用于:
根据所述屏幕的像素密度比确定所述屏幕的缩放比例;根据所述缩放比例和所述屏幕的分辨率,确定所述缩放屏幕宽度;确定所述转换系数为:所述缩放屏幕宽度/所述预设满屏rem值,其中,所述缩放屏幕宽度=屏幕宽度/缩放比例。
可选地,第二确定模块12具体用于:
通过如下公式确定所述待渲染元素对应的rem值:
所述页面中待渲染元素的第一像素值/所述页面的像素值=所述待渲染元素对应的rem值/所述预设满屏rem值。
图5所示装置可以执行图1~图3所示实施例的方法,本实施例未详细描述的部分,可参考对图1~图3所示实施例的相关说明。该技术方案的执行过程和技术效果参见图1~图3所示实施例中的描述,在此不再赘述。
图6为本发明实施例提供的页面渲染装置实施例二的结构示意图,如图6所示,在图5所示实施例基础上,该页面渲染装置还包括:识别模块21。
识别模块21,用于识别待渲染元素是否为可缩放类型的待渲染元素。
若待渲染元素为可缩放类型的待渲染元素,则第二确定模块12具体用于,根据页面的像素值、页面中元素类型为可缩放类型的待渲染元素的第一像素值以及预设满屏rem值,确定元素类型为可缩放类型的待渲染元素对应的rem值。
可选地,渲染模块14具体用于:若待渲染元素为非缩放类型的待渲染元素,则以第一像素值渲染待渲染元素。
图6所示装置可以执行图4所示实施例的方法,本实施例未详细描述的部分,可参考对图4所示实施例的相关说明。该技术方案的执行过程和技术效果参见图4所示实施例中的描述,在此不再赘述。
以上所描述的装置实施例仅仅是示意性的,其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的,作为单元显示的部件可以是或者也可以不是物理单元,即可以位于一个地方,或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性的劳动的情况下,即可以理解并实施。
通过以上的实施方式的描述,本领域的技术人员可以清楚地了解到各实施方式可借助加必需的通用硬件平台的方式来实现,当然也可以通过硬件。基于这样的理解,上述技术方案本质上或者说对现有技术做出贡献的部分可以以产品的形式体现出来,该计算机产品可以存储在计算机可读存储介质中,如ROM/RAM、磁碟、光盘等,包括若干指令用以使得一台计算机装置(可以是个人计算机,服务器,或者网络装置等)执行各个实施例或者实施例的某些部分所述的方法。
最后应说明的是:以上实施例仅用以说明本发明的技术方案,而非对其限制;尽管参照前述实施例对本发明进行了详细的说明,本领域的普通技术人员应当理解:其依然可以对前述各实施例所记载的技术方案进行修改,或者对其中部分技术特征进行等同替换;而这些修改或者替换,并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。
Claims (10)
1.一种页面渲染方法,其特征在于,包括:
根据屏幕宽度和预设满屏rem值,确定转换系数,所述满屏rem值是满屏显示时对应的rem值;
根据页面的像素值、所述页面中待渲染元素的第一像素值以及所述预设满屏rem值,确定所述待渲染元素对应的rem值;
根据所述转换系数和所述待渲染元素对应的rem值,确定所述待渲染元素对应的第二像素值;
以所述第二像素值渲染所述待渲染元素。
2.根据权利要求1所述的方法,其特征在于,所述根据屏幕宽度和预设满屏rem值,确定转换系数,包括:
根据所述屏幕的像素密度比确定所述屏幕的缩放比例;
根据所述缩放比例和所述屏幕的分辨率,确定所述缩放屏幕宽度;
确定所述转换系数为:所述缩放屏幕宽度/所述预设满屏rem值,其中,所述缩放屏幕宽度=屏幕宽度/缩放比例。
3.根据权利要求1所述的方法,其特征在于,所述根据页面的像素值、所述页面中待渲染元素的第一像素值以及所述预设满屏rem值,确定所述待渲染元素对应的rem值,包括:
通过如下公式确定所述待渲染元素对应的rem值:
所述页面中待渲染元素的第一像素值/所述页面的像素值=所述待渲染元素对应的rem值/所述预设满屏rem值。
4.根据权利要求1所述的方法,其特征在于,所述根据页面的像素值、所述页面中待渲染元素的第一像素值以及所述预设满屏rem值之前,还包括:
识别所述待渲染元素是否为可缩放类型的待渲染元素;
若所述待渲染元素为可缩放类型的待渲染元素,则执行所述根据页面的像素值、所述页面中待渲染元素的第一像素值以及所述预设满屏rem值,确定所述待渲染元素对应的rem值的步骤。
5.根据权利要求4所述的方法,其特征在于,所述方法还包括:
若所述待渲染元素为非缩放类型的待渲染元素,则以所述第一像素值渲染所述待渲染元素。
6.一种页面渲染装置,其特征在于,包括:
第一确定模块,用于根据屏幕宽度和预设满屏rem值,确定转换系数,所述满屏rem值是满屏显示时对应的rem值;
第二确定模块,根据页面的像素值、所述页面中待渲染元素的第一像素值以及所述预设满屏rem值,确定所述待渲染元素对应的rem值;
第三确定模块,根据所述转换系数和所述待渲染元素对应的rem值,确定所述待渲染元素对应的第二像素值;
渲染模块,用于以所述第二像素值渲染所述待渲染元素。
7.根据权利要求6所述的装置,其特征在于,所述第一确定模块具体用于:
根据所述屏幕的像素密度比确定所述屏幕的缩放比例;
根据所述缩放比例和所述屏幕的分辨率,确定所述缩放屏幕宽度;
确定所述转换系数为:所述缩放屏幕宽度/所述预设满屏rem值,其中,所述缩放屏幕宽度=屏幕宽度/缩放比例。
8.根据权利要求6所述的装置,其特征在于,所述第二确定模块具体用于:
通过如下公式确定所述待渲染元素对应的rem值:
所述页面中待渲染元素的第一像素值/所述页面的像素值=所述待渲染元素对应的rem值/所述预设满屏rem值。
9.根据权利要求6所述的装置,其特征在于,所述装置还包括:
识别模块,用于识别所述待渲染元素是否为可缩放类型的待渲染元素;
若所述待渲染元素为可缩放类型的待渲染元素,则所述第二确定模块具体用于,根据页面的像素值、页面中元素类型为可缩放类型的待渲染元素的第一像素值以及所述预设满屏rem值,确定所述元素类型为可缩放类型的待渲染元素对应的rem值。
10.根据权利要求9所述的装置,其特征在于,所述渲染模块具体用于:若所述待渲染元素为非缩放类型的待渲染元素,则以所述第一像素值渲染所述待渲染元素。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201710562304.0A CN107402757B (zh) | 2017-07-11 | 2017-07-11 | 页面渲染方法及装置 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201710562304.0A CN107402757B (zh) | 2017-07-11 | 2017-07-11 | 页面渲染方法及装置 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN107402757A true CN107402757A (zh) | 2017-11-28 |
CN107402757B CN107402757B (zh) | 2021-03-02 |
Family
ID=60404644
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN201710562304.0A Active CN107402757B (zh) | 2017-07-11 | 2017-07-11 | 页面渲染方法及装置 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN107402757B (zh) |
Cited By (5)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN108021666A (zh) * | 2017-12-04 | 2018-05-11 | 北京百度网讯科技有限公司 | 页面适配方法和装置 |
CN108647348A (zh) * | 2018-05-15 | 2018-10-12 | 平安普惠企业管理有限公司 | 文本展示方法、装置、设备及存储介质 |
CN109254813A (zh) * | 2018-08-20 | 2019-01-22 | 中国平安人寿保险股份有限公司 | 屏幕适配方法、装置、计算机设备及存储介质 |
CN110532488A (zh) * | 2018-05-23 | 2019-12-03 | 腾讯科技(深圳)有限公司 | 网页渲染方法、装置和电子设备 |
CN114780197A (zh) * | 2022-04-29 | 2022-07-22 | 北京字跳网络技术有限公司 | 分屏渲染方法、装置、设备及存储介质 |
Citations (8)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN102663126A (zh) * | 2012-04-23 | 2012-09-12 | 奇智软件(北京)有限公司 | 一种在移动终端中显示网页的方法及装置 |
CN104978433A (zh) * | 2015-07-16 | 2015-10-14 | 无锡天脉聚源传媒科技有限公司 | 一种网页显示方法及装置 |
CN105912336A (zh) * | 2016-04-11 | 2016-08-31 | 江苏中威科技软件系统有限公司 | 一种移动端前端开发多屏适配方法 |
CN106406794A (zh) * | 2016-09-14 | 2017-02-15 | 乐视控股(北京)有限公司 | 一种屏幕适配方法及其装置 |
CN106502659A (zh) * | 2016-10-14 | 2017-03-15 | 武汉斗鱼网络科技有限公司 | 一种移动设备网页单页面的布局方法及系统 |
CN106776738A (zh) * | 2016-11-18 | 2017-05-31 | 北京奇虎科技有限公司 | 一种网页生成、显示方法和装置 |
CN106776969A (zh) * | 2016-12-05 | 2017-05-31 | 乐视控股(北京)有限公司 | 页面适配方法、装置及电子设备 |
CN106844656A (zh) * | 2017-01-23 | 2017-06-13 | 北京深思数盾科技股份有限公司 | 一种页面适配方法及系统 |
-
2017
- 2017-07-11 CN CN201710562304.0A patent/CN107402757B/zh active Active
Patent Citations (8)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN102663126A (zh) * | 2012-04-23 | 2012-09-12 | 奇智软件(北京)有限公司 | 一种在移动终端中显示网页的方法及装置 |
CN104978433A (zh) * | 2015-07-16 | 2015-10-14 | 无锡天脉聚源传媒科技有限公司 | 一种网页显示方法及装置 |
CN105912336A (zh) * | 2016-04-11 | 2016-08-31 | 江苏中威科技软件系统有限公司 | 一种移动端前端开发多屏适配方法 |
CN106406794A (zh) * | 2016-09-14 | 2017-02-15 | 乐视控股(北京)有限公司 | 一种屏幕适配方法及其装置 |
CN106502659A (zh) * | 2016-10-14 | 2017-03-15 | 武汉斗鱼网络科技有限公司 | 一种移动设备网页单页面的布局方法及系统 |
CN106776738A (zh) * | 2016-11-18 | 2017-05-31 | 北京奇虎科技有限公司 | 一种网页生成、显示方法和装置 |
CN106776969A (zh) * | 2016-12-05 | 2017-05-31 | 乐视控股(北京)有限公司 | 页面适配方法、装置及电子设备 |
CN106844656A (zh) * | 2017-01-23 | 2017-06-13 | 北京深思数盾科技股份有限公司 | 一种页面适配方法及系统 |
Cited By (6)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN108021666A (zh) * | 2017-12-04 | 2018-05-11 | 北京百度网讯科技有限公司 | 页面适配方法和装置 |
CN108647348A (zh) * | 2018-05-15 | 2018-10-12 | 平安普惠企业管理有限公司 | 文本展示方法、装置、设备及存储介质 |
CN110532488A (zh) * | 2018-05-23 | 2019-12-03 | 腾讯科技(深圳)有限公司 | 网页渲染方法、装置和电子设备 |
CN109254813A (zh) * | 2018-08-20 | 2019-01-22 | 中国平安人寿保险股份有限公司 | 屏幕适配方法、装置、计算机设备及存储介质 |
CN114780197A (zh) * | 2022-04-29 | 2022-07-22 | 北京字跳网络技术有限公司 | 分屏渲染方法、装置、设备及存储介质 |
CN114780197B (zh) * | 2022-04-29 | 2023-12-22 | 北京字跳网络技术有限公司 | 分屏渲染方法、装置、设备及存储介质 |
Also Published As
Publication number | Publication date |
---|---|
CN107402757B (zh) | 2021-03-02 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN107402757A (zh) | 页面渲染方法及装置 | |
US8339420B2 (en) | Method and apparatus for producing size-appropriate images to be displayed by an electronic device with a small display area | |
CN103631958B (zh) | 一种页面自动适配实现内容多屏展示的方法 | |
JP2011123897A (ja) | 通信端末機におけるブックマークサービス提供方法及び装置 | |
US11194536B2 (en) | Image processing method and apparatus for displaying an image between two display screens | |
CN106502659B (zh) | 一种移动设备网页单页面的布局方法及系统 | |
CN107256259B (zh) | 页面显示方法、装置、电子设备以及存储介质 | |
CN101241416A (zh) | 一种适应屏幕分辨率的电子读物处理方法及系统 | |
CN103678497A (zh) | 提供调整检索页浏览显示的方法和系统 | |
CN105225201A (zh) | 一种显示对象自适应分辨率显示的方法及系统 | |
CN110595603A (zh) | 基于视频进行振动分析方法及相关产品 | |
CN111986601B (zh) | 屏幕显示方法、装置、终端设备和存储介质 | |
US20140376774A1 (en) | Electronic equipment with image analysis function and related method | |
EP3012825A2 (en) | Image conversion unit and display device having the same | |
CN113392246A (zh) | 一种图纸显示方法、装置、存储介质和电子设备 | |
CN105389308A (zh) | 网页的显示处理方法及装置 | |
CN112702561B (zh) | 一种视频画面的移动方法、装置及电子设备 | |
CN111612838A (zh) | 一种图像获取方法、装置及电子设备 | |
CN105631008A (zh) | 网页的显示方法和系统 | |
CN111815628B (zh) | 显示面板缺陷检测方法、装置、设备及可读存储介质 | |
CN110874814A (zh) | 一种图像处理方法、图像处理装置及终端设备 | |
CN105894457A (zh) | 一种去除图像噪声的方法及装置 | |
CN110825993B (zh) | 图片的显示方法、装置和电子设备 | |
TWI486947B (zh) | 圖層擷取方法、資料擷取裝置與圖層擷取安排方法 | |
CN102663677B (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 | ||
TR01 | Transfer of patent right | ||
TR01 | Transfer of patent right |
Effective date of registration: 20210312 Address after: 101300 309, 3rd floor, 60 Fuqian 1st Street, Tianzhu District, Shunyi District, Beijing Patentee after: Beijing longzhixin Technology Co.,Ltd. Address before: 100041 room 120, 4th floor, building 17, yard 30, Shixing street, Shijingshan District, Beijing Patentee before: BEIJING PANDA MUTUAL ENTERTAINMENT TECHNOLOGY Co.,Ltd. |