一种将PC网页转换为移动终端网页的方法及系统技术方案

本申请提供一种将PC网页转换为移动终端网页的方法及系统，其中，所述方法包括：获取PC网页的页面数据，并根据获取的所述页面数据分析所述PC网页的布局样式；对所述PC网页的布局样式进行调节，以与移动终端上的浏览器的尺寸相适配；为获取的所述页面数据中的交互数据分配仅在所述移动终端上生效的元素，并将分配的所述元素显示于所述移动终端的浏览器中；将获取的所述页面数据中无法在移动终端上兼容的图片数据进行切图，并将切图后的图片数据显示于所述移动终端的浏览器中。本申请实施例提供的一种将PC网站转换为移动终端网站的方法及系统，能够避免在移动终端上显示网页时，造成网页排版混乱或者内容重叠的问题。

Method and system for converting PC web page into mobile terminal web page

This application provides a PC page conversion system and method of mobile terminal, \which, the method includes: data acquisition PC web page, and the page according to the data analysis to obtain the PC page layout style; layout style of the PC page is adjusted to the mobile terminal the browser adapts to the size distribution of the data; interactive page data obtained in the only effective in the mobile terminal elements, and the element distribution displayed on the mobile terminal browser; the picture data of the page to get the surface data not in the mobile terminal on the compatibility of map, and the map after the image data is displayed in the browser in the mobile terminal. The embodiment of the present invention provides a method and a system for converting an PC web site into a mobile terminal site, which can avoid the problem of page layout confusion or content overlap when a web page is displayed on a mobile terminal.

