网页适配调整方法及装置的制造方法
【专利摘要】本发明实施例公开了一种网页适配调整方法及装置，所述方法包括：接收客户端发送的网页浏览请求后，向所述客户端发送分辨率分析脚本；接收所述客户端根据所述分辨率分析脚本计算出的分辨率调整参数；根据所述调整参数，调整所述客户端所请求的网页对应的样式表语言LESS文件中的变量值，使调整后的LESS文件与所述客户端的显示单元的分辨率适配；将调整后的LESS文件向所述客户端发送，使所述客户端根据所述LESS文件生成网页并输出。
【专利说明】
网页适配调整方法及装置
技术领域
[0001]本发明涉及网页调整技术，尤其涉及一种网页适配调整方法及装置。
【背景技术】
[0002]现有技术中，一般是通过JS (javascript)或层叠样式表(CSS)获取客户端分辨率判断屏幕所显示区域的宽度值和高度值，针对不同的分辨率值，通过CSS调整网页中元素的高度、宽度、起始位置等参数，使同一网页对应不同的表现形式，但均使网页达到最佳状
??τ O
[0003]但是，现有技术中，如果需要调整网页，需要使用CSS3才能达到预期的效果，而目前使用的ΙΕ6-ΙΕ8却无法完整支持。并且，并不是每种网页均适合这种方式去使网页达到最佳效果，如当前客户用web开发的管理系统，多以表单、表格为主，每一个元素都是不可或缺的功能，内容设计上也是极尽精简，客户没提出需求时，没有多余的内容也不可以随意插入扩展内容。随着屏幕硬件设施的日益发展，越来越多越来越大的屏幕已经问世，而可以扩展的内容毕竟有限，当在更加高分辨率的屏幕上，空白区域始终得不到有效填充。
【发明内容】
[0004]为解决上述技术问题，本发明实施例提供一种网页适配调整方法及装置。
[0005]本发明实施例的技术方案是这样实现的:
[0006]一种网页适配调整方法，包括:
[0007]接收客户端发送的网页浏览请求后，向所述客户端发送分辨率分析脚本；
[0008]接收所述客户端根据所述分辨率分析脚本计算出的分辨率调整参数；
[0009]根据所述调整参数，调整所述客户端所请求的网页对应的样式表语言LESS文件中的变量值，使调整后的LESS文件与所述客户端的显示单元的分辨率适配；
[0010]将调整后的LESS文件向所述客户端发送，使所述客户端根据所述LESS文件生成网页并输出。
[0011]优选地，所述LESS文件中至少包括CSS文件和相关的图片文件。
[0012]优选地，所述调整所述客户端所请求的网页对应的LESS文件中的变量值，包括:
[0013]将CSS文件及图片文件中的图片按缩放至所述调整参数的比例。
[0014]—种网页适配调整方法，包括:
[0015]接收服务器端发送的分辨率分析脚本后，根据所述分辨率分析脚本中的当前的分辨率与客户端的显示单元的分辨率计算分辨率调整参数；
[0016]将所述调整参数向所述服务器端发送；
[0017]接收所述服务器端根据所述调整参数调整后的LESS文件，并根据所接收的LESS文件生成网页并输出；其中，调整后的LESS文件与所述客户端的显示单元的分辨率适配。
[0018]优选地，所述LESS文件中至少包括CSS文件和相关的图片文件。
[0019]—种网页适配调整装置，包括:第一接收单元、第一发送单元、第二接收单元、调整单元和第二发送单元，其中:
[0020]第一接收单元，用于接收客户端发送的网页浏览请求；
[0021]第一发送单元，用于向所述客户端发送分辨率分析脚本；
[0022]第二接收单元，用于接收所述客户端根据所述分辨率分析脚本计算出的分辨率调整参数；
[0023]调整单元，用于根据所述调整参数，调整所述客户端所请求的网页对应的样式表语言LESS文件中的变量值，使调整后的LESS文件与所述客户端的显示单元的分辨率适配；
[0024]第二发送单元，用于将调整后的LESS文件向所述客户端发送，使所述客户端根据所述LESS文件生成网页并输出。
[0025]优选地，所述LESS文件中至少包括CSS文件和相关的图片文件。
[0026]优选地，所述调整单元，还用于将CSS文件及图片文件中的图片按缩放至所述调整参数的比例。
[0027]—种网页适配调整装置，包括:第一接收单元、计算单元、发送单元、第二接收单元和生成输出单元，其中:
[0028]第一接收单元，用于接收服务器端发送的分辨率分析脚本；
[0029]计算单元，用于根据所述分辨率分析脚本中的当前的分辨率与客户端的显示单元的分辨率计算分辨率调整参数；
[0030]发送单元，用于将所述调整参数向所述服务器端发送；
[0031]第二接收单元，用于接收所述服务器端根据所述调整参数调整后的LESS文件；其中，调整后的LESS文件与所述客户端的显示单元的分辨率适配；
[0032]生成输出单元，用于根据所接收的LESS文件生成网页并输出。
[0033]优选地，所述LESS文件中至少包括CSS文件和相关的图片文件。
[0034]本发明实施例中，当服务器端接收到客户端发送的网页浏览请求后，向所述客户端发送分辨率分析脚本；客户端根据分辨率分析脚本计算出的分辨率调整参数，并向服务器端发送；服务器端根据调整参数，调整客户端所请求的网页对应的样式表语言LESS文件中的变量值，使调整后的LESS文件与客户端的显示单元的分辨率适配；并将调整后的LESS文件向客户端发送；客户端将根据LESS文件生成网页并输出。
[0035]本发明实施例的技术方案，通过等比伸缩的方式完成显示网页分辨率的自适应，并通过LESS变量控制来生成适应不同屏幕的不同的CSS，根据不同的屏幕高、宽生成相应比例的图片；本发明实施例的技术方案能够兼容相对低级的且占有一定市场的浏览器，可自动动态扩展，适用一切设备的分辨率；给不适合以内容扩展来填充空白区域的方式来利用屏幕空间的网页，屏幕自适应调整的方式更合理。
【附图说明】
[0036]图1为本发明实施例一的网页适配调整方法的流程图；
[0037]图2为本发明实施例二的网页适配调整方法的流程图；
[0038]图3为本发明实施例三的网页适配调整方法的流程图；
[0039]图4为本发明实施例一的网页适配调整装置的组成结构示意图；
[0040]图5为本发明实施例二的网页适配调整装置的组成结构示意图。
【具体实施方式】
[0041]为使本发明的目的、技术方案和优点更加清除明白，以下举实施例并参照附图，对本发明进一步详细说明。
[0042]图1为本发明实施例一的网页适配调整方法的流程图，如图1所示，本发明实施例的网页适配调整方法包括以下步骤:
[0043]步骤101，接收客户端发送的网页浏览请求后，向所述客户端发送分辨率分析脚本。
[0044]本步骤中，当网页服务器接收到客户端发送的网页浏览请求后，并不直接向客户端发送其所请求的网页内容，而是先向该客户端发送分辨率分析脚本。该分辨率分析脚本是用于获取客户端的显示单元如显示屏所支持的分辨率的，通过获取客户端当前所支持的分辨率，以生成适合于客户端显示单元显示的网页内容，方便客户端以更佳的显示效果呈现该网元。
[0045]步骤102，接收所述客户端根据所述分辨率分析脚本计算出的分辨率调整参数。
[0046]客户端接收到分辨率分析脚本后，将根据该客户端的显示单元所支持的分辨率以及所请求的网元当前的分辨率，计算出需调整的分辨率调整参数。该分辨率调整参数可以是分辨率调整比例值。
[0047]步骤103，根据所述调整参数，调整所述客户端所请求的网页对应的样式表语言LESS文件中的变量值，使调整后的LESS文件与所述客户端的显示单元的分辨率适配。
[0048]网页服务器接收到客户端发送的调整参数后，根据该调整参数对客户端所请求的网页进行相应调整。
[0049]本发明实施例中，LESS文件中至少包括CSS文件和相关的图片文件。而调整所述客户端所请求的网页对应的LESS文件中的变量值，包括:将CSS文件及图片文件中的图片按缩放至所述调整参数的比例。具体地，在开发网页之初，已设定好一个基础值为I倍大小，此处以800X600分辨率为基础值进行说明。例如，当确定出客户端分辨率为1280X720，则计算1280/800 = 1.6 ；720/600 = 1.2，取比例值中较小的值即1.2，则请求样式表为“Stylel.2.css”。例如，在LESS文件中，设置了基础分辨率宽度是800px，高度是600px，此时变量值Obase的值是1，图片文件夹是Oimages，值为imagesl，每个高宽及位置上都乘以Obase变量，而每个图片的路径都是Oimages。这时，客户端发起了对stylel.2.css的请求。服务端则将1.2赋给Obase变量，将imagesl.2赋给Oimages变量，同时生成1.2倍的图片文件大小至文件夹:imagesl.2。
[0050]步骤104，将调整后的LESS文件向所述客户端发送，使所述客户端根据所述LESS文件生成网页并输出。
[0051]网页服务器将调整后的LESS文件向所述客户端发送，客户端根据所述LESS文件生成网页并向用户输出。
[0052]本发明实施例的技术方案，通过等比伸缩的方式完成显示网页分辨率的自适应，并通过LESS变量控制来生成适应不同屏幕的不同的CSS，根据不同的屏幕高、宽生成相应比例的图片；本发明实施例的技术方案能够兼容相对低级的且占有一定市场的浏览器，可自动动态扩展，适用一切设备的分辨率；给不适合以内容扩展来填充空白区域的方式来利用屏幕空间的网页，屏幕自适应调整的方式更合理。
[0053]图2为本发明实施例二的网页适配调整方法的流程图，如图2所示，本发明实施例的网页适配调整方法包括以下步骤:
[0054]步骤201，接收服务器端发送的分辨率分析脚本后，根据所述分辨率分析脚本中的当前的分辨率与客户端的显示单元的分辨率计算分辨率调整参数。
[0055]客户端首先向网页服务器发送网页浏览请求，网页服务器接收到该网页浏览请求后，向该客户端发送分辨率分析脚本。客户端接收到分辨率分析脚本后，将根据该客户端的显示单元所支持的分辨率以及所请求的网元当前的分辨率，计算出需调整的分辨率调整参数。该分辨率调整参数可以是分辨率调整比例值。具体地，假设开发网页之初已设定好一个基础值为I倍大小，此处以800X600分辨率为基础值进行说明。例如，当确定出客户端的显示单元的分辨率为1280X720时，则计算1280/800 = 1.6 ；720/600 = 1.2，取比例值中较小的值即1.2，则请求样式表为“stylel.2.css”。本发明实施例中将所请求网页的分辨率与客户端端的显示单元所支持的分辨率分别进行比对，以确定出最终调整的分辨率调整参数，该调整参数选取横向及竖向分辨率中比例值最小的。
[0056]步骤202，将所述调整参数向所述服务器端发送。
[0057]客户端计算出需调整的分辨率调整参数后，向网页服务器发送该分辨率调整参数。
[0058]步骤203，接收所述服务器端根据所述调整参数调整后的LESS文件，并根据所接收的LESS文件生成网页并输出；其中，调整后的LESS文件与所述客户端的显示单元的分辨率适配。
[0059]本发明实施例中，LESS文件中至少包括CSS文件和相关的图片文件。而调整所述客户端所请求的网页对应的LESS文件中的变量值，包括:将CSS文件及图片文件中的图片按缩放至所述调整参数的比例。例如，在LESS文件中，设置了基础分辨率宽度是800px，高度是600px，而客户端计算出的分辨率调整参数为1.2 ;此时变量值Obase的值是1，图片文件夹是Oimages，值为imagesl，每个高宽及位置上都乘以Obase变量，而每个图片的路径都是Oimages。这时，客户端发起了对stylel.2.css的请求。服务端则将1.2赋给Obase变量，将imagesl.2赋给Oimages变量，同时生成1.2倍的图片文件大小至文件夹:imagesl.2。
[0060]网页服务器将调整后的LESS文件向所述客户端发送，客户端根据所述LESS文件生成网页并向用户输出。
[0061]本发明实施例的技术方案，通过等比伸缩的方式完成显示网页分辨率的自适应，并通过LESS变量控制来生成适应不同屏幕的不同的CSS，根据不同的屏幕高、宽生成相应比例的图片；本发明实施例的技术方案能够兼容相对低级的且占有一定市场的浏览器，可自动动态扩展，适用一切设备的分辨率；给不适合以内容扩展来填充空白区域的方式来利用屏幕空间的网页，屏幕自适应调整的方式更合理。
[0062]以下通过具体示例，进一步阐明本发明技术方案的实质。
[0063]图3为本发明实施例三的网页适配调整方法的流程图，如图3所示，本发明实施例的网页适配调整方法包括:
[0064]步骤1:服务端接受客户端发来的页面打开请求
[0065]步骤2:服务端给客户端发送分辨率分析脚本
[0066]客户端请求到了页面服务端一般都会把网页直接发给客户端，此时在网页中的顶部、CSS调用之前写入分辨率分析脚本即可。
[0067]步骤3:客户端根据分辨率分析脚本得出所需比例值并请求相应样式表。
[0068]在开发网页之初，已设定好一个基础值为I倍大小，此处以800X600分辨率为基础值进行说明。例如，当脚本判断出客户端分辨率为1280X720，则计算1280/800=1.6 ；720/600 = 1.2，取较小值四舍五入至小数点后一位，即1.2，则请求样式表“stylel.2.css，，。
[0069]步骤5:服务端根据请求，改变LESS文件中的变量值并生成所需CSS文件与相关的图片文件。
[0070]例如，在LESS文件中，设置了基础分辨率宽度是800px，高度是600px，此时变量值Obase的值是1，图片文件夹是Oimages，值为imagesl，每个高宽及位置上都乘以了 Obase变量，而每个图片的路径都是Oimages。这时，客户端发起了对stylel.2.css的请求。服务端则将1.2赋给Obase变量，将imagesl.2赋给Oimages变量，同时生成1.2倍的图片文件大小至文件夹:imagesl.2。当然，如果服务器已存在1.2倍文件大小的文件则直接将1.2倍的CSS发送给客户端。
[0071]步骤6:客户端接受相应的样式表并呈现页面。
[0072]本发明实施例的技术方案，通过等比伸缩的方式完成显示网页分辨率的自适应，并通过LESS变量控制来生成适应不同屏幕的不同的CSS，根据不同的屏幕高、宽生成相应比例的图片；本发明实施例的技术方案能够兼容相对低级的且占有一定市场的浏览器，可自动动态扩展，适用一切设备的分辨率；给不适合以内容扩展来填充空白区域的方式来利用屏幕空间的网页，屏幕自适应调整的方式更合理。
[0073]图4为本发明实施例一的网页适配调整装置的组成结构示意图，如图4所示，本示例的网页适配调整装置包括:第一接收单元40、第一发送单元41、第二接收单元42、调整单元43和第二发送单元44，其中:
[0074]第一接收单元40，用于接收客户端发送的网页浏览请求；
[0075]第一发送单元41，用于向所述客户端发送分辨率分析脚本；
[0076]第二接收单元42，用于接收所述客户端根据所述分辨率分析脚本计算出的分辨率调整参数；
[0077]调整单元43，用于根据所述调整参数，调整所述客户端所请求的网页对应的样式表语言LESS文件中的变量值，使调整后的LESS文件与所述客户端的显示单元的分辨率适配；
[0078]第二发送单元44，用于将调整后的LESS文件向所述客户端发送，使所述客户端根据所述LESS文件生成网页并输出。
[0079]上述，所述LESS文件中至少包括CSS文件和相关的图片文件。上述调整单元43，还用于将CSS文件及图片文件中的图片按缩放至所述调整参数的比例。具体地，调整单元43调整所述客户端所请求的网页对应的LESS文件中的变量值，包括:在开发网页之初，已设定好一个基础值为I倍大小，此处以800X600分辨率为基础值进行说明。例如，当确定出客户端分辨率为1280 X 720，则计算1280/800 = 1.6 ；720/600 = 1.2，取比例值中较小的值即1.2，则请求样式表为“stylel.2.css”。例如，在LESS文件中，设置了基础分辨率宽度是800px，高度是600px，此时变量值Obase的值是1，图片文件夹是Oimages，值为imagesl，每个高宽及位置上都乘以Obase变量，而每个图片的路径都是Oimages。这时，客户端发起了对stylel.2.css的请求。服务端则将1.2赋给Obase变量，将imagesl.2赋给Oimages变量，同时生成1.2倍的图片文件大小至文件夹dmagesl.2。
[0080]图4所示的网页适配调整装置适用于网页服务器侧。
[0081]本领域技术人员应当理解，图4所示的网页适配调整装置中各处理单元的功能，可参照前述的网页适配调整方法的相关描述而理解，本发明实施例的网页适配调整装置中各处理单元，可通过实现本发明实施例所述的功能的模拟电路而实现，也可以通过执行本发明实施例所述的功能的软件在智能设备上的运行而实现。
[0082]图5为本发明实施例二的网页适配调整装置的组成结构示意图，如图5所示，本发明实施例的网页适配调整装置包括:第一接收单元50、计算单元51、发送单元52、第二接收单元53和生成输出单元54，其中:
[0083]第一接收单元50，用于接收服务器端发送的分辨率分析脚本；
[0084]计算单元51，用于根据所述分辨率分析脚本中的当前的分辨率与客户端的显示单元的分辨率计算分辨率调整参数；
[0085]发送单元52，用于将所述调整参数向所述服务器端发送；
[0086]第二接收单元53，用于接收所述服务器端根据所述调整参数调整后的LESS文件；其中，调整后的LESS文件与所述客户端的显示单元的分辨率适配；
[0087]生成输出单元54，用于根据所接收的LESS文件生成网页并输出。
[0088]本发明实施例中，所述LESS文件中至少包括CSS文件和相关的图片文件。
[0089]计算单元51计算分辨率调整参数，具体地，在开发网页之初，已设定好一个基础值为I倍大小，此处以800X600分辨率为基础值进行说明。例如，当脚本判断出客户端分辨率为1280 X 720，则计算1280/800 = 1.6 ；720/600 = 1.2，取较小值四舍五入至小数点后一位，即1.2，则请求样式表“stylel.2.css”。
[0090]图5所示的网页适配调整装置适用于客户端。
[0091]本领域技术人员应当理解，图5所示的网页适配调整装置中各处理单元的功能，可参照前述的网页适配调整方法的相关描述而理解，本发明实施例的网页适配调整装置中各处理单元，可通过实现本发明实施例所述的功能的模拟电路而实现，也可以通过执行本发明实施例所述的功能的软件在智能设备上的运行而实现。
[0092]本发明实施例所记载的技术方案之间，在不冲突的情况下，可以任意组合。
[0093]在本发明所提供的几个实施例中，应该理解到，所揭露的方法、装置和电子设备，可以通过其它的方式实现。以上所描述的设备实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，如:多个单元或组件可以结合，或可以集成到另一个系统，或一些特征可以忽略，或不执行。另外，所显示或讨论的各组成部分相互之间的耦合、或直接耦合、或通信连接可以是通过一些接口，设备或单元的间接耦合或通信连接，可以是电性的、机械的或其它形式的。
[0094]上述作为分离部件说明的单元可以是、或也可以不是物理上分开的，作为单元显示的部件可以是、或也可以不是物理单元，即可以位于一个地方，也可以分布到多个网络单元上；可以根据实际的需要选择其中的部分或全部单元来实现本实施例方案的目的。
[0095]另外，在本发明各实施例中的各功能单元可以全部集成在一个处理单元中，也可以是各单元分别单独作为一个单元，也可以两个或两个以上单元集成在一个单元中；上述集成的单元既可以采用硬件的形式实现，也可以采用硬件加应用功能单元的形式实现。
[0096]本领域普通技术人员可以理解:实现上述方法实施例的全部或部分步骤可以通过程序指令相关的硬件来完成，前述的程序可以存储于一计算机可读取存储介质中，该程序在执行时，执行包括上述方法实施例的步骤；而前述的存储介质包括:移动存储设备、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。
[0097]或者，本发明实施例上述集成的单元如果以应用功能模块的形式实现并作为独立的产品销售或使用时，也可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明实施例的技术方案本质上或者说对现有技术做出贡献的部分可以以应用产品的形式体现出来，该计算机应用产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机、服务器、或者网络设备等)执行本发明各个实施例所述方法的全部或部分。而前述的存储介质包括:移动存储设备、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。
[0098]本发明的保护范围并不局限于此，熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本发明的保护范围之内。
【主权项】
1.一种网页适配调整方法，其特征在于，所述方法包括: 接收客户端发送的网页浏览请求后，向所述客户端发送分辨率分析脚本； 接收所述客户端根据所述分辨率分析脚本计算出的分辨率调整参数； 根据所述调整参数，调整所述客户端所请求的网页对应的样式表语言LESS文件中的变量值，使调整后的LESS文件与所述客户端的显示单元的分辨率适配； 将调整后的LESS文件向所述客户端发送，使所述客户端根据所述LESS文件生成网页并输出。2.根据权利要求1所述的方法，其特征在于，所述LESS文件中至少包括CSS文件和相关的图片文件。3.根据权利要求2所述的方法，其特征在于，所述调整所述客户端所请求的网页对应的LESS文件中的变量值，包括: 将CSS文件及图片文件中的图片按缩放至所述调整参数的比例。4.一种网页适配调整方法，其特征在于，所述方法包括: 接收服务器端发送的分辨率分析脚本后，根据所述分辨率分析脚本中的当前的分辨率与客户端的显示单元的分辨率计算分辨率调整参数； 将所述调整参数向所述服务器端发送； 接收所述服务器端根据所述调整参数调整后的LESS文件，并根据所接收的LESS文件生成网页并输出；其中，调整后的LESS文件与所述客户端的显示单元的分辨率适配。5.根据权利要求4所述的方法，其特征在于，所述LESS文件中至少包括CSS文件和相关的图片文件。6.一种网页适配调整装置，其特征在于，所述装置包括:第一接收单元、第一发送单元、第二接收单元、调整单元和第二发送单元，其中: 第一接收单元，用于接收客户端发送的网页浏览请求； 第一发送单元，用于向所述客户端发送分辨率分析脚本； 第二接收单元，用于接收所述客户端根据所述分辨率分析脚本计算出的分辨率调整参数； 调整单元，用于根据所述调整参数，调整所述客户端所请求的网页对应的样式表语言LESS文件中的变量值，使调整后的LESS文件与所述客户端的显示单元的分辨率适配； 第二发送单元，用于将调整后的LESS文件向所述客户端发送，使所述客户端根据所述LESS文件生成网页并输出。7.根据权利要求6所述的装置，其特征在于，所述LESS文件中至少包括CSS文件和相关的图片文件。8.根据权利要求7所述的装置，其特征在于，所述调整单元，还用于将CSS文件及图片文件中的图片按缩放至所述调整参数的比例。9.一种网页适配调整装置，其特征在于，所述装置包括:第一接收单元、计算单元、发送单元、第二接收单元和生成输出单元，其中: 第一接收单元，用于接收服务器端发送的分辨率分析脚本； 计算单元，用于根据所述分辨率分析脚本中的当前的分辨率与客户端的显示单元的分辨率计算分辨率调整参数； 发送单元，用于将所述调整参数向所述服务器端发送； 第二接收单元，用于接收所述服务器端根据所述调整参数调整后的LESS文件；其中，调整后的LESS文件与所述客户端的显示单元的分辨率适配； 生成输出单元，用于根据所接收的LESS文件生成网页并输出。10.根据权利要求9所述的装置，其特征在于，所述LESS文件中至少包括CSS文件和相关的图片文件。
【文档编号】G06F17/30GK105989069SQ201510069448
【公开日】2016年10月5日
【申请日】2015年2月10日
【发明人】马秋蓉, 谭旭, 杨文松, 李海涛, 李海波
【申请人】中国移动通信集团云南有限公司