一种动态适配网页的方法及其装置的制造方法
【技术领域】
[0001] 本申请涉及网页处理领域，尤其涉及一种动态适配网页的方法及其装置。
【背景技术】
[0002] 随着通信技术的飞速发展，各种智能机和移动设备琳琅满目鳞次栉比，这也极大 推动了移动互联网的发展。然而，在手机等移动设备上浏览传统的PC网站时，网站会等比 例缩小，且图片本身较大，消耗流量较多，严重影响加载速度。这些因素都会导致移动端非 常差的阅读体验。在移动互联网领域，有效的将传统互联网上丰富的内容在移动设备上友 好的展示给用户，成为移动互联网发展的过程的重要问题。在这个问题中，如何将图片和文 字等内容更好的展示给用户，且适当减小图片大小，节省移动端流量，提高网站在移动端的 用户体验，成为该领域中一个非常重要的课题。 业界的主要策略分为两种，一种是网页重排技术，例如微软在其早期的Windows Mobile系统中的IEMobile系列浏览器，使用的策略是将网页中的所有元素纵向排列，以 方便用户的阅读。谷歌在其Android系统的浏览器中，采用了文字自动换行技术，即在网 页缩放时，重新对网页中的文字段落进行重排版，让文字根据当前缩放比例和屏幕的关系 自动换行，保证在用户阅读时，不需要对网页进行左右滚屏操作。而苹果公司在iPhone系 列手机的浏览器中，以及微软公司在其WindowsPhone7系统的浏览器中，则采取了Text Scaling技术，通过在网页首次渲染的时候对网页不同容器中的字体大小进行不同的调整， 保证在该容器被缩放到屏幕正中时，容器中的文字大小适合用户阅读并且不需要左右滚 屏，这一技术成功避免了每次缩放都对网页进行重排版。但这种技术的缺点在于在局部上 破坏了网页的布局，容易造成网页的排版混乱，内容重叠或大块空白等问题。
[0003] 业界采用的另一种技术是提供多种页面供用户选择，即PC版页面和适合于各种 移动设备的不同版本的页面，但是也存在前期需要开发多个版本、后期维护多个网页内容、 兼容性差、用户体验不好等各种问题。
【发明内容】
[0004] 有鉴于此，本申请提供一种动态适配网页的方法及其装置，可根据终端类型，自动 产生适合请求的终端显示的网页，具有便于推广、无需数据迀移、内容实时自动更新、开发 成本低、兼容性好等优点。
[0005] 本申请提供一种动态适配网页的方法，包括如下步骤：获得访问终端的类型；根 据终端的类型转换网页D0M;将转换后获得的网页D0M写回终端进行显示。
[0006] 其中获得访问终端的类型包括：在网页内插入可动态适配网页的代码；终端访问 插入了可动态适配网页的代码的网页；获得终端的各项参数；根据获得的参数，判断终端 的类型。
[0007] 其中在网页内插入可动态适配网页的代码包括在网页的〈head〉标签之后插入一 行可动态适配网页的代码。
[0008] 其中根据终端的类型转换网页DOM包括：抓取网页DOM;转换获得的网页DOM。
[0009] 其中将转换后获得的网页DOM写回终端进行显示包括：动态渲染网页DOM;加载 CSS样式表；显示适配后的网页。
[0010] 本申请进一步的包括一种动态适配网页的装置，该装置包括：获取单元：获得访 问终端的类型；转换单元：根据终端的类型转换网页D0M;显示单元：将转换后获得的网页 D0M写回终端进行显示。
[0011] 其中该获取单元进一步包括：插入单元：在网页内插入可动态适配网页的代码； 通信单元：提供访问接口，终端可通过该接口访问插入了可动态适配网页的代码的网页； 参数提取单元：获得终端的各项参数；判断单元：根据获得的参数，判断终端的类型。
[0012] 其中插入单元在网页的〈head〉标签之后插入一行可动态适配网页的代码。
[0013] 其中转换单元进一步包括：D0M抓取单元：抓取网页D0M;转换D0M单元：转换获得 的网页D0M。
[0014] 其中显示单元进一步包括：植染单元：动态植染网页D0M;样式单元：加载CSS样 式表；呈现单元：显示适配后的网页。
[0015] 由以上技术方案可见，本申请通过判断访问终端的类型，为该终端适配适于其显 示的网页。
[0016] 通过本申请，可实现网页的动态适配，从而在无需二次开发的前提下，动态调整网 页的呈现形式。
【附图说明】
[0017] 为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现 有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本 申请中记载的一些实施例，对于本领域普通技术人员来讲，还可以根据这些附图获得其他 的附图。
[0018] 图1是本申请动态适配网页的方法及其装置所应用的终端、服务器以及云端服务 器的系统结构图； 图2是本申请动态适配网页的方法的流程图； 图3是本申请判断终端类型的方法的流程图； 图4是本申请转换网页D0M的方法的流程图； 图5是本申请终端显示的方法的流程图； 图6是本申请动态适配装置的结构图； 图7是本申请获取单元的结构图； 图8是本申请转换单元的结构图； 图9是本申请显示单元的结构图； 图10是使用本申请的动态适配方法转换后的网页前后对比图；。
【具体实施方式】
[0019] 本申请在终端访问服务器中存储的网页时，根据终端的类型提供不同的页面加以 显示。通过本申请，用户可在较短的响应时间内动态的获得适于终端显示的网页，从而获得 更好的浏览体验。
[0020] 当然，实施本申请的任一技术方案必不一定需要同时达到以上的所有优点。
[0021] 为了使本领域的人员更好地理解本申请中的技术方案，下面将结合本申请实施例 中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅 仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术 人员所获得的所有其他实施例，都应当属于本申请保护的范围。
[0022] 下面结合本申请附图进一步说明本申请具体实现。
[0023] 本申请提供一种动态适配网页的方法，应用于云端服务器以及各种终端。
[0024] 参见图1，该动态适配网页的方法和装置所应用的系统包括服务器1和多个终端2 以及云端服务器3,其中服务器1可为各种类型的服务器，用于与多个终端2互联，其上存储 网页内容，供与之连接的多个终端2访问。多个终端2可为PC机、各种类型的移动设备、以 及可以与服务器1，云端服务器3通信的各种有线或无线终端等。云端服务器3提供动态适 配网页的服务，可与服务器1以及终端2实现有线或无线的连接。
[0025] 进一步的，所述终端2、服务器1或者云端服务器3三者在硬件上均包括控制模块， 存储模块、输入模块以及输出模块。其中，所述控制模块用于对各功能模块进行控制。所述 存储模块用于存储程序以及中间数据。所述输入模块用于接收用户的输入指令。所述输出 模块用于输出网页内容。
[0026] 参见图2,本申请动态适配网页的方法包括： S1、获得访问终端的类型。
[0027] 具体地步骤可参见图3,包括： P1、在网页内插入可动态适配网页的代码。
[0028] 通过在服务器1提供的网页上插入代码，实现对云端服务器3上提供的各种服务 的调用，这可通过多种插入技术实现，例如服务器1主动请求，或云端服务器3推送，插入方 式例如可为在需要做适配的网页的源代码的〈head〉标签之后插入一行可动态适配网页的 代码，优选的在紧邻〈head〉标签之后的地方。该代码实现对云端服务器上提供的各种适配 服务的调用。
[0029]P2、终端访问插入了可动态适配网页的代码的网页。
[0030] 当终端2访问服务器1上存储的网页时，如果该网页预先插入了可动态适配网页 的代码，则该网页首先调用云端服务器3上提供的动态适配功能。
[0031]P3、获得终端的各项参数。
[0032] 云端服务器3向终端1发送信息，获得终端的各项参数，例如终端的浏览器信息、 屏幕的分辨率、屏幕尺寸等等。
[0033]P4、根据获得的参数，判断终端的类型。
[0034] 根据获得的参数，判断终端是否为PC机，如果是PC机，则向终端提供服务器1上 存储的网页，并结束图2所示的动态适配网页的方法。如果判断终端不是PC机，是移动设 备，则继续步骤S2。这可通过获得的浏览器信息判断，例如分析终端浏览器返回的HTTP_ USER_AGENT信息，以下是标准和终端类型的匹配关系表：
【主权项】
1. 一种动态适配网页的方法，其特征在于，包括如下步骤： 获得访问终端的类型； 根据终端的类型转换网页DOM; 将转换后获得的网页DOM写回终端进行显示。
2. 根据权利要求1所述的方法，其中获得访问终端的类型包括：在网页内插入可动态 适配网页的代码；终端访问插入了可动态适配网页的代码的网页；获得终端的各项参数； 根据获得的参数，判断终端的类型。
3. 根据权利要求2所述的方法，其中在网页内插入可动态适配网页的代码包括在网页 的〈head〉标签之后插入一行可动态适配网页的代码。
4. 根据权利要求1所述的方法，其中根据终端的类型转换网页DOM包括：抓取网页 D0M;转换获得的网页D0M。
5. 据权利要求1所述的方法，其中将转换后获得的网页DOM写回终端进行显示包括： 动态渲染网页DOM;加载CSS样式表；显示适配后的网页。
6. -种动态适配网页的装置，包括： 获取单元：获得访问终端的类型； 转换单元：根据终端的类型转换网页DOM; 显示单元：将转换后获得的网页DOM写回终端进行显示。
7. 根据权利要求5所述的动态适配装置，其中该获取单元进一步包括： 插入单元：在网页内插入可动态适配网页的代码； 通信单元：提供访问接口，终端可通过该接口访问插入了可动态适配网页的代码的网 页； 参数提取单元：获得终端的各项参数； 判断单元：根据获得的参数，判断终端的类型。
8. 根据权利要求7所述的动态适配装置，其中插入单元在网页的〈head〉标签之后插入 一行可动态适配网页的代码。
9. 根据权利要求5所述的动态适配装置，其中转换单元进一步包括： DOM抓取单元：抓取网页DOM; 转换DOM单元：转换获得的网页D0M。
10. 根据权利要求5所述的动态适配装置，其中显示单元进一步包括： 渲染单元：动态渲染网页DOM; 样式单元：加载CSS样式表； 呈现单元：显示适配后的网页。
【专利摘要】本申请提供一种动态适配网页的方法及其装置，该方法包括如下步骤：获得访问终端的类型；根据终端的类型转换网页DOM；将转换后获得的网页DOM写回终端进行显示。该方法可根据终端类型，自动产生适合请求的终端显示的网页，具有便于推广、无需数据迁移、内容实时自动更新、开发成本低、兼容性好等优点。
【IPC分类】G06F9-44
【公开号】CN104820589
【申请号】CN201510199023
【发明人】陈本峰
【申请人】美通云动（北京）科技有限公司
【公开日】2015年8月5日
【申请日】2015年4月24日