一种将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中的Media Query(媒介查询)来对PC网页的布局样式进行调节。媒介查询可以通 过不同的媒体类型和条件定义样式表规则，使得CSS能够更精确作用于不同的媒体类型和同一媒体的不同条件，本申请实施例可以运用媒介查询来获取移动终端设备的多种参数信息和语法结构信息，例如：设备的宽和高(device-width，device-heigth)用来显示屏幕/触觉设备；渲染窗口的宽和高(width，heigth)用来显示屏幕/触觉设备；设备的手持方向，横向还是竖向(orientation)；画面比例(aspect-ratio)；设备比例(device-aspect-ratio)对象颜色或颜色列表color，color-index显示屏幕以及设备的分辨率(resolution)等等。

具体地，在媒介查询中可以使用min和max分别表达“大于或等于”和”小于或等于”。例如，width会有min-width和max-width，其中min-width代表宽度的最小值，max-width代表宽度的最大值。媒介查询可以被用在CSS中的@media和@import规则上，例如：

@media screen and(max-width：980px){***CSS区域***}

上行代码的意义为在屏幕的尺寸小于或者等于980px时，可以执行CSS区域中注明的CSS。

在本申请实施例中，可以预先建立浏览器的尺寸与层叠样式表(CSS)的关联关系。具体地，可以将浏览器的尺寸划分为预设数量的尺寸区域。例如可以根据移动终端类型的不同，将移动终端上运行的浏览器的尺寸划分为不同的尺寸区域，这些划分后的尺寸区域例如可以为小于等于320px，大于320px并且小于等于375px，大于375px并且小于等于667px等等。

在划分了不同的尺寸区域后，便可以为每个划分的尺寸区域分配对应的层叠样式表。这样便可以建立不同的尺寸区域与不同的层叠样式表之间的关联关系。

在建立了浏览器的尺寸与层叠样式表的关联关系后，可以检测移动终端上的浏览器的尺寸，并确定与所述移动终端上的浏览器的尺寸相关联的第一层叠样式表。例如，移动终端上的浏览器的尺寸为340px，那么340px落入大于320px并且小于等于375px的尺寸范围内，而该尺寸范围对应的层叠样式表为CSS2，那么所述的CSS2便可以作为该浏览器尺寸对应的第一层叠样式表。

在确定所述移动终端上的浏览器的尺寸对应的第一层叠样式表后，便可以将所述PC网页的布局样式根据所述第一层叠样式表在所述移动终端的浏览器中进行显示。例如，原本的PC网页的布局样式被设计为1024*980，然后检测到移动终端上的浏览器的尺寸为340px，其对应的第一层叠样式表为CSS2，那么便可以将该1024*980的PC网页根据CSS2进行调节，从而可以使得该PC网页的布局方式能够与移动终端的浏览器相适配。

上述的各个尺寸区域对应的层叠样式表可以包含于新建的CSS文件夹中，该CSS文件夹可以包含于在网页的根目录中插入的newdesk文件夹中。这样当需要使用某个层叠样式表时，便可以从新建的所述CSS文件夹中进行调用。

S3：为获取的所述页面数据中的交互数据分配仅在所述移动终端上生效的元素，并将分配的所述元素显示于所述移动终端的浏览器中。

对于PC网页的页面数据中的交互数据部分，例如图片轮播效果和聚焦导航加突出显示效果等，本申请实施例可以通过js来进行处理。具体地，在步骤S2所述的newdesk文件夹中，还可以新建js文件夹，在该文件夹中可以保存需要运行的各个脚本。在本申请实施例中，由于PC网页上原先与交互数据对应的元素无法直接移植到移动终端上，因此可以为获取的所述页面数据中的交互数据分配仅在所述移动终端上生效的元素。

