网页适配的理论方法和装置

1. 一种网页适配的方法，其特征在于，包括以下步骤：

根据访问终端的访问请求，获取所述访问终端的屏幕类型、系统类型和浏览器类型；

获取与所述屏幕类型、所述系统类型和所述浏览器类型匹配的终端模板；

根据所述屏幕类型、所述系统类型和所述浏览器类型，进行URL 重定向，定向到与所述

终端模板匹配的访问页面；

响应所述访问请求，在所述访问终端显示所述访问页面。

2. 根据权利要求1 所述的网页适配的方法，其特征在于，所述根据访问终端的访问请

求，获取所述访问终端的屏幕尺寸、系统类型和浏览器类型的步骤包括以下步骤：

通过服务器接收所述访问终端发送的所述访问请求，并提取出所述访问请求的头部信

息；

根据所述头部信息内的x-wap-profile，从屏幕特征库中匹配出所述访问终端的屏幕

类型；

根据所述头部信息内的UserAgent，从浏览器特征库和操作系统特征库中匹配出所述

访问终端的系统类型和浏览器类型。

3. 根据权利要求1 所述的网页适配的方法，其特征在于，所述根据访问终端的访问请

求，获取所述访问终端的屏幕尺寸、系统类型和浏览器类型的步骤包括以下步骤：

分析所述访问终端运行JS 脚本获取的所述访问请求的头部信息；

根据所述头部信息内的x-wap-profile，从屏幕特征库中匹配出所述访问终端的屏幕

类型；

根据所述头部信息内的UserAgent，从浏览器特征库和操作系统特征库中匹配出所述

访问终端的系统类型和浏览器类型。

4. 根据权利要求2 所述的网页适配的方法，其特征在于，在所述提取出所述访问请求

的头部信息的步骤之后，还包括以下步骤：

遍历所述头部信息的各字段，判断所述头部信息是否已存储在已知头部数据库中；

若是，则根据所述头部信息内的x-wap-profile，从屏幕特征库中匹配出所述访问终端

的屏幕类型，根据所述头部信息内的UserAgent，从浏览器特征库和操作系统特征库中匹配

出所述访问终端的系统类型和浏览器类型；

若否，则把所述访问终端的头部信息写入到未知头部信息库。

5. 根据权利要求1 所述的网页适配的方法，其特征在于，在所述根据访问终端的访问

请求，获取所述访问终端的屏幕尺寸、系统类型和浏览器类型的步骤之后，还包括以下步

骤：

将所述屏幕类型、所述系统类型和所述浏览器类型写入所述访问终端的Cookie。

6. 根据权利要求1 所述的网页适配的方法，其特征在于，所述根据所述屏幕类型、所述

系统类型和所述浏览器类型，进行URL 重定向，定向到与所述终端模板匹配的访问页面的

步骤包括以下步骤：

根据所述屏幕类型、所述系统类型和所述浏览器类型，所述访问终端运行JS 脚本进行

URL 重定向，定向到与所述终端模板匹配的访问页面；

或，

根据所述屏幕类型、所述系统类型和所述浏览器类型，服务器进行内部的URL 重定向，

定向到与所述终端模板匹配的访问页面；

或，

根据所述屏幕类型、所述系统类型和所述浏览器类型，服务器进行外部的URL 重定向，

定向到与所述终端模板匹配的访问页面。

7. 根据权利要求6 所述的网页适配的方法，其特征在于，在所述定向到与所述终端模

板匹配的访问页面的步骤之前，包括以下步骤：

根据各种终端模板，将待访问的数据内容生成与各终端模板匹配的访问页面。

8. 根据权利要求6 所述的网页适配的方法，其特征在于，在所述定向到与所述终端模

板匹配的访问页面的步骤之前，包括以下步骤：

判断是否已将所述终端待访问的数据内容生成与所述终端模板匹配的所述访问页

面；

若否，则根据所述终端模板，将所述数据内容生成与所述终端模板匹配的所述访问页

面。

9. 根据权利要求1 至8 中任意一项所述的网页适配的方法，其特征在于，所述获取与所

述屏幕类型、所述系统类型和所述浏览器类型匹配的终端模板的步骤还包括以下步骤：