【技术实现步骤摘要】
一种将PC网页转换为移动终端网页的方法及系统
本申请涉及移动互联网
，特别涉及一种将PC网页转换为移动终端网页的方法及系统。
技术介绍
浏览器是一种访问互联网上资源的应用软件，信息资源通常以超文本格式存放在网络服务器上，浏览器通过一定格式的网址(例如URL)访问网络服务器，将所需要的资源翻译成网页，网页可以包含图形、音频、视频还有文本。随着移动通信技术的发展，人们越来越频繁使用手机等移动嵌入式设备访问互联网获取信息资源，以便随时随地获取所要资讯。开发手机等移动终端的访问网络技术具有重要的现实意义和广阔的市场前景。目前，谷歌在其Android系统的浏览器中，采用了文字自动换行技术，即在网页缩放时，重新对网页中的文字段落进行重排版，让文字根据当前缩放比例和屏幕的关系自动换行，保证在用户阅读时，不需要对网页进行左右滚屏操作。苹果和微软公司在系统的浏览器中，采取了TextScaling技术，通过在网页首次渲染的时候对网页不同容器中的字体进行调整，保证容器被缩放到屏幕正中时，容器中的文字大小适合用户阅读并且不需要左右滚屏，这一技术成功避免了每次缩放都对网页进行重排版。但是这种技术最大的缺点就是仅仅提升了网页中的大段文字在移动设备上的阅读体验，而对于更多的网页元素如图片或视频，就无能为力了。并且，这些技术上破坏了网页的布局，容易造成网页的排版混乱，或者内容重叠或者大块空白等问题。应该注意，上面对技术背景的介绍只是为了方便对本申请的技术方案进行清楚、完整的说明，并方便本领域技术人员的理解而阐述的。不能仅仅因为这些方案在本申请的
技术介绍
部分进行了阐述而认为上述技术方案为本领域技术人员所公知。
技术实现思路
本申请实施例的目的在于提供一种将PC网站转换为移动终端网站的方法及系统，能够避免在移动终端上显示网页时，造成网页排版混乱或者内容重叠的问题。本申请实施例提供的一种将PC网站转换为移动终端网站的方法及系统是这样实现的：一种将PC网页转换为移动终端网页的方法，包括：获取PC网页的页面数据，并根据获取的所述页面数据分析所述PC网页的布局样式；对所述PC网页的布局样式进行调节，以与移动终端上的浏览器的尺寸相适配；为获取的所述页面数据中的交互数据分配仅在所述移动终端上生效的元素，并将分配的所述元素显示于所述移动终端的浏览器中；将获取的所述页面数据中无法在移动终端上兼容的图片数据进行切图，并将切图后的图片数据显示于所述移动终端的浏览器中。一种将PC网页转换为移动终端网页的系统，包括：布局样式获取单元，用于获取PC网页的页面数据，并根据获取的所述页面数据分析所述PC网页的布局样式；布局样式调节单元，用于对所述PC网页的布局样式进行调节，以与移动终端上的浏览器的尺寸相适配；元素分配单元，用于为获取的所述页面数据中的交互数据分配仅在所述移动终端上生效的元素，并将分配的所述元素显示于所述移动终端的浏览器中；切图单元，用于将获取的所述页面数据中无法在移动终端上兼容的图片数据进行切图，并将切图后的图片数据显示于所述移动终端的浏览器中。本申请实施例提供的一种将PC网页转换为移动终端网页的方法及系统，可以根据移动终端上浏览器的尺寸对网页的布局样式进行实时调整，能够实现网页的随意拉伸和自动排版，避免了转换过程中产生的排版混乱的问题。另外通过对在移动终端上不兼容的数据进行元素分配和重新切图，从而使得在移动终端上无法显示或者无法生效的数据能够正常显示和生效，从而避免了转换后乱码和空白的产生。另外，本申请实施例提供的一种将PC网页转换为移动终端网页的方法及系统并不对PC网页的URL进行更改，从而可以基于同一个URL对PC网页发起访问，有利于搜索引擎的优化。参照后文的说明和附图，详细公开了本申请的特定实施方式，指明了本申请的原理可以被采用的方式。应该理解，本申请的实施方式在范围上并不因而受到限制。在所附权利要求的精神和条款的范围内，本申请的实施方式包括许多改变、修改和等同。针对一种实施方式描述和/或示出的特征可以以相同或类似的方式在一个或更多个其它实施方式中使用，与其它实施方式中的特征相组合，或替代其它实施方式中的特征。应该强调，术语“包括/包含”在本文使用时指特征、整件、步骤或组件的存在，但并不排除一个或更多个其它特征、整件、步骤或组件的存在或附加。附图说明所包括的附图用来提供对本申请实施例的进一步的理解，其构成了说明书的一部分，用于例示本申请的实施方式，并与文字描述一起来阐释本申请的原理。显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。在附图中：图1为本申请实施例提供的一种将PC网页转换为移动终端网页的方法流程图；图2为本申请实施例提供的一种将PC网页转换为移动终端网页的系统功能模块图。具体实施方式为了使本
的人员更好地理解本申请中的技术方案，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其它实施例，都应当属于本申请保护的范围。响应式布局是EthanMarcotte在2010年5月份提出的一个概念。简而言之，响应式布局就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。现有的主流移动设备的浏览器都在这一方向上进行过一些尝试。本申请实施例也可基于该响应式布局的理念，来进行PC网页到移动终端网页的转换。图1为本申请实施例提供的一种将PC网页转换为移动终端网页的方法流程图。虽然下文描述流程包括以特定顺序出现的多个操作，但是应该清楚了解，这些过程可以包括更多或更少的操作，这些操作可以顺序执行或并行执行(例如使用并行处理器或多线程环境)。如图1所示，所述方法包括：S1：获取PC网页的页面数据，并根据获取的所述页面数据分析所述PC网页的布局样式。移动终端设备用户通过移动终端设备访问internet互联网时，首先可以打开移动终端设备上的浏览器，在浏览器中输入需要访问的网址。浏览器有很多版本，例如google、firefox、ie、safari、opar。那么对于移动终端设备而言，苹果自带浏览器是safari浏览器，而安卓系统的机器自带的浏览器一般是uc浏览器，当然也可以下载其他浏览器置于移动终端设备中。开启的浏览器通过网络传输协议(例如HTTP协议)向internet互联网提交链接请求，成功链接至internet之后，所述移动终端便可以根据PC网页的网址，获取到PC网站中网页的页面数据，所述PC网页的页面数据至少可以包括所述PC网页中的HTML代码和CSS代码。S2：对所述PC网页的布局样式进行调节，以与移动终端上的浏览器的尺寸相适配。在获取到PC网页的页面数据后，本申请实施例需要对该页面数据进行相应地转换，才可以将所述PC网页的内容呈现于移动终端的浏览器中。具体地，首先可以对所述PC网页的布局样式进行调节，以与移动终端上的浏览器的尺寸相适配。在本申请实施例中，可以使用CSS3中的MediaQuery(媒介查本文档来自技高网...

【技术保护点】
一种将PC网页转换为移动终端网页的方法，其特征在于，包括：获取PC网页的页面数据，并根据获取的所述页面数据分析所述PC网页的布局样式；对所述PC网页的布局样式进行调节，以与移动终端上的浏览器的尺寸相适配；为获取的所述页面数据中的交互数据分配仅在所述移动终端上生效的元素，并将分配的所述元素显示于所述移动终端的浏览器中；将获取的所述页面数据中无法在移动终端上兼容的图片数据进行切图，并将切图后的图片数据显示于所述移动终端的浏览器中。

【技术特征摘要】
1.一种将PC网页转换为移动终端网页的方法，其特征在于，包括：获取PC网页的页面数据，并根据获取的所述页面数据分析所述PC网页的布局样式；对所述PC网页的布局样式进行调节，以与移动终端上的浏览器的尺寸相适配；为获取的所述页面数据中的交互数据分配仅在所述移动终端上生效的元素，并将分配的所述元素显示于所述移动终端的浏览器中；将获取的所述页面数据中无法在移动终端上兼容的图片数据进行切图，并将切图后的图片数据显示于所述移动终端的浏览器中。2.如权利要求1所述的一种将PC网页转换为移动终端网页的方法，其特征在于，所述PC网页的页面数据至少包括所述PC网页中的HTML代码和CSS代码。3.如权利要求1所述的一种将PC网页转换为移动终端网页的方法，其特征在于，对所述PC网页的布局样式进行调节，以与移动终端上的浏览器的尺寸相适配具体包括：建立浏览器的尺寸与层叠样式表的关联关系；检测移动终端上的浏览器的尺寸，并确定与所述移动终端上的浏览器的尺寸相关联的第一层叠样式表；将所述PC网页的布局样式根据所述第一层叠样式表在所述移动终端的浏览器中进行显示。4.如权利要求3所述的一种将PC网页转换为移动终端网页的方法，其特征在于，所述建立浏览器的尺寸与层叠样式表的关联关系具体包括：将浏览器的尺寸划分为预设数量的尺寸区域；为每个划分的尺寸区域分配对应的层叠样式表。5.如权利要求1所述的一种将PC网页转换为移动终端网页的方法，其特征在于，在将切图后的图片数据显示于所述移动终端的浏览器中的步骤之后，所述方法还包括：将转换后的移动终端网页的信息存储于所述移动终端所处的本地服务器中。6.一种将PC网页转换为移动终端网页的系统，其特...

【专利技术属性】
技术研发人员：唐辉，韩雪松，杨洸，姜迎庭，袁成，
申请(专利权)人：上海新工式网络科技有限公司，
类型：发明
国别省市：上海,31