CN106776738A - 一种网页生成、显示方法和装置 - Google Patents
一种网页生成、显示方法和装置 Download PDFInfo
- Publication number
- CN106776738A CN106776738A CN201611027374.8A CN201611027374A CN106776738A CN 106776738 A CN106776738 A CN 106776738A CN 201611027374 A CN201611027374 A CN 201611027374A CN 106776738 A CN106776738 A CN 106776738A
- Authority
- CN
- China
- Prior art keywords
- webpage
- web page
- mobile
- size
- unit
- 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
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
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Information Transfer Between Computers (AREA)
Abstract
本发明实施例提供了一种网页生成、显示方法和装置,该网页显示方法,包括:获取移动网页的网页数据,其中,所述网页数据中网页元素按照预设单位设置;根据当前移动终端对应根元素的字体大小和预设单位,对所述移动网页进行等比例调整;显示等比例调整后的移动网页。基于本发明实施例,不同尺寸的移动设备无需单独开发网页,节省开发时间且能够提高用户体验。
Description
技术领域
本发明涉及网页技术领域,特别是涉及一种网页显示方法、一种网页生成方法、一种网页显示装置和一种网页生成装置。
背景技术
随着移动设备的普及,移动网页的开发越来越多。但是,目前市场上移动终端的品牌、型号非常多,不同移动终端的屏幕尺寸、设备像素均有较大差别,不同屏幕尺寸、像素对网页的需求也不同,因此在网页开发过程中需要将网页与设备进行适配。
目前在移动网页与设备的适配方式主要是使用百分比来开发移动网页,该百分比的方式具备宽度适配能力,即网页根据屏幕宽度调整布局,例如在适配过程中网页内容的宽度超出屏幕宽度时,可以调整到下一行显示,因此该适配方式不能使用具有绝对宽度的元素。
但是,使用百分比的方式开发网页在后期的维护过程比较繁琐,每次移动网页的修改都需要手动计算比例并修改,影响网页的维护效率。
发明内容
鉴于上述问题,提出了本发明以便提供一种克服上述问题或者至少部分地解决上述问题的网页生成、显示方法和相应的网页生成、显示装置。
依据本发明的一个方面,提供了一种网页显示方法,包括:
获取移动网页的网页数据,其中,所述网页数据中网页元素按照预设单位设置;
根据当前移动终端对应根元素的字体大小和预设单位,对所述移动网页进行等比例调整;
显示等比例调整后的移动网页。
可选地,还包括:
计算当前移动终端对应根元素的字体大小。
可选地,所述计算当前移动终端对应根元素的字体大小包括:
获取当前移动终端的屏幕尺寸信息,以及所述移动网页的设计稿宽度;
依据所述屏幕尺寸信息和设计稿宽度计算所述移动网页中根元素的字体大小。
可选地,所述根据当前移动终端对应根元素的字体大小和预设单位,对所述移动网页进行等比例调整包括:
确定所述移动网页中各网页元素的元素尺寸;
按照所述根元素的字体大小和预设单位,对各网页元素的元素尺寸进行等比例缩放。
可选地,所述元素尺寸的单位为预设单位;
所述按照根元素的字体大小和预设单位,所述对各网页元素的元素尺寸进行等比例缩放包括:
确定所述根元素的字体大小和预设单位的比例;
依据所述比例对各网页元素的元素尺寸进行等比例缩放。
可选地,所述显示等比例调整后的移动网页之前,还包括:
根据当前移动终端的分辨率设置所述移动网页的网页显示区域。
根据本发明的另一方面,提供了一种网页生成方法,包括:
在移动网页开发过程中,按照所述预设单位设置移动网页中各网页元素,以供展示时根据当前移动终端对应根元素的字体大小和预设单位,对所述移动网页进行等比例调整;
依据所述网页元素生成移动网页的网页数据。
可选地,所述按照所述预设单位设置移动网页中各网页元素包括:
确定所述移动网页中各网页元素的尺寸信息;
按照预设单位对各网页元素的尺寸信息进行更新。
可选地,所述确定所述移动网页中各网页元素的尺寸信息包括:
采用层叠样式表处理器获取所述移动网页对应的层叠样式表;
从所述层叠样式表中获取各网页元素的尺寸信息。
可选地,所述按照预设单位对各网页元素的尺寸信息进行更新包括:
将所述尺寸信息中原始单位转换成预设单位;
按照预设单位更新所述层叠样式表中获取各网页元素的尺寸信息。
可选地,所述预设单位的大小依据根元素的字体大小确定。
可选地,所述层叠样式表处理器包括:层叠样式表预处理器或层叠样式表后处理器。
本发明还提供了一种网页显示装置,包括:
获取模块,用于获取移动网页的网页数据,其中,所述网页数据中网页元素按照预设单位设置;
调整模块,用于根据当前移动终端对应根元素的字体大小和预设单位,对所述移动网页进行等比例调整;
显示模块,用于显示等比例调整后的移动网页。
可选地,还包括:
根元素确定模块,用于计算当前移动终端对应根元素的字体大小。
可选地,所述根元素确定模块,用于获取当前移动终端的屏幕尺寸信息,以及所述移动网页的设计稿宽度;依据所述屏幕尺寸信息和设计稿宽度计算所述移动网页中根元素的字体大小。
可选地,所述调整模块,包括:
尺寸确定子模块,用于确定所述移动网页中各网页元素的元素尺寸;
尺寸调整子模块,用于按照所述根元素的字体大小和预设单位,对各网页元素的元素尺寸进行等比例缩放。
可选地,所述元素尺寸的单位为预设单位;
所述尺寸调整子模块,用于确定所述根元素的字体大小和预设单位的比例;依据所述比例对各网页元素的元素尺寸进行等比例缩放。
可选地,还包括:
区域确定模块,用于根据当前移动终端的分辨率设置所述移动网页的网页显示区域。
本发明还提供了一种网页生成装置,包括:
元素设置模块,用于在移动网页开发过程中,按照所述预设单位设置移动网页中各网页元素,以供展示时根据当前移动终端对应根元素的字体大小和预设单位,对所述移动网页进行等比例调整;
网页生成模块,用于依据所述网页元素生成移动网页的网页数据。
可选地,所述元素设置模块,包括:
尺寸确定模块,用于确定所述移动网页中各网页元素的尺寸信息;
单位更新模块,用于按照预设单位对各网页元素的尺寸信息进行更新。
可选地,所述尺寸确定模块,用于采用层叠样式表处理器获取所述移动网页对应的层叠样式表;从所述层叠样式表中获取各网页元素的尺寸信息。
可选地,所述单位更新模块,用于将所述尺寸信息中原始单位转换成预设单位;按照预设单位更新所述层叠样式表中获取各网页元素的尺寸信息。
可选地,所述预设单位的大小依据根元素的字体大小确定。
可选地,所述层叠样式表处理器包括:层叠样式表预处理器或层叠样式表后处理器。
根据本发明实施例,可以在开发移动网页时按照预设单位设置元素,从而采用该网页元素生成的网页数据,能够在解析时根据当前移动终端对应根元素的字体大小和预设单位进行等比例调整,使得在不同移动设备上显示的等比例调整后的移动网页都是相同的布局,不同尺寸的移动设备无需单独开发网页,节省开发时间且能够提高用户体验。
上述说明仅是本发明技术方案的概述,为了能够更清楚了解本发明的技术手段,而可依照说明书的内容予以实施,并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂,以下特举本发明的具体实施方式。
附图说明
通过阅读下文优选实施方式的详细描述,各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的,而并不认为是对本发明的限制。而且在整个附图中,用相同的参考符号表示相同的部件。在附图中:
图1示出了根据本发明一个实施例的一种网页显示方法的步骤流程示意图;
图2示出了根据本发明一个实施例的一种网页生成方法的步骤流程示意图;
图3示出了根据本发明另一个实施例的一种网页生成方法的步骤流程示意图;
图4示出了根据本发明另一个实施例的一种网页显示方法的步骤流程示意图;
图5示出了根据本发明一个实施例的一种网页显示装置的结构框图;
图6示出了根据本发明另一个实施例的一种网页显示装置的结构框图;
图7示出了根据本发明一个实施例的一种网页生成装置的结构框图;以及
图8示出了根据本发明另一个实施例的一种网页生成装置的结构框图。
具体实施方式
下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例,然而应当理解,可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反,提供这些实施例是为了能够更透彻地理解本公开,并且能够将本公开的范围完整的传达给本领域的技术人员。
目前市面上的移动终端拥有各种尺寸,有时不同厂商标示的屏幕尺寸相同,但是该屏幕实际尺寸确不同。为了让移动网页能够在不同尺寸的移动终端中正常显示,本发明实施例提供了一种网页生成、显示方法,可以在各种尺寸的移动设备上显示布局相同的网页。
其中,移动设备上网页显示的步骤如下:
参照图1,示出了根据本发明一个实施例的一种网页显示方法的步骤流程示意图,具体可以包括如下步骤:
步骤101,获取移动网页的网页数据,其中,所述网页数据中网页元素按照预设单位设置。
步骤102,根据当前移动终端对应根元素的字体大小和预设单位,对所述移动网页进行等比例调整。
步骤103,显示等比例调整后的移动网页。
用户在使用移动终端时,可以采用浏览网页数据,本实施例中将移动终端浏览的网页称为移动网页。因此可以采用浏览器等APP发送网页请求,获取网页服务器反馈的移动网页的网页数据。
本实施例可以将网页中的网页元素按照预设单位设置,其中预设单位是相对大小的单位,即该预设单位的大小的非固定的,要依据对应单位参数确定。一个示例中该预设单位为rem,rem的定义为“font size of the root element”即根元素的字体大小,即rem的大小是依据根元素的字体大小确定的,而根元素的大小依据移动终端的实际尺寸确定,其中,网页中的根元素指的是html,通过设置html的字体大小就可以控制rem的大小。
因此对于该网页数据,可以先确定当前移动终端的根元素的字体大小,然后依据根元素的字体大小和预设单位,对移动网页中每个元素进行等比例调整,依据等比例调整后的元素确定移动网页,显示等比例调整后的移动网页,使得网页中各元素在各种尺寸的设备上都显示相同的布局,而不会出现由于一行无法显示所有内容而导致该内容下移的问题。
移动设备对应网页的生成步骤如下:
参照图2,示出了根据本发明一个实施例的一种网页生成方法的步骤流程示意图,具体可以包括如下步骤:
步骤201,在移动网页开发过程中,按照所述预设单位设置移动网页中各网页元素,以供展示时根据当前移动终端对应根元素的字体大小和预设单位,对所述移动网页进行等比例调整。
步骤202,依据所述网页元素生成移动网页的网页数据。
本实施例中,在移动网页开发过程中,在设置移动网页中各网页元素时,可以按照预设单位设置各网页元素的尺寸,该预设单位的是相对大小的单位,一种示例中预设单位如rem,因此预设单位的大小依据根元素的字体大小确定。从而在移动设备解析网页以展示时,可以根据该移动终端对应根元素的字体大小和预设单位,对所述移动网页进行等比例调整。在配置完各网页元素后,可以采用网页元素生成移动网页的网页数据,从而得到能够在各种移动设备中都显示相同布局的网页。
综上,可以在开发移动网页时按照预设单位设置元素,从而采用该网页元素生成的网页数据,能够在解析时根据当前移动终端对应根元素的字体大小和预设单位进行等比例调整,使得在不同移动设备上显示的等比例调整后的移动网页都是相同的布局,不同尺寸的移动设备无需单独开发网页,节省开发时间且能够提高用户体验。
在上述实施例的基础上,本实施例详细论述移动网页的开发和显示步骤。
其中网页生成可以采用如下步骤:
参照图3,示出了根据本发明另一个实施例的一种网页生成方法的步骤流程示意图,具体可以包括如下步骤:
步骤301,在移动网页开发过程中,确定所述移动网页中各网页元素的尺寸信息。
本实施例在开发移动网页时,可以先确定移动网页中各网页元素的尺寸信息,其中可以直接设置各网页元素的尺寸信息,也可以从已开发数据中获取网页元素的尺寸信息,从而不影响网页的正常开发。
其中,所述获取所述移动网页中各网页元素的尺寸信息包括如下子步骤:
S1、采用层叠样式表(Cascading Style Sheets,CSS)处理器获取所述移动网页对应的CSS;
S2、从所述CSS中获取各网页元素的尺寸信息。
CSS处理器用一种专门的编程语言,进行Web页面样式设计,然后再编译成正常的CSS文件,以供项目使用,即CSS处理器为CSS增加一些编程的特性,无需考虑浏览器的兼容性问题。本实施例中所述CSS处理器包括:CSS预处理器或CSS后处理器,两者均可以解析源码得到CSS。可以采用CSS处理器进行解析编译的源码,然后生成该移动网页对应的CSS,从所述CSS中获取各网页元素的尺寸信息。
步骤302,按照预设单位对各网页元素的尺寸信息进行更新。
本实施例中,通常在配置各网页元素的尺寸信息时采用的是其他单位,将其称为原始单位,如原始单位为px(像素)单位,px是一个绝对单位,使用该单位可能会导致网页布局的变化或者其他显示问题。
所述按照预设单位对各网页元素的尺寸信息进行更新包括如下子步骤:
S3、将所述尺寸信息中原始单位转换成预设单位;
S4、按照预设单位更新所述层叠样式表中获取各网页元素的尺寸信息。
本实施例中,可以采用CSS处理器将将所述尺寸信息中原始单位转换成预设单位,具体转换方法依据网页尺寸(如长、款等)、原始单位和预设单位确定,本实施例对此不作限定。
例如原始单位为px,预设单位为rem,使用CSS预处理器或后处理器将CSS中的“px”单位自动转化为“rem”,转化公式的一种示例:rem值=px值*320/设计稿宽度/20。其中320为笃定页面宽度,20为页面宽度份数,该二值可更换为其他数值。
步骤303,依据所述网页元素生成移动网页的网页数据。
得到以预设单位规定尺寸信息的网页元素后,可以采用网页元素生成移动网页的网页数据,从而该网页数据可以在不同设备中依据屏幕尺寸进行等比例缩放,以显示相同布局的网页。
其中网页显示可以采用如下步骤:
参照图4,示出了根据本发明另一个实施例的一种网页显示方法的步骤流程示意图,具体可以包括如下步骤:
步骤401,获取移动网页的网页数据。
步骤402,计算当前移动终端对应根元素的字体大小。
用户在使用移动终端时,可以采用浏览网页数据,本实施例中将移动终端浏览的网页称为移动网页。因此可以采用浏览器等APP发送网页请求,获取网页服务器反馈的移动网页的网页数据。可以动态计算当前移动终端对应根元素的字体大小,如计算html中的font-size的大小,以便于根据根元素的字体大小调整网页数据。
其中,所述计算当前移动终端对应根元素的字体大小包括如下子步骤:
S5、获取当前移动终端的屏幕尺寸信息,以及所述移动网页的设计稿宽度。
S6、依据所述屏幕尺寸信息和设计稿宽度计算所述移动网页中根元素的字体大小。
获取当前移动终端的屏幕尺寸信息,并且获取该移动网页的设计稿宽度,然后采用该屏幕尺寸信息和设计稿宽度计算移动网页中根元素的字体大小,即html中的font-size的大小,从而可以依据移动设备的尺寸动态调整根元素的字体大小,使得网页数据中各网页元素也能动态调整。
步骤403,确定所述移动网页中各网页元素的元素尺寸。
步骤404,按照所述根元素的字体大小和预设单位,对各网页元素的元素尺寸进行等比例缩放。
然后从移动数据中获取各网页元素的元素尺寸,根据动态计算的根字体大小确定预设单位对应的大小,然后按照该大小对各网页元素的元素尺寸进行等比例缩放的调整。
本实施例中,所述元素尺寸的单位为预设单位;所述按照根元素的字体大小和预设单位,所述对各网页元素的元素尺寸进行等比例缩放包括:
S7、确定所述根元素的字体大小和预设单位的比例;
S8、依据所述比例对各网页元素的元素尺寸进行等比例缩放。
预设单位采用的是相对单位,该相对单位的大小可以依据绝对单位确定,因此可以采用动态计算的所述根元素的字体大小,调整预设单位的比例,例如在设备A中预设单位的1rem=10px,而在设备B中预设单位的1rem=5px,从而通过移动终端的尺寸动态计算出根元素的字体大小后,可以动态调整预设单位的比例。再依据所述比例对各网页元素的元素尺寸进行等比例缩放,即在设备A中按照1rem=10px的比例确定网页元素的尺寸,而在设备B中按照1rem=5px的比例确定网页元素的尺寸。
步骤405,根据当前移动终端的分辨率设置所述移动网页的网页显示区域。
步骤406,显示等比例调整后的移动网页。
本实施例中,可以根据当前设备像素密度比自动设置页面中“viewport”的“scale”值,如通过meta标签使当前viewport的宽度等于设备的宽度,其中,viewport指的是移动设备屏幕上显示网页的区域。然后在该显示区域内显示等比例调整后的移动网页。
综上,本实施开可以方便的进行移动页面开发,通过根元素的字体大小设置网页元素尺寸的预设单位为相对单位,从而可以依据设备的实际尺寸等比例调整网页元素,能够大大降低移动页面布局成本,节省大量开发时间,无需再为不同设备做兼容。
对于方法实施例,为了简单描述,故将其都表述为一系列的动作组合,但是本领域技术人员应该知悉,本发明实施例并不受所描述的动作顺序的限制,因为依据本发明实施例,某些步骤可以采用其他顺序或者同时进行。其次,本领域技术人员也应该知悉,说明书中所描述的实施例均属于优选实施例,所涉及的动作并不一定是本发明实施例所必须的。
在上述实施例的基础上,本实施例提供了网页显示装置,应用于移动终端侧。
参照图5,示出了根据本发明一个实施例的一种网页显示装置的结构框图,具体可以包括如下模块:
获取模块501,用于获取移动网页的网页数据,其中,所述网页数据中网页元素按照预设单位设置。
调整模块502,用于根据当前移动终端对应根元素的字体大小和预设单位,对所述移动网页进行等比例调整.
显示模块503,用于显示等比例调整后的移动网页。
综上,可以在开发移动网页时按照预设单位设置元素,从而采用该网页元素生成的网页数据,能够在解析时根据当前移动终端对应根元素的字体大小和预设单位进行等比例调整,使得在不同移动设备上显示的等比例调整后的移动网页都是相同的布局,不同尺寸的移动设备无需单独开发网页,节省开发时间且能够提高用户体验。
参照图6,示出了根据本发明另一个实施例的一种网页显示装置的结构框图,具体可以包括如下模块:
获取模块501,用于获取移动网页的网页数据,其中,所述网页数据中网页元素按照预设单位设置。
根元素确定模块504,用于计算当前移动终端对应根元素的字体大小。
调整模块502,用于根据当前移动终端对应根元素的字体大小和预设单位,对所述移动网页进行等比例调整.
区域确定模块505,用于根据当前移动终端的分辨率设置所述移动网页的网页显示区域。
显示模块503,用于显示等比例调整后的移动网页。
其中,所述根元素确定模块504,用于获取当前移动终端的屏幕尺寸信息,以及所述移动网页的设计稿宽度;依据所述屏幕尺寸信息和设计稿宽度计算所述移动网页中根元素的字体大小。
其中,所述调整模块502,包括:
尺寸确定子模块5021,用于确定所述移动网页中各网页元素的元素尺寸;
尺寸调整子模块5022,用于按照所述根元素的字体大小和预设单位,对各网页元素的元素尺寸进行等比例缩放。
一个可选实施例中,所述元素尺寸的单位为预设单位;所述尺寸调整子模块5022,用于确定所述根元素的字体大小和预设单位的比例;依据所述比例对各网页元素的元素尺寸进行等比例缩放。
综上,本实施开可以方便的进行移动页面开发,通过根元素的字体大小设置网页元素尺寸的预设单位为相对单位,从而可以依据设备的实际尺寸等比例调整网页元素,能够大大降低移动页面布局成本,节省大量开发时间,无需再为不同设备做兼容。
在上述实施例的基础上,本实施例还提供了一种网页生成装置,应用于网络侧。
参照图7,示出了根据本发明一个实施例的一种网页生成装置的结构框图,具体可以包括如下模块:
元素设置模块701,用于在移动网页开发过程中,按照所述预设单位设置移动网页中各网页元素,以供展示时根据当前移动终端对应根元素的字体大小和预设单位,对所述移动网页进行等比例调整;
网页生成模块702,用于依据所述网页元素生成移动网页的网页数据。
综上,可以在开发移动网页时按照预设单位设置元素,从而采用该网页元素生成的网页数据,能够在解析时根据当前移动终端对应根元素的字体大小和预设单位进行等比例调整,使得在不同移动设备上显示的等比例调整后的移动网页都是相同的布局,不同尺寸的移动设备无需单独开发网页,节省开发时间且能够提高用户体验。
参照图8,示出了根据本发明另一个实施例的一种网页生成装置的结构框图,具体可以包括如下模块:
其中,所述元素设置模块701,包括:
尺寸确定模块7011,用于确定所述移动网页中各网页元素的尺寸信息;
单位更新模块7012,用于按照预设单位对各网页元素的尺寸信息进行更新。
一个可选实施例中,所述尺寸确定模块7011,用于采用层叠样式表处理器获取所述移动网页对应的层叠样式表;从所述层叠样式表中获取各网页元素的尺寸信息。
另一个可选实施例中,所述单位更新模块7012,用于将所述尺寸信息中原始单位转换成预设单位;按照预设单位更新所述层叠样式表中获取各网页元素的尺寸信息。
其中,所述预设单位的大小依据根元素的字体大小确定。所述层叠样式表处理器包括:层叠样式表预处理器或层叠样式表后处理器。
综上,本实施开可以方便的进行移动页面开发,通过根元素的字体大小设置网页元素尺寸的预设单位为相对单位,从而可以依据设备的实际尺寸等比例调整网页元素,能够大大降低移动页面布局成本,节省大量开发时间,无需再为不同设备做兼容。
对于装置实施例而言,由于其与方法实施例基本相似,所以描述的比较简单,相关之处参见方法实施例的部分说明即可。
在此提供的算法和显示不与任何特定计算机、虚拟系统或者其它设备固有相关。各种通用系统也可以与基于在此的示教一起使用。根据上面的描述,构造这类系统所要求的结构是显而易见的。此外,本发明也不针对任何特定编程语言。应当明白,可以利用各种编程语言实现在此描述的本发明的内容,并且上面对特定语言所做的描述是为了披露本发明的最佳实施方式。
在此处所提供的说明书中,说明了大量具体细节。然而,能够理解,本发明的实施例可以在没有这些具体细节的情况下实践。在一些实例中,并未详细示出公知的方法、结构和技术,以便不模糊对本说明书的理解。
类似地,应当理解,为了精简本公开并帮助理解各个发明方面中的一个或多个,在上面对本发明的示例性实施例的描述中,本发明的各个特征有时被一起分组到单个实施例、图、或者对其的描述中。然而,并不应将该公开的方法解释成反映如下意图:即所要求保护的本发明要求比在每个权利要求中所明确记载的特征更多的特征。更确切地说,如下面的权利要求书所反映的那样,发明方面在于少于前面公开的单个实施例的所有特征。因此,遵循具体实施方式的权利要求书由此明确地并入该具体实施方式,其中每个权利要求本身都作为本发明的单独实施例。
本领域那些技术人员可以理解,可以对实施例中的设备中的模块进行自适应性地改变并且把它们设置在与该实施例不同的一个或多个设备中。可以把实施例中的模块或单元或组件组合成一个模块或单元或组件,以及此外可以把它们分成多个子模块或子单元或子组件。除了这样的特征和/或过程或者单元中的至少一些是相互排斥之外,可以采用任何组合对本说明书(包括伴随的权利要求、摘要和附图)中公开的所有特征以及如此公开的任何方法或者设备的所有过程或单元进行组合。除非另外明确陈述,本说明书(包括伴随的权利要求、摘要和附图)中公开的每个特征可以由提供相同、等同或相似目的的替代特征来代替。
此外,本领域的技术人员能够理解,尽管在此所述的一些实施例包括其它实施例中所包括的某些特征而不是其它特征,但是不同实施例的特征的组合意味着处于本发明的范围之内并且形成不同的实施例。例如,在下面的权利要求书中,所要求保护的实施例的任意之一都可以以任意的组合方式来使用。
本发明的各个部件实施例可以以硬件实现,或者以在一个或者多个处理器上运行的软件模块实现,或者以它们的组合实现。本领域的技术人员应当理解,可以在实践中使用微处理器或者数字信号处理器(DSP)来实现根据本发明实施例的网页生成、显示方法和装置设备中的一些或者全部部件的一些或者全部功能。本发明还可以实现为用于执行这里所描述的方法的一部分或者全部的设备或者装置程序(例如,计算机程序和计算机程序产品)。这样的实现本发明的程序可以存储在计算机可读介质上,或者可以具有一个或者多个信号的形式。这样的信号可以从因特网网站上下载得到,或者在载体信号上提供,或者以任何其他形式提供。
应该注意的是上述实施例对本发明进行说明而不是对本发明进行限制,并且本领域技术人员在不脱离所附权利要求的范围的情况下可设计出替换实施例。在权利要求中,不应将位于括号之间的任何参考符号构造成对权利要求的限制。单词“包含”不排除存在未列在权利要求中的元件或步骤。位于元件之前的单词“一”或“一个”不排除存在多个这样的元件。本发明可以借助于包括有若干不同元件的硬件以及借助于适当编程的计算机来实现。在列举了若干装置的单元权利要求中,这些装置中的若干个可以是通过同一个硬件项来具体体现。单词第一、第二、以及第三等的使用不表示任何顺序。可将这些单词解释为名称。
本发明实施例公开了A1、一种网页显示方法,包括:
获取移动网页的网页数据,其中,所述网页数据中网页元素按照预设单位设置;
根据当前移动终端对应根元素的字体大小和预设单位,对所述移动网页进行等比例调整;
显示等比例调整后的移动网页。
A2、如A1所述的可选地,还包括:
计算当前移动终端对应根元素的字体大小。
A3、如A2所述的可选地,所述计算当前移动终端对应根元素的字体大小包括:
获取当前移动终端的屏幕尺寸信息,以及所述移动网页的设计稿宽度;
依据所述屏幕尺寸信息和设计稿宽度计算所述移动网页中根元素的字体大小。
A4、如A1所述的可选地,所述根据当前移动终端对应根元素的字体大小和预设单位,对所述移动网页进行等比例调整包括:
确定所述移动网页中各网页元素的元素尺寸;
按照所述根元素的字体大小和预设单位,对各网页元素的元素尺寸进行等比例缩放。
A5、如A4所述的可选地,所述元素尺寸的单位为预设单位;
所述按照根元素的字体大小和预设单位,所述对各网页元素的元素尺寸进行等比例缩放包括:
确定所述根元素的字体大小和预设单位的比例;
依据所述比例对各网页元素的元素尺寸进行等比例缩放。
A6、如A1所述的可选地,所述显示等比例调整后的移动网页之前,还包括:
根据当前移动终端的分辨率设置所述移动网页的网页显示区域。
本发明实施例还公开了B7、一种网页生成方法,包括:
在移动网页开发过程中,按照所述预设单位设置移动网页中各网页元素,以供展示时根据当前移动终端对应根元素的字体大小和预设单位,对所述移动网页进行等比例调整;
依据所述网页元素生成移动网页的网页数据。
B8、如B7所述的可选地,所述按照所述预设单位设置移动网页中各网页元素包括:
确定所述移动网页中各网页元素的尺寸信息;
按照预设单位对各网页元素的尺寸信息进行更新。
B9、如B8所述的可选地,所述确定所述移动网页中各网页元素的尺寸信息包括:
采用层叠样式表处理器获取所述移动网页对应的层叠样式表;
从所述层叠样式表中获取各网页元素的尺寸信息。
B10、如B9所述的可选地,所述按照预设单位对各网页元素的尺寸信息进行更新包括:
将所述尺寸信息中原始单位转换成预设单位;
按照预设单位更新所述层叠样式表中获取各网页元素的尺寸信息。
B11、如B7至B10任一所述的可选地,所述预设单位的大小依据根元素的字体大小确定。
B12、如B8所述的可选地,所述层叠样式表处理器包括:层叠样式表预处理器或层叠样式表后处理器。
本发明实施例还公开了C13、一种网页显示装置,包括:
获取模块,用于获取移动网页的网页数据,其中,所述网页数据中网页元素按照预设单位设置;
调整模块,用于根据当前移动终端对应根元素的字体大小和预设单位,对所述移动网页进行等比例调整;
显示模块,用于显示等比例调整后的移动网页。
C14、如C13所述的装置,其中,还包括:
根元素确定模块,用于计算当前移动终端对应根元素的字体大小。
C15、如C14所述的装置,其中,
所述根元素确定模块,用于获取当前移动终端的屏幕尺寸信息,以及所述移动网页的设计稿宽度;依据所述屏幕尺寸信息和设计稿宽度计算所述移动网页中根元素的字体大小。
C16、如C13所述的装置,其中,所述调整模块,包括:
尺寸确定子模块,用于确定所述移动网页中各网页元素的元素尺寸;
尺寸调整子模块,用于按照所述根元素的字体大小和预设单位,对各网页元素的元素尺寸进行等比例缩放。
C17、如C16所述的装置,其中,所述元素尺寸的单位为预设单位;
所述尺寸调整子模块,用于确定所述根元素的字体大小和预设单位的比例;依据所述比例对各网页元素的元素尺寸进行等比例缩放。
C18、如C13所述的装置,其中,还包括:
区域确定模块,用于根据当前移动终端的分辨率设置所述移动网页的网页显示区域。
本发明实施例还公开了D19、一种网页生成装置,包括:
元素设置模块,用于在移动网页开发过程中,按照所述预设单位设置移动网页中各网页元素,以供展示时根据当前移动终端对应根元素的字体大小和预设单位,对所述移动网页进行等比例调整;
网页生成模块,用于依据所述网页元素生成移动网页的网页数据。
D20、如D19所述的装置,其中,所述元素设置模块,包括:
尺寸确定模块,用于确定所述移动网页中各网页元素的尺寸信息;
单位更新模块,用于按照预设单位对各网页元素的尺寸信息进行更新。
D21、如D20所述的装置,其中,
所述尺寸确定模块,用于采用层叠样式表处理器获取所述移动网页对应的层叠样式表;从所述层叠样式表中获取各网页元素的尺寸信息。
D22、如D20所述的装置,其中,
所述单位更新模块,用于将所述尺寸信息中原始单位转换成预设单位;按照预设单位更新所述层叠样式表中获取各网页元素的尺寸信息。
D23、如D19至D22任一所述的装置,其中,所述预设单位的大小依据根元素的字体大小确定。
D24、如D19所述的装置,其中,所述层叠样式表处理器包括:层叠样式表预处理器或层叠样式表后处理器。
Claims (10)
1.一种网页显示方法,包括:
获取移动网页的网页数据,其中,所述网页数据中网页元素按照预设单位设置;
根据当前移动终端对应根元素的字体大小和预设单位,对所述移动网页进行等比例调整;
显示等比例调整后的移动网页。
2.如权利要求1所述的方法,其中,还包括:
计算当前移动终端对应根元素的字体大小。
3.如权利要求2所述的方法,其中,所述计算当前移动终端对应根元素的字体大小包括:
获取当前移动终端的屏幕尺寸信息,以及所述移动网页的设计稿宽度;
依据所述屏幕尺寸信息和设计稿宽度计算所述移动网页中根元素的字体大小。
4.如权利要求1所述的方法,其中,所述根据当前移动终端对应根元素的字体大小和预设单位,对所述移动网页进行等比例调整包括:
确定所述移动网页中各网页元素的元素尺寸;
按照所述根元素的字体大小和预设单位,对各网页元素的元素尺寸进行等比例缩放。
5.如权利要求4所述的方法,其中,所述元素尺寸的单位为预设单位;
所述按照根元素的字体大小和预设单位,所述对各网页元素的元素尺寸进行等比例缩放包括:
确定所述根元素的字体大小和预设单位的比例;
依据所述比例对各网页元素的元素尺寸进行等比例缩放。
6.如权利要求1所述的方法,其中,所述显示等比例调整后的移动网页之前,还包括:
根据当前移动终端的分辨率设置所述移动网页的网页显示区域。
7.一种网页生成方法,包括:
在移动网页开发过程中,按照所述预设单位设置移动网页中各网页元素,以供展示时根据当前移动终端对应根元素的字体大小和预设单位,对所述移动网页进行等比例调整;
依据所述网页元素生成移动网页的网页数据。
8.如权利要求7所述的方法,其中,所述按照所述预设单位设置移动网页中各网页元素包括:
确定所述移动网页中各网页元素的尺寸信息;
按照预设单位对各网页元素的尺寸信息进行更新。
9.一种网页显示装置,包括:
获取模块,用于获取移动网页的网页数据,其中,所述网页数据中网页元素按照预设单位设置;
调整模块,用于根据当前移动终端对应根元素的字体大小和预设单位,对所述移动网页进行等比例调整;
显示模块,用于显示等比例调整后的移动网页。
10.一种网页生成装置,包括:
元素设置模块,用于在移动网页开发过程中,按照所述预设单位设置移动网页中各网页元素,以供展示时根据当前移动终端对应根元素的字体大小和预设单位,对所述移动网页进行等比例调整;
网页生成模块,用于依据所述网页元素生成移动网页的网页数据。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201611027374.8A CN106776738A (zh) | 2016-11-18 | 2016-11-18 | 一种网页生成、显示方法和装置 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201611027374.8A CN106776738A (zh) | 2016-11-18 | 2016-11-18 | 一种网页生成、显示方法和装置 |
Publications (1)
Publication Number | Publication Date |
---|---|
CN106776738A true CN106776738A (zh) | 2017-05-31 |
Family
ID=58970142
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN201611027374.8A Pending CN106776738A (zh) | 2016-11-18 | 2016-11-18 | 一种网页生成、显示方法和装置 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN106776738A (zh) |
Cited By (9)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN107402757A (zh) * | 2017-07-11 | 2017-11-28 | 北京潘达互娱科技有限公司 | 页面渲染方法及装置 |
CN108647348A (zh) * | 2018-05-15 | 2018-10-12 | 平安普惠企业管理有限公司 | 文本展示方法、装置、设备及存储介质 |
CN108733336A (zh) * | 2018-05-21 | 2018-11-02 | 北京字节跳动网络技术有限公司 | 页面显示方法和装置 |
CN109189533A (zh) * | 2018-08-29 | 2019-01-11 | 万帮充电设备有限公司 | 一种屏幕尺寸适配方法和系统 |
CN109254813A (zh) * | 2018-08-20 | 2019-01-22 | 中国平安人寿保险股份有限公司 | 屏幕适配方法、装置、计算机设备及存储介质 |
CN109308155A (zh) * | 2018-08-21 | 2019-02-05 | 中国平安人寿保险股份有限公司 | 调整页面的方法、装置、计算机设备及存储介质 |
CN109683895A (zh) * | 2018-12-21 | 2019-04-26 | 上海哔哩哔哩科技有限公司 | 基于css预处理器的网页适配多种浏览器尺寸的方法及系统 |
CN110795666A (zh) * | 2019-10-18 | 2020-02-14 | 腾讯科技(深圳)有限公司 | 一种网页生成方法、装置、终端及存储介质 |
CN110888574A (zh) * | 2019-10-12 | 2020-03-17 | 平安普惠企业管理有限公司 | 页面显示的自适配方法、装置、设备及计算机存储介质 |
Citations (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US20040183817A1 (en) * | 2002-12-03 | 2004-09-23 | Bitstream Inc. | Methods, systems, and programming for scaled display of web pages |
CN102436452A (zh) * | 2010-09-29 | 2012-05-02 | 英业达股份有限公司 | 动态调整字体大小的网页提供系统及其方法 |
CN102779167A (zh) * | 2012-06-21 | 2012-11-14 | 北京奇虎科技有限公司 | 在移动终端中显示网页的方法及系统 |
CN103345388A (zh) * | 2013-06-05 | 2013-10-09 | 中国电子科技集团公司第十五研究所 | 基于安卓操作系统的软件适应移动终端的方法及装置 |
-
2016
- 2016-11-18 CN CN201611027374.8A patent/CN106776738A/zh active Pending
Patent Citations (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US20040183817A1 (en) * | 2002-12-03 | 2004-09-23 | Bitstream Inc. | Methods, systems, and programming for scaled display of web pages |
CN102436452A (zh) * | 2010-09-29 | 2012-05-02 | 英业达股份有限公司 | 动态调整字体大小的网页提供系统及其方法 |
CN102779167A (zh) * | 2012-06-21 | 2012-11-14 | 北京奇虎科技有限公司 | 在移动终端中显示网页的方法及系统 |
CN103345388A (zh) * | 2013-06-05 | 2013-10-09 | 中国电子科技集团公司第十五研究所 | 基于安卓操作系统的软件适应移动终端的方法及装置 |
Cited By (11)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN107402757A (zh) * | 2017-07-11 | 2017-11-28 | 北京潘达互娱科技有限公司 | 页面渲染方法及装置 |
CN108647348A (zh) * | 2018-05-15 | 2018-10-12 | 平安普惠企业管理有限公司 | 文本展示方法、装置、设备及存储介质 |
CN108733336A (zh) * | 2018-05-21 | 2018-11-02 | 北京字节跳动网络技术有限公司 | 页面显示方法和装置 |
CN108733336B (zh) * | 2018-05-21 | 2021-10-01 | 北京字节跳动网络技术有限公司 | 页面显示方法和装置 |
CN109254813A (zh) * | 2018-08-20 | 2019-01-22 | 中国平安人寿保险股份有限公司 | 屏幕适配方法、装置、计算机设备及存储介质 |
CN109308155A (zh) * | 2018-08-21 | 2019-02-05 | 中国平安人寿保险股份有限公司 | 调整页面的方法、装置、计算机设备及存储介质 |
CN109189533A (zh) * | 2018-08-29 | 2019-01-11 | 万帮充电设备有限公司 | 一种屏幕尺寸适配方法和系统 |
CN109683895A (zh) * | 2018-12-21 | 2019-04-26 | 上海哔哩哔哩科技有限公司 | 基于css预处理器的网页适配多种浏览器尺寸的方法及系统 |
CN110888574A (zh) * | 2019-10-12 | 2020-03-17 | 平安普惠企业管理有限公司 | 页面显示的自适配方法、装置、设备及计算机存储介质 |
CN110795666A (zh) * | 2019-10-18 | 2020-02-14 | 腾讯科技(深圳)有限公司 | 一种网页生成方法、装置、终端及存储介质 |
CN110795666B (zh) * | 2019-10-18 | 2024-01-09 | 腾讯科技(深圳)有限公司 | 一种网页生成方法、装置、终端及存储介质 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN106776738A (zh) | 一种网页生成、显示方法和装置 | |
US11030392B2 (en) | Optimization for rendering web pages | |
CN108268262A (zh) | 实现将html转换为微信小程序的方法、装置及系统 | |
CN104537002B (zh) | 一种css兼容性调优的方法及系统 | |
US20140075344A1 (en) | Visual state comparator | |
CN103970750B (zh) | 一种生成html网页的方法和装置 | |
TW201329852A (zh) | 網頁瀏覽器中之網頁應用程式與輔助裝置的模擬、網頁應用程式開發工具及使用其之方法 | |
CN106484408A (zh) | 一种基于html5的节点关系图显示方法及系统 | |
CN103198121B (zh) | 浏览器设置背景的方法及浏览器 | |
CN103150745A (zh) | 在线编辑图片的方法和装置 | |
CN103955367A (zh) | 一种生成页面的方法及装置 | |
KR20100080470A (ko) | 시각화 대쉬보드들의 협력적 개발 | |
JP2017501508A (ja) | メタデータを利用したチャート変換システム及びその方法 | |
CN109857388A (zh) | 代码生成方法、装置、服务器及计算机可读介质 | |
CN101963984A (zh) | 页面局部区块渲染方法和系统 | |
CN105095497A (zh) | 基于网页模板生成网页的方法及装置 | |
CN105683957A (zh) | 样式表推测性预加载 | |
CN106296622A (zh) | 一种自动布局的拼图方法及装置 | |
CN113486280A (zh) | 页面渲染显示方法、装置、设备、存储介质和程序产品 | |
KR101194638B1 (ko) | 이북 콘텐츠를 레벨에 따라 디스플레이하는 장치 및 방법 | |
CN104331429B (zh) | 对网络对象进行多特征维度量化的方法及装置 | |
US10242139B2 (en) | Scheme and design markup language for interoperability of electronic design application tool and browser | |
CN104252288A (zh) | 浏览器多标签页的控制方法及浏览器 | |
CN107330087A (zh) | 页面文件生成方法和装置 | |
JP5372990B2 (ja) | 広告処理装置及び方法 |
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 |
Application publication date: 20170531 |
|
RJ01 | Rejection of invention patent application after publication |