判断所述访问终端是否支持J S 脚本、和/ 或html5、和/ 或预设的流媒体格式、和/ 或

预设的流媒体播放协议；

若是，则获取与所述屏幕类型、所述系统类型、所述浏览器类型和JS 脚本、和/ 或

html5、和/ 或预设的流媒体格式、和/ 或预设的流媒体播放协议对应的终端模板。

10. 一种网页适配的系统，其特征在于，包括：

获取模块，用于根据访问终端的访问请求，获取所述访问终端的屏幕类型、系统类型和

浏览器类型；

模板模块，用于获取与所述屏幕类型、所述系统类型和所述浏览器类型匹配的终端模

板；

定向模块，用于根据所述屏幕类型、所述系统类型和所述浏览器类型，进行URL 重定

向，定向到与所述终端模板匹配的访问页面；

显示模块，用于响应所述访问请求，在所述访问终端显示所述访问页面。

网页适配的方法和系统

技术领域

[0001]  本发明涉及网络通讯技术领域，特别是涉及一种网页适配的方法和系统。

背景技术

[0002]  随着全球智能手机和移动网络的高速增长，3G 和WIFI 也越来也普及，互联网中

可用于显示的终端种类越来越多，不同的终端安装的操作系统不同，不同浏览器的屏幕大

小也不一样，有些浏览器不支持JS（JavaScript）脚本，有些不支持gif 动画，有些不支持

html5，为了适应每种设备，使不同设备能正常查看页面，现有技术设置了电脑版本和手机

版本这两套对应的站点系统，网络服务器根据发出访问请求的UserAgent 信息判断该终端

是来自电脑还是来自手机，并依据判断的结果，定向到电脑版本或手机版本，最后将正确的

界面效果呈现给访问终端。

[0003]  但是，上述适配技术需要两套系统，一套系统管理电脑版，一套系统管理手机版，

对多个子站点的管理操作繁琐、效率低，而且编辑管理系统要同时维护两套系统，不方便后

续扩展。

发明内容

[0004]  基于此，有必要针对上述适配技术需要两套系统，对多个子站点的管理操作繁琐、

效率低，而且编辑管理系统要同时维护两套系统，不方便后续扩展的问题，提供一种网页适

配的方法和系统。

[0005]  一种网页适配的方法，包括以下步骤：

[0006]  根据访问终端的访问请求，获取所述访问终端的屏幕类型、系统类型和浏览器类

型；

[0007]  获取与所述屏幕类型、所述系统类型和所述浏览器类型匹配的终端模板；

[0008]  根据所述屏幕类型、所述系统类型和所述浏览器类型，进行URL 重定向，定向到与

所述终端模板匹配的访问页面；

[0009]  响应所述访问请求，在所述访问终端显示所述访问页面。

[0010]  一种网页适配的系统，包括：

[0011]  获取模块，用于根据访问终端的访问请求，获取所述访问终端的屏幕类型、系统类

型和浏览器类型；

[0012]  模板模块，用于获取与所述屏幕类型、所述系统类型和所述浏览器类型匹配的终

端模板；

[0013]  定向模块，用于根据所述屏幕类型、所述系统类型和所述浏览器类型，进行URL 重

定向，定向到与所述终端模板匹配的访问页面；

[0014]  显示模块，用于响应所述访问请求，在所述访问终端显示所述访问页面。

[0015]  以上所述的网页适配的方法和系统，根据访问终端的访问请求，获取所述访问终

端的屏幕类型、系统类型和浏览器类型，再获取与所述屏幕类型、所述系统类型和所述浏

说  明  书 CN 103744985 A

览器类型匹配的终端模板，进而根据所述屏幕类型、所述系统类型和所述浏览器类型，进行

URL 重定向，定向到与所述终端模板匹配的访问页面，最终响应所述访问请求，在所述访问

终端显示所述访问页面，可快速从传统的PC 站点建立移动站点，为多种访问终端分配与其

屏幕类型、系统类型和浏览器类型匹配的访问页面，仅一套系统即可对多个站点进行便捷

管理，方便后续扩展。

附图说明

[0016]  图1 是本发明网页适配的方法第一实施方式的流程示意图；

