一種將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