具体地，可以调用jQuery(“#xxx”).remove()这个指令将原先的元素去除，其中“#xxx”即代表原先的元素。在将原先的元素去除后，便可以利用仅在移动终端上生效的元素将其代替，从而可以在移动终端上正常显示交互数据部分。

S4：将获取的所述页面数据中无法在移动终端上兼容的图片数据进行切图，并将切图后的图片数据显示于所述移动终端的浏览器中。

另外，在PC网页的页面数据中的有些图片数据无法直接在移动终端上显示或者在获取PC网页的页面数据时造成了图片数据的丢失，这样在转换到移动终端网页的过程中会出现与移动终端不兼容的情况。在这种情况下，本申请实施例可以在所述的newdesk文件夹中新建images文件夹，并且在所述images文件夹中保存无法在移动终端上兼容的图片数据的切图。这些切图可以视为在PC网页上不存在或者在移动终端上无法显示的替代图片。当移动终端的浏览器显示转换后的网页时，便可以调用images文件夹中相对应的替代图片，从而解决部分图片数据在移动终端上不兼容的问题。

在本申请一优选实施例中，为了使得在移动终端上加载网页页面更加顺畅，速度更加快，可以将转换后的移动终端网页的信息存储于所述移动终端所处的本地服务器中。例如，在本申请实施例中，可以将上述的js和CSS文件夹中的数据保存至移动终端所处的本地服务器中，这样不但能够使得移动终端加载网页的速度加快，同时还能够保证服务器的使用安全，不会因为开发运营单位服务器问题而牵连到移动终端所在的服务器，使服务器的管理更为方便、主动。

由上可见，本申请实施例提供的一种将PC网页转换为移动终端网页的方法，可以根据移动终端上浏览器的尺寸对网页的布局样式进行实时调整，能够实现网页的随意拉伸和自动排版，避免了转换过程中产生的排版混乱的问题。另外通过对在移动终端上不兼容的数据进行元素分配和重新切图，从而使得在移动终端上无法显示或者无法生效的数据能够正常显示和生效，从而避免了转换后乱码和空白的产生。另外，本申请实施例提供的一种将PC网页 转换为移动终端网页的方法及系统并不对PC网页的URL进行更改，从而可以基于同一个URL对PC网页发起访问，有利于搜索引擎的优化。

本申请实施例还提供一种将PC网页转换为移动终端网页的系统。如图2所示，所述系统可以包括：

布局样式获取单元100，用于获取PC网页的页面数据，并根据获取的所述页面数据分析所述PC网页的布局样式；

布局样式调节单元200，用于对所述PC网页的布局样式进行调节，以与移动终端上的浏览器的尺寸相适配；

元素分配单元300，用于为获取的所述页面数据中的交互数据分配仅在所述移动终端上生效的元素，并将分配的所述元素显示于所述移动终端的浏览器中；

切图单元400，用于将获取的所述页面数据中无法在移动终端上兼容的图片数据进行切图，并将切图后的图片数据显示于所述移动终端的浏览器中。

其中，所述PC网页的页面数据至少包括所述PC网页中的HTML代码和CSS代码。

在本申请一优选实施例中，所述布局样式调节单元200具体包括：

关联关系建立模块，用于建立浏览器的尺寸与层叠样式表的关联关系；

层叠样式表确定模块，用于检测移动终端上的浏览器的尺寸，并确定与所述移动终端上的浏览器的尺寸相关联的第一层叠样式表；

显示模块，用于将所述PC网页的布局样式根据所述第一层叠样式表在所述移动终端的浏览器中进行显示。

在本申请一优选实施例中，所述关联关系建立模块具体包括：

尺寸区域划分模块，用于将浏览器的尺寸划分为预设数量的尺寸区域；

层叠样式表分配模块，用于为每个划分的尺寸区域分配对应的层叠样式表。

在本申请一优选实施例中，在所述切图单元400之后，所述系统还包括：

存储单元500，用于将转换后的移动终端网页的信息存储于所述移动终端所处的本地服务器中。

由上可见，本申请实施例提供的一种将PC网页转换为移动终端网页的系统，可以根据移动终端上浏览器的尺寸对网页的布局样式进行实时调整，能够实现网页的随意拉伸和自动排版，避免了转换过程中产生的排版混乱的问题。另外通过对在移动终端上不兼容的数据进行元素分配和重新切图，从而使得在移动终端上无法显示或者无法生效的数据能够正常显示和生效，从而避免了转换后乱码和空白的产生。另外，本申请实施例提供的一种将PC网页 转换为移动终端网页的方法及系统并不对PC网页的URL进行更改，从而可以基于同一个URL对PC网页发起访问，有利于搜索引擎的优化。

在本说明书中，诸如第一和第二这样的形容词仅可以用于将一个元素或动作与另一元素或动作进行区分，而不必要求或暗示任何实际的这种关系或顺序。在环境允许的情况下，参照元素或部件或步骤(等)不应解释为局限于仅元素、部件、或步骤中的一个，而可以是元素、部件、或步骤中的一个或多个等。

上面对本申请的各种实施方式的描述以描述的目的提供给本领域技术人员。其不旨在是穷举的、或者不旨在将本发明限制于单个公开的实施方式。如上所述，本申请的各种替代和变化对于上述技术所属领域技术人员而言将是显而易见的。因此，虽然已经具体讨论了一些另选的实施方式，但是其它实施方式将是显而易见的，或者本领域技术人员相对容易得出。本申请旨在包括在此已经讨论过的本发明的所有替代、修改、和变化，以及落在上述申请的精神和范围内的其它实施方式。

本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于系统实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

本申请可用于众多通用或专用的计算机系统环境或配置中。例如：个人计算机、服务器计算机、手持设备或便携式设备、平板型设备、多处理器系统、基于微处理器的系统、置顶盒、可编程的消费电子设备、网络PC、小型计算机、大型计算机、包括以上任何系统或设备的分布式计算环境等等。

本申请可以在由计算机执行的计算机可执行指令的一般上下文中描述，例如程序模块。一般地，程序模块包括执行特定任务或实现特定抽象数据类型的例程、程序、对象、组件、数据结构等等。也可以在分布式计算环境中实践本申请，在这些分布式计算环境中，由通过通信网络而被连接的远程处理设备来执行任务。在分布式计算环境中，程序模块可以位于包括存储设备在内的本地和远程计算机存储介质中。

虽然通过实施例描绘了本申请，本领域普通技术人员知道，本申请有许多变形和变化而不脱离本申请的精神，希望所附的权利要求包括这些变形和变化而不脱离本申请的精神。