[0017]  图2 是本发明网页适配的方法第二实施方式的流程示意图；

[0018]  图3 是本发明网页适配的方法第三实施方式的流程示意图；

[0019]  图4 是本发明网页适配的系统第一实施方式的结构示意图。

具体实施方式

[0020]  请参阅图1，图1 是本发明网页适配的方法第一实施方式的流程示意图。

[0021]  本实施方式的所述网页适配的方法包括以下步骤：

[0022]  步骤101，根据访问终端的访问请求，获取所述访问终端的屏幕类型、系统类型和

浏览器类型。

[0023]  步骤102，获取与所述屏幕类型、所述系统类型和所述浏览器类型匹配的终端模

板。

[0024]  步骤103，根据所述屏幕类型、所述系统类型和所述浏览器类型，进行URL 重定向，

定向到与所述终端模板匹配的访问页面。

[0025]  步骤104，响应所述访问请求，在所述访问终端显示所述访问页面。

[0026]  本实施方式所述的网页适配的方法，根据访问终端的访问请求，获取所述访问终

端的屏幕类型、系统类型和浏览器类型，再获取与所述屏幕类型、所述系统类型和所述浏

览器类型匹配的终端模板，进而根据所述屏幕类型、所述系统类型和所述浏览器类型，进行

URL 重定向，定向到与所述终端模板匹配的访问页面，最终响应所述访问请求，在所述访问

终端显示所述访问页面，可快速从传统的PC 站点建立移动站点，为多种访问终端分配与其

屏幕类型、系统类型和浏览器类型匹配的访问页面，仅一套系统即可对多个站点进行便捷

管理，方便后续扩展。

[0027]  其中，对于步骤101，所述访问终端包括各种型号的手机、台式电脑、和平板电脑中

的至少一个，所述访问请求优选地包括UserAgent 信息和/ 或所述访问终端身份标识。

[0028]  在一个实施例中，所述根据访问终端的访问请求，获取所述访问终端的屏幕尺寸、

系统类型和浏览器类型的步骤包括以下步骤：

[0029]  通过服务器接收所述访问终端发送的所述访问请求，并提取出所述访问请求的头

部信息。

[0030]  根据所述头部信息内的x-wap-profile，从屏幕特征库中匹配出所述访问终端的

屏幕类型。

[0031]  根据所述头部信息内的UserAgent，从浏览器特征库和操作系统特征库中匹配出

所述访问终端的系统类型和浏览器类型。

[0032]  其中，所述屏幕特征库、浏览器特征库和操作系统特征库为提前统计多种访问终

端的屏幕、操作系统、浏览器，归纳总结后建立的。

[0033]  优选地，在所述提取出所述访问请求的头部信息的步骤之后，还包括以下步骤：

[0034]  遍历所述头部信息的各字段，判断所述头部信息是否已存储在已知头部数据库

中。

[0035]  若是，则根据所述头部信息内的x-wap-profile，从屏幕特征库中匹配出所述访问

终端的屏幕类型，根据所述头部信息内的UserAgent，从浏览器特征库和操作系统特征库中

匹配出所述访问终端的系统类型和浏览器类型。

[0036]  若否，则把所述访问终端的头部信息写入到未知头部信息库。

[0037]  其中，所述已知头部数据库可包括用于区分不同的屏幕类型的x-wap-profile，和

用于区分不同的系统类型和浏览器类型的UserAgent 信息。对于未知头部信息库，后期可

通过人工或机器干预的方式进行该未知头部信息的适配。

[0038]  在另一个实施例中，在所述根据访问终端的访问请求，获取所述访问终端的屏幕

尺寸、系统类型和浏览器类型的步骤之后，还包括以下步骤：

[0039]  将所述屏幕类型、所述系统类型和所述浏览器类型写入所述访问终端的Cookie。

[0040]  本实施例所述的网页适配的方法，在所述访问终端下次进行访问时，可直接通过

读取Cookie 信息获取所述访问终端的屏幕尺寸、系统类型和浏览器类型。

[0041]  对于步骤102，可以预先建立与各种浏览器类型、系统类型和屏幕类型匹配的终端

模板库，所述浏览器类型可包括IE、UC、safari 或本领域技术人员惯用的其他浏览器中的

至少一种，所述系统类型可包括windows、Android、iOS 或本领域技术人员惯用的其他系统

中的至少一种，所述屏幕类型包括各种尺寸的台式电脑的屏幕、各种尺寸的平板电脑的屏

幕、各种尺寸的手机的屏幕或本领域技术人员惯用的各种尺寸的其他访问终端的屏幕中的

至少一种。

[0042]  在一个实施例中，当屏幕类型为9.7 英寸的平板电脑屏幕，若系统类型为

windows、浏览器类型为IE 时，终端模板为适于9.7 英寸的PC 版，若系统类型为Android，浏

览器类型为适于9.7 英寸的UC 时，终端模板为智能机版，若系统类型为iOS、浏览器类型为

safari，终端模板为适于9.7 英寸的智能机版。

[0043]  对于步骤103，所述URL 为统一资源定位符（Uniform Resource Locator），是互联

网上标准资源的地址，互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的

位置以及浏览器应该怎么处理它。

[0044]  在一个实施例中，所述根据所述屏幕类型、所述系统类型和所述浏览器类型，进行

URL 重定向，定向到与所述终端模板匹配的访问页面的步骤包括以下步骤：

[0045]  根据所述屏幕类型、所述系统类型和所述浏览器类型，所述访问终端运行JS 脚本

进行URL 重定向，定向到与所述终端模板匹配的访问页面。

[0046]  或，

[0047]  根据所述屏幕类型、所述系统类型和所述浏览器类型，服务器进行内部的URL 重

定向，定向到与所述终端模板匹配的访问页面。

[0048]  或，

[0049]  根据所述屏幕类型、所述系统类型和所述浏览器类型，服务器进行外部的URL 重

，定向到与所述终端模板匹配的访问页面。

[0050]  其中，在所述定向到与所述终端模板匹配的访问页面的步骤之前，包括以下步

骤：

[0051]  根据各种终端模板，将待访问的数据内容预先生成或实时动态生成与各终端模板

匹配的访问页面。

[0052]  优选地，在所述定向到与所述终端模板匹配的访问页面的步骤之前，可包括以下

步骤

[0053]  判断是否已将所述终端待访问的数据内容生成与所述终端模板匹配的所述访问

页面。

[0054]  若否，则根据所述终端模板，将所述数据内容实时动态生成与所述终端模板匹配

的所述访问页面。

[0055]  对于步骤104，优选地，基于重定向后的URL，可通过服务器向所述访问终端返回

所述访问页面，进行显示。

[0056]  请参阅图2，图2 是本发明网页适配的方法第二实施方式的流程示意图。

[0057]  本实施方式的网页适配的方法与第一实施方式的区别在于：所述根据访问终端的

访问请求，获取所述访问终端的屏幕尺寸、系统类型和浏览器类型的步骤包括以下步骤：

[0058]  步骤201，分析所述访问终端运行JS 脚本获取的所述访问请求的头部信息。

[0059]  步骤202，根据所述头部信息内的x-wap-profile，从屏幕特征库中匹配出所述访

问终端的屏幕类型。

[0060]  步骤203，根据所述头部信息内的UserAgent，从浏览器特征库和操作系统特征库

中匹配出所述访问终端的系统类型和浏览器类型。

[0061]  本实施方式的所述网页适配的方法，还可以通过分析所述访问终端运行JS 脚本

获取的所述头部信息内，再根据所述头部信息内的x-wap-profile 和UserAgent，从屏幕特

征库、浏览器特征库和操作系统特征库中匹配出所述访问终端的屏幕类型、系统类型和浏

览器类型。

[0062]  请参阅图3，图3 是本发明网页适配的方法第三实施方式的流程示意图。

[0063]  本实施方式的网页适配的方法与第一实施方式的区别在于：所述获取与所述屏幕

类型、所述系统类型和所述浏览器类型匹配的终端模板的步骤还包括以下步骤：

[0064]  步骤301，判断所述访问终端是否支持JS 脚本、和/ 或html5、和/ 或预设的流媒

体格式、和/ 或预设的流媒体播放协议。

[0065]  步骤302，若是，则获取与所述屏幕类型、所述系统类型、所述浏览器类型和JS 脚

本、和/ 或html5、和/ 或预设的流媒体格式、和/ 或预设的流媒体播放协议对应的终端模

板。

[0066]  本实施方式所述的网页适配的方法，进一步判断所述访问终端是否支持JS、和/

或html5、和/ 或预设的流媒体格式、和/ 或预设的流媒体播放协议，可提高访问页面与访问

终端的匹配度。

[0067]  请参阅图4，图4 是本发明网页适配的刺痛第一实施方式的结构示意图。

[0068]  本实施方式的所述网页适配的系统包括获取模块100、模板模块200、定向模块

300 和显示模块400，其中：

[0069]  获取模块100，用于根据访问终端的访问请求，获取所述访问终端的屏幕类型、系

统类型和浏览器类型。

[0070]  模板模块200，用于获取与所述屏幕类型、所述系统类型和所述浏览器类型匹配的

终端模板。

[0071]  定向模块300，用于根据所述屏幕类型、所述系统类型和所述浏览器类型，进行

URL 重定向，定向到与所述终端模板匹配的访问页面。

[0072]  显示模块400，用于响应所述访问请求，在所述访问终端显示所述访问页面。

[0073]  本实施方式所述的网页适配的系统，根据访问终端的访问请求，获取所述访问终

端的屏幕类型、系统类型和浏览器类型，再获取与所述屏幕类型、所述系统类型和所述浏

览器类型匹配的终端模板，进而根据所述屏幕类型、所述系统类型和所述浏览器类型，进行

URL 重定向，定向到与所述终端模板匹配的访问页面，最终响应所述访问请求，在所述访问

终端显示所述访问页面，可快速从传统的PC 站点建立移动站点，为多种访问终端分配与其

屏幕类型、系统类型和浏览器类型匹配的访问页面，仅一套系统即可对多个站点进行便捷

管理，方便后续扩展。

[0074]  其中，对于获取模块100，所述访问终端包括各种型号的手机、台式电脑、和平板电

脑中的至少一个，所述访问请求优选地包括USERAGENT 信息和/ 或所述访问终端身份标识。

[0075]  在一个实施例中，获取模块100 可用于：

[0076]  通过服务器接收所述访问终端发送的所述访问请求，并提取出所述访问请求的头

部信息。

[0077]  根据所述头部信息内的x-wap-profile，从屏幕特征库中匹配出所述访问终端的

屏幕类型。

[0078]  根据所述头部信息内的UserAgent，从浏览器特征库和操作系统特征库中匹配出

所述访问终端的系统类型和浏览器类型。

[0079]  其中，在提取出所述访问请求的头部信息后，获取模块100 还可用于：

[0080]  遍历所述头部信息的各字段，判断所述头部信息是否已存储在已知头部数据库

中。

[0081]  若是，则根据所述头部信息内的x-wap-profile，从屏幕特征库中匹配出所述访问

终端的屏幕类型，根据所述头部信息内的UserAgent，从浏览器特征库和操作系统特征库中

匹配出所述访问终端的系统类型和浏览器类型。

[0082]  若否，则把所述访问终端的头部信息写入到未知头部信息库。

[0083]  对于未知头部信息库，后期通过人工或机器干预的方式进行该未知头部信息的适

配。

[0084]  在另一个实施例中，获取模块100，还可进一步用于将所述屏幕类型、所述系统类

型和所述浏览器类型写入所述访问终端的Cookie。

[0085]  本实施例所述的网页适配的系统，在所述访问终端下次进行访问时，可直接通过

读取Cookie 信息获取所述访问终端的屏幕尺寸、系统类型和浏览器类型。

[0086]  对于模板模块200，可以预先建立与各种浏览器类型、系统类型和屏幕类型匹配的

终端模板库，所述浏览器类型可包括IE、UC、safari 或本领域技术人员惯用的其他浏览器

中的至少一种，所述系统类型可包括windows、Android、iOS 或本领域技术人员惯用的其他

说  明  书 CN 103744985 A

8

6/7 页

9

系统中的至少一种，所述屏幕类型包括各种尺寸的台式电脑的屏幕、各种尺寸的平板电脑

的屏幕、各种尺寸的手机的屏幕或本领域技术人员惯用的各种尺寸的其他访问终端的屏幕

中的至少一种。

[0087]  在一个实施例中，当屏幕类型为9.7 英寸的平板电脑屏幕，若系统类型为

windows、浏览器类型为IE 时，终端模板为适于9.7 英寸的PC 版，若系统类型为Android，浏

览器类型为适于9.7 英寸的UC 时，终端模板为智能机版，若系统类型为iOS、浏览器类型为

safari，终端模板为适于9.7 英寸的智能机版。

[0088]  对于定向模块300，所述URL 为统一资源定位符（Uniform Resource Locator），是

互联网上标准资源的地址，互联网上的每个文件都有一个唯一的URL，它包含的信息指出文

件的位置以及浏览器应该怎么处理它。

[0089]  在一个实施例中，定向模块300 可用于：

[0090]  根据所述屏幕类型、所述系统类型和所述浏览器类型，所述访问终端运行JS 脚本

进行URL 重定向，定向到与所述终端模板匹配的访问页面。

[0091]  或，

[0092]  根据所述屏幕类型、所述系统类型和所述浏览器类型，服务器进行内部的进行URL

重定向，定向到与所述终端模板匹配的访问页面。

[0093]  或，

[0094]  根据所述屏幕类型、所述系统类型和所述浏览器类型，服务器进行外部的进行URL

重定向，定向到与所述终端模板匹配的访问页面。

[0095]  其中，定向模块300 在定向到与所述终端模板匹配的访问页面的步骤之前，可根

据各种终端模板，将待访问的数据内容生成与各终端模板匹配的访问页面。

[0096]  优选地，定向模块300 在定向到与所述终端模板匹配的访问页面之前，还可：

[0097]  判断是否已将所述终端待访问的数据内容生成与所述终端模板匹配的所述访问

页面。

[0098]  若否，则根据所述终端模板，将所述数据内容生成与所述终端模板匹配的所述访

问页面。

[0099]  对于显示模块，优选地，基于重定向后的URL，可通过服务器向所述访问终端返回

所述访问页面，进行显示。

[0100]  以下所述是本发明网页适配的系统第二实施方式。

[0101]  本实施方式的网页适配的系统与第一实施方式的区别在于：获取模块100 还可用

于：

[0102]  分析所述访问终端运行JS 脚本获取的所述访问请求的头部信息。

[0103]  根据所述头部信息内的x-wap-profile，从屏幕特征库中匹配出所述访问终端的

屏幕类型。

[0104]  根据所述头部信息内的UserAgent，从浏览器特征库和操作系统特征库中匹配出

所述访问终端的系统类型和浏览器类型。

[0105]  本实施方式的所述网页适配的系统，还可以通过分析所述访问终端运行JS 脚本

获取的所述头部信息内，再根据所述头部信息内的x-wap-profile 和UserAgent，从屏幕特

征库、浏览器特征库和操作系统特征库中匹配出所述访问终端的屏幕类型、系统类型和浏

览器类型。

[0106]  以下所述是本发明网页适配的系统第三实施方式。

[0107]  本实施方式的网页适配的系统与第一实施方式的区别在于：模板模块200 还可用

于：

[0108]  判断所述访问终端是否支持JS 脚本、和/ 或html5、和/ 或预设的流媒体格式、和

/ 或预设的流媒体播放协议。

[0109]  若是，则获取与所述屏幕类型、所述系统类型、所述浏览器类型和JS 脚本、和/ 或

html5、和/ 或预设的流媒体格式、和/ 或预设的流媒体播放协议对应的终端模板。

[0110]  本实施方式所述的网页适配的系统，进一步判断所述访问终端是否支持JS 脚本、

和/ 或html5、和/ 或预设的流媒体格式、和/ 或预设的流媒体播放协议，可提高访问页面与

访问终端的匹配度。

[0111]  以上所述实施例仅表达了本发明的几种实施方式，其描述较为具体和详细，但并

不能因此而理解为对本发明专利范围的限制。应当指出的是，对于本领域的普通技术人员

来说，在不脱离本发明构思的前提下，还可以做出若干变形和改进，这些都属于本发明的保

护范围。因此，本发明专利的保护范围应以所附权利要求为准。