網頁內容顯示的實現方法、裝置、瀏覽器及移動終端的製作方法

2023-05-11 02:32:11 2

專利名稱：網頁內容顯示的實現方法、裝置、瀏覽器及移動終端的製作方法
技術領域：
本發明涉及移動通信領域，具體而言，涉及一種網頁內容顯示的實現方法、裝置、瀏覽器及移動終端。
背景技術：
目前，大多數瀏覽器都具有網頁縮放的功能，用戶可以通過網頁縮放功能，對正在瀏覽的網頁頁面進行放大或縮小。當用戶對網頁進行縮放後，網頁的結構將發生變化，而瀏覽器的可視區域大小不會改變。由於網頁的結構發生了變化，而可視區域的大小沒變，因此會造成縮放前的瀏覽區域和縮放後的瀏覽區域不一致，原來正在瀏覽的區域在縮放後會偏移到瀏覽器的其他區域。尤其對於顯示屏幕較小的可攜式電子設備，網頁縮放會使瀏覽區域發生更大的偏移，造成用戶當前瀏覽的區域在縮放後全部或部分進入瀏覽器的不可視區域，用戶在網頁縮放後需要移動網頁才能重新看到縮放前的網頁區域。針對相關技術中網頁縮放後，用戶縮放前瀏覽的區域部分或全部進入瀏覽器的不可視區域，使得用戶需要移動縮放後的網頁才能瀏覽網頁縮放前瀏覽的內容的問題，目前尚未提出有效的解決方案。

發明內容
針對網頁縮放後用戶當前瀏覽區域發生偏移，使得用戶需要移動縮放後的網頁以瀏覽縮放前正在瀏覽的內容的問題，本發明提供了一種網頁內容顯示的實現方案，以至少解決上述問題。根據本發明的一個方面，提供了一種網頁內容顯示的實現方法，包括在接收到輸入的縮放命令後，獲取所述縮放命令對應的縮放中心點；執行所述縮放命令，獲取所述縮放中心點在縮放後相對於所述網頁的第一坐標信息；將縮放後的所述縮放中心點作為顯示窗口的中心點，並結合獲取的所述第一坐標信息，獲取縮放後所述顯示窗口相對於所述網頁的第二坐標信息；根據所述顯示窗口的第二坐標信息，顯示所述網頁在縮放後位於所述顯示窗口的內容。優選地，將縮放後的所述縮放中心點作為當前顯示窗口的中心點，並結合獲取的所述第一坐標信息，獲取縮放後所述顯示窗口相對於所述網頁的第二坐標信息，包括按照以下公式獲取縮放後所述顯示窗口相對於所述網頁的第二坐標信息X2 = Xf-ff/2 ；Y2 = Yf-H/2 ；其中，(X2，Y2)為所述顯示窗口的左上角頂點相對於所述網頁的坐標信息，(Xf，Yf)為上述第一坐標信息，W為所述顯示窗口的寬度，H為所述顯示窗口的高度。 優選地，在執行所述縮放命令之前，所述方法還包括獲取所述縮放中心點在所述網頁中所對應的節點區域中的位置比例；獲取所述縮放中心點在縮放後相對於所述網頁的第一坐標信息，包括獲取縮放後的所述節點區域相對於所述網頁的坐標區域信息；將縮放後的所述縮放中心點作為顯示窗口的中心點，並結合所述獲取的第一坐標信息，獲取縮放後所述顯示窗口相對於所述網頁的第二坐標信息，包括根據所述位置比例以及所述節點區域在縮放後相對於所述網頁的坐標區域信息，獲取縮放後所述顯示窗口相對於所述網頁的第二坐標信息。優選地，獲取所述縮放中心點在所述網頁中所對應的節點區域中的位置比例，包括獲取縮放前所述縮放中心點相對於所述網頁的第三坐標信息(Xpl，Ypl);根據獲取的所述第三坐標信息，定位所述縮放中心點所對應的所述網頁的節點區域；獲取所述節點區域相對於所述網頁的坐標區域(Xn，Yn) (ffn, Hn)，其中，(Xn，Yn)為所述節點區域的左上角頂點相對於所述網頁的坐標信息，fc為所述節點區域的寬度，Hn為所述節點區域的高度；根據所述第三坐標信息和所述節點區域的所述坐標區域，獲取所述縮放中心點在所述節點區域中的位置比例，其中，所述位置比例包括水平方向的比例PercentX和垂直方向的比例PercentY PercentX = (Xpl-Xn) /Wn,PercentY = (Ypl-Yn) /Hn ；獲取縮放後的所述節點區域相對於所述網頁的坐標區域信息，包括獲取縮放後所述節點區域相對於所述網頁的坐標區域(Xm，Ym) (ffm, Hm)，其中，(Xm，Ym)為所述節點區域的左上角頂點相對於所述網頁的坐標信息，Wm為所述節點區域的寬度，Hm為所述節點區域的高度；根據所述節點區域在縮放後相對於所述網頁的坐標區域信息及所述位置比例，獲取縮放後所述顯示窗口相對於所述網頁的第二坐標信息，包括按照以下公式獲取縮放後所述顯示窗口相對於所述網頁的第二坐標信息X2 = Xm+PercentX*ffm-ff/2 ；Y2 = Ym+PercentY*Hm-H/2 ；其中，(X2，Y2)為所述顯示窗口的左上角頂點相對於所述網頁的坐標信息，W為所述顯示窗口的寬度，H為所述顯示窗口的高度。優選地，所述節點區域為預先劃分的所述網頁的文本區域或圖片區域。優選地，在接收到輸入的縮放命令後，獲取所述縮放命令對應的縮放中心點，包括響應用戶通過多點接觸觸摸顯示屏輸入的所述縮放命令，獲取所述用戶接觸的多點的中心點，將所述中心點作為所述縮放中心點；或者，響應用戶輸入的縮放命令，獲取所述縮放命令的縮放中心點，包括響應用戶通過縮放按鍵輸入的所述縮放命令，將所述顯示窗口的中心點作為所述縮放中心點。根據本發明的另一方面，提供了一種網頁內容顯示的實現裝置，包括第一獲取模塊，用於在接收到輸入的縮放命令後，獲取所述縮放命令對應的縮放中心點；第二獲取模塊，用於執行所述縮放命令，獲取所述縮放中心點在縮放後相對於所述網頁的第一坐標信息；第三獲取模塊，用於將縮放後的所述縮放中心點作為顯示窗口的中心點，並結合獲取的所述第一坐標信息，獲取縮放後所述顯示窗口相對於所述網頁的第二坐標信息；顯示模塊，用於根據所述顯示窗口的第二坐標信息，顯示所述網頁在縮放後位於所述顯示窗口的內容。、
優選地，上述第三獲取模塊按照以下公式獲取縮放後所述顯示窗口相對於所述網頁的第二坐標信息X2 = Xf-ff/2 ；Y2 = Yf-H/2 ；其中，(X2，Y2)為所述顯示窗口的左上角頂點相對於所述網頁的坐標信息，(Xf，Yf)為上述第一坐標信息，W為所述顯示窗口的寬度，H為所述顯示窗口的高度。優選地，所述裝置還包括第四獲取模塊，用於在執行所述縮放命令之前，獲取所述縮放中心點在所述網頁中所對應的節點區域中的位置比例；所述第二獲取模塊，還用於獲取縮放後的所述節點區域相對於所述網頁的坐標區域信息；所述第三獲取模塊，還用於根據所述節點區域在縮放後相對於所述網頁的坐標區域信息及所述位置比例，獲取縮放後所述顯示窗口相對於所述網頁的第二坐標信息。優選地，所述第四獲取模塊，包括包括第一獲取單元，用於獲取縮放前所述縮放中心點相對於所述網頁的第三坐標信息(Xpl，Ypl);定位單元，用於根據獲取的所述第三坐標信息，定位所述縮放中心點所對應的所述網頁的節點區域；第二獲取單元，用於獲取所述節點區域相對於所述網頁的坐標區域(Xn，Yn) (ffn, Hn)，其中，(Xn，Yn)為所述節點區域的左上角頂點相對於所述網頁的坐標信息，Wn為所述節點區域的寬度，Hn為所述節點區域的高度；比例確定單元，用於根據所述第一獲取單元獲取的第三坐標信息和第二獲取單元獲取的所述節點區域相對於所述網頁的所述坐標區域，獲取所述縮放中心點在所述節點區域中的位置比例，其中，所述位置比例包括水平方向的比例PercentX和垂直方向的比例PercentY PercentX = (Xpl-Xn) /Wn,PercentY = (Ypl-Yn) /Hn ；上述第二獲取模塊，還用於獲取縮放後所述節點區域相對於所述網頁的坐標區域(Xm, Ym) (ffm, Hm),其中，(Xm, Ym)為所述節點區域的左上角頂點相對於所述網頁的坐標信息，Wm為所述節點區域的寬度，Hm為所述節點區域的高度；上述第三獲取模塊，還用於根據比例確定單元和第二獲取模塊得到的結果，按照以下公式獲取縮放後所述顯示窗口相對於所述網頁的第二坐標信息X2 = Xm+PercentX-ff/2 ；Y2 = Ym+PercentY-H/2 ；其中，(X2，Y2)為所述顯示窗口的左上角頂點相對於所述網頁的坐標信息，W為所述顯示窗口的寬度，H為所述顯示窗口的高度。根據本發明的又一方面，提供了一種瀏覽器，包括本發明提供的上述網頁內容顯示的實現裝置。根據本發明的再一方面，提供了一種移動終端，包括本發明提供的上述瀏覽器。通過本發明，在接收到輸入的縮放命令後，獲取縮放命令對應的縮放中心點；執行縮放命令，獲取縮放中心點在縮放後相對於網頁的第一坐標信息；將縮放後的縮放中心點作為顯示窗口的中心點，獲取縮放後顯示窗口相對於網頁的第二坐標信息；根據顯示窗口的第二坐標信息，顯示網頁在縮放後位於顯示窗口的內容。因此，本發明實現了在網頁縮放後，可以將進行網頁縮放前用戶瀏覽的區域顯示在瀏覽器可視區域，保持用戶的瀏覽的一致性，避免了用戶進行網頁移動操作實現位置調整的麻煩，提高了用戶體驗。


此處所說明的附圖用來提供對本發明的進一步理解，構成本申請的一部分，本發明的示意性實施例及其說明用於解釋本發明，並不構成對本發明的不當限定。在附圖中圖I是根據本發明實施例一的網頁內容顯示的實現方法的流程圖；圖2是根據本發明實施例二的網頁內容顯示的實現方法的流程圖；圖3是根據本發明實施例三的網頁內容顯示的實現裝置的結構框圖；圖4是根據本發明實施例三的優選網頁內容顯示的實現裝置的結構框圖；圖5是根據本發明實施例三的優選第四獲取模塊的結構框圖；圖6是wap頁面放大前的網頁內容顯示的效果圖；圖7是wap頁面放大中的網頁內容顯示的效果圖；圖8是wap頁面放大後並且自動居中對齊後的網頁內容顯示的效果圖；圖9是www頁面縮小前的網頁內容顯示的效果圖；圖10是www頁面縮小中的網頁內容顯示的效果圖；圖11是www頁面縮小後並且自動居中對齊後的網頁內容顯示的效果圖。
具體實施例方式下文中將參考附圖並結合實施例來詳細說明本發明。需要說明的是，在不衝突的情況下，本申請中的實施例及實施例中的特徵可以相互組合。實施例一根據本發明實施例，提供了一種網頁內容顯示的實現方法，可以實現在網頁縮放後，將進行網頁縮放前用戶瀏覽的區域顯示在瀏覽器可視區域，保持用戶的瀏覽的一致性，避免了用戶進行網頁移動操作。圖I是根據本發明實施例一的網頁內容顯示的實現方法的流程圖，如圖I所示，該方法包括以下幾個步驟(步驟S102-步驟S108)步驟S102，在接收到輸入的縮放命令後，獲取縮放命令對應的縮放中心點。步驟S104，執行縮放命令，獲取縮放中心點在縮放後相對於網頁的第一坐標信息。步驟S106，將縮放後的縮放中心點作為顯示窗口的中心點，並結合獲取的第一坐標信息，獲取縮放後顯示窗口相對於網頁的第二坐標信息。步驟S108，根據顯示窗口的第二坐標信息，顯示網頁在縮放後位於顯示窗口的內容。通過本發明實施例，接收到用戶輸入的縮放命令後獲取縮放命令對應的縮放中心點；執行縮放命令後，獲取縮放中心點在縮放後相對於網頁的第一坐標信息；將縮放後的縮放中心點作為當前顯示窗口的中心點，獲取縮放後顯示窗口相對於網頁的第二坐標信息；根據顯示窗口的第二坐標信息，顯示網頁在縮放後位於顯示窗口的內容。因此，本發明實現了在網頁縮放後，可以將進行網頁縮放前用戶瀏覽的區域顯示在瀏覽器可視區域，保持用戶瀏覽的一致性，避免了用戶進行網頁移動操作實現位置調整的麻煩，提高了用戶體驗。
在本發明實施例中，用戶可以通過多點接觸觸摸顯示器進行網頁縮放操作，也可以通過瀏覽器的縮放按鈕進行網頁縮放操作，針對不同的縮放操作方式，在縮放過程中可以選取不同的縮放中心點。在本發明實施例的一個優選實施方式中I)在用戶通過多點接觸觸摸顯示器進行網頁縮放操作的情況下，接收用戶輸入的縮放命令後，獲取縮放命令對應的縮放中心點，可以包括接收用戶通過多點接觸觸摸顯示屏輸入的縮放命令，獲取用戶接觸的多點的中心點，將用戶接觸的多點的中心點作為縮放中心點。2)在用戶通過縮放按鈕進行網頁縮放操作的情況下，接收用戶輸入的縮放命令後，獲取縮放命令對應的縮放中心點，可以包括接收用戶通過縮放按鍵輸入的縮放命令，將顯示窗口的中心點作為縮放中心點。 在接收到輸入的縮放命令後，獲取縮放命令對應的的縮放中心點，獲取到該縮放中心點之後，可以執行縮放命令，獲取縮放中心點在縮放後相對於網頁的第一坐標信息，在本發明實施例中，第一坐標信息可以標記為(Xf，Yf)，(Xf, Yf)為縮放後的縮放中心點相對於網頁的坐標信息。獲取到縮放中心點在縮放後相對於網頁的第一坐標信息後，可以以縮放中心點為顯示窗口的中心，調整當前窗口的位置，使用戶縮放前瀏覽的區域顯示在窗口內的可視區域。在本發明實施例的一個優選實施方式中，將縮放後的縮放中心點作為當前顯示窗口的中心點，獲取縮放後顯示窗口相對於網頁的第二坐標信息，可以包括按照以下公式獲取縮放後所述顯示窗口相對於網頁的第二坐標信息X2 = Xf-ff/2 ；Y2 = Yf-H/2 ；其中，(X2，Y2)為顯示窗口的左上角頂點相對於網頁的坐標信息，(Xf，Yf)為第一坐標信息(即縮放後的縮放中心點相對於網頁的坐標信息)，W為顯示窗口的寬度，H為顯不窗口的聞度。進一步的，為了更精確地將縮放前用戶瀏覽的區域顯示在窗口，可以先定位縮放中心點所對應的網頁的節點區域，並獲取縮放中心點在節點區域中的位置比例，在調整縮放後的窗口位置時，可以根據獲取的比例位置進行調整。因此，在本發明實施例的一個優選實施方式中，在執行縮放命令之前，還可以獲取縮放中心點在網頁中所對應的節點區域中的位置比例。此時，獲取縮放中心點在縮放後相對於所述網頁的第一坐標信息為獲取縮放後的節點區域相對於網頁的坐標區域信息。獲取到位置比例和第一坐標信息後，可以根據位置比例以及節點區域在縮放後相對於網頁的坐標區域信息，獲取縮放後顯示窗口相對於網頁的第二坐標信息。鑑於上述優選實施方式，在本發明實施例的另一個優選實施方式中，可以通過以下步驟獲取所述縮放中心點在所述網頁中所對應的節點區域中的位置比例獲取縮放前縮放中心點相對於網頁的第三坐標信息(Xpl，Ypl)；根據獲取的第三坐標信息，定位縮放中心點所對應的網頁的節點區域；獲取節點區域相對於網頁的坐標區域(Xn，Yn) (ffn, Hn)，其中，(Xn，Yn)為節點區域的左上角頂點相對於網頁的坐標信息，Wn為節點區域的寬度，Hn為節點區域的高度；
根據第三坐標信息和節點區域的坐標區域，獲取縮放中心點在節點區域中的位置比例，其中，位置比例包括水平方向的比例PercentX和垂直方向的比例PercentY PercentX = (Xpl-Xn) /ffn,PercentY = (Ypl-Yn)/Hn。鑑於上述優選實施方式，可以獲取縮 放後節點區域相對於網頁的坐標區域(Xm，Ym) (Wm，Hm)，其中，(Xm, Ym)為節點區域的左上角頂點相對於網頁的坐標信息，Wm為節點區域的寬度，Hm為節點區域的高度。根據節點區域在縮放後相對於所述網頁的坐標區域信息及獲取的位置比例，可以按照以下公式獲取縮放後顯示窗口相對於網頁的第二坐標信息X2 = Xm+PercentX*ffm-ff/2 ；Y2 = Ym+PercentY*Hm-H/2 ；其中，(X2，Y2)為顯示窗口的左上角頂點相對於網頁的坐標信息，W為顯示窗口的寬度，H為顯示窗口的高度。獲取縮放後顯示窗口相對於網頁的第二坐標信息後，根據坐標(Χ2，Υ2)進行位置移動。坐標(Χ2，Υ2)，即瀏覽器的可視窗口移動到的區域坐標，因此將可視窗口移動到該坐標，並顯示網頁在縮放後位於顯示窗口的內容。這樣，使得縮放後還能自動將內容調整到屏幕中心顯示。在本發明實施例的一個優選實施方式中，上述節點區域可以為預先劃分的網頁的文本區域或圖片區域。實施例二根據本發明實施例，可以實現在用戶對網頁比例進行縮放(多點觸摸放大/縮小、或點擊縮放按鈕)之後，對網頁進行自動重新排版，並且將用戶之前正在看的內容對齊到屏幕中央去，從而就省得用戶再手動調整閱讀位置。在本發明實施例中，網頁大小為整個網頁的大小；窗口大小為瀏覽器可視的窗口的大小；窗口位置為瀏覽器可視窗口左上角在整個網頁中的坐標。點的坐標表示為(X，Y)，X為該點的X軸坐標，Y為該點的Y軸坐標。區域的區域坐標表示為(X，Y)，(W, H),其中，X為該區域的左上角的X軸坐標，Y為該區域的左上角的Y軸坐標，W為該區域的寬度，H為該區域的高度。以手機瀏覽器的窗口寬度、高度分別為W、H，並且窗口的位置為(XI，Yl)為例，當前網頁的縮放比例表示為Ζ1。此時用戶對網頁進行縮放(放大或縮小)操作，通過多點觸摸或者縮放按鈕均可，並且操作後的縮放比例為Ζ2。在本發明實施例中，以用戶使用兩點觸摸進行縮放為例進行說明。圖2是根據本發明實施例二的網頁內容顯示的實現方法的流程圖，如圖2所示該方法可以包括以下幾個步驟(步驟S202-步驟S214)。步驟S202，計算用戶兩點觸摸的中心點在屏幕中的坐標，S卩(Χρ，Υρ)，並計算相對整個網頁的坐標為(Xp+Xl, Yp+Yl)即(Xpl, Υρ1)ο在獲取到用戶的縮放操作後，該步驟開始計算用戶兩點觸摸的中心點在屏幕中的坐標。其中，兩點觸摸的中心點的坐標(Xp，Yp)是通過以下公式計算的瀏覽器給出用戶在屏幕上觸摸的兩個點的坐標，分別為(Xa，Ya)以及(Xb，Yb)，然後計算Xp =(Xa+Xb)/2, Yp = (Ya+Yb)/2。步驟S204,通過計算所得的中心點相對整個網頁的坐標(Xpl, Ypl),定位坐標(XpLYpl)所對應的網頁中的節點(文本、圖片等)，該節點可以標記為「Node」。步驟S206,計算該Node的坐標區域(Xn, Yn) (ffn, Hn)。其中，Xn為節點區域的左上角的X軸坐標，Yn為節點區域的左上角的Y軸坐標，Wn為節點區域的寬度，Hn為節點區域的高度。關於節點的區域的計算，根據HTML4. I以及CSS2. I的官方規範對網頁進行排版，然後根據Dom規範找出該元素(文本、圖片等)對應的節點，然後瀏覽器會給出該節點的排版區域，該區域就是X坐標、y坐標、寬度、高度。通過該方式，可以得到Node的坐標區域。 步驟S208,計算中心點在Node節點中的位置比例。其中，該位置比例可以通過如下公式確定水平方向中的比例為PercentX = (Xpl-Xn)/Wn，垂直方向中的比例為PercentY = (Yp 1-Yn)/Hn0步驟S210，頁面進行縮放，並重新排版，由於排版時會對屏幕寬度進行折行，所以排版結構會有所變化。在新排版的結果下，計算Node的新坐標區域(Xm, Ym) (ffm, Hm)。該步驟響應用戶的縮放操作(例如用戶的兩點觸摸縮放動作)進行縮放，在進行縮放和排版之前，還會記錄前述步驟得到的各個參數。Node的新坐標區域的獲取方式與步驟206中的描述相同。步驟S212，根據步驟S208中計算所得的比例值，以及屏幕寬度、高度，計算新的窗口位置。新的窗口位置為X2 = Xm+ffm^PercentX-ff/2, Y2 = Ym+Hm*PercentY-H/2,即這個時候設置可視區域窗口的位置為(X2，Y2)。步驟S214,根據窗口的坐標為(Χ2,Υ2)進行位置移動。坐標(Χ2，Υ2)，即瀏覽器的可視窗口移動到的區域坐標。根據計算所得的窗口的坐標，將可視窗口移動到該坐標，並顯示網頁在縮放後位於顯示窗口的內容。這樣，使得縮放後還能自動將內容調整到屏幕中心顯示，保存用戶的瀏覽的一致性。可以發現，本發明通過上述步驟，實現了網頁縮放後的自動居中對齊。上述介紹的是通過多點觸摸進行縮放的情況，對於用戶使用的是普通縮放按鈕進行縮放的情況，即沒有一個兩點的中心點。此時的步驟與上述步驟基本一致，區別在於步驟S202中的兩點觸摸中心點(Χρ，Υρ)，不再是兩點的中心點，而是屏幕的中心點(窗口的中心點)，即Xp = W/2，Yp = Η/2，其餘步驟基本相同。實施例三對應於本發明上述實施例提供的網頁內容顯示的實現方法，本發明實施例還提供了一種網頁內容顯示的實現裝置。圖3是根據本發明實施例三的網頁內容顯示的實現裝置的結構框圖，如圖3所示，該裝置可以包括第一獲取模塊10、第二獲取模塊20、第三獲取模塊30和顯示模塊40。第一獲取模塊10，用於在接收到輸入的縮放命令後，獲取縮放命令對應的縮放中心點；第二獲取模塊20，與第一獲取模塊10相連接，用於執行縮放命令，獲取縮放中心點在縮放後相對於網頁的第一坐標信息；第三獲取模塊30，與第二獲取模塊20相連接，用於將縮放後的縮放中心點作為顯示窗口的中心點，並結合所述獲取的第一坐標信息，獲取縮放後顯示窗口相對於網頁的第二坐標信息；顯示模塊40，與第三獲取模塊30相連接，用於根據顯示窗口的第二坐標信息，顯示網頁在縮放後位於顯示窗口的內容。通過本發明實施例，響應用戶輸入的縮放命令，獲取縮放命令的縮放中心點；執行縮放命令後，獲取縮放中心點在縮放後相對於網頁的第一坐標信息；將縮放後的縮放中心點作為當前顯示窗口的中心點，獲取縮放後顯示窗口相對於網頁的第二坐標信息；根據顯示窗口的第二坐標信息，顯示網頁在縮放後位於顯示窗口的內容。實現了在網頁縮放後，將進行網頁縮放前用戶瀏覽的區域顯示在瀏覽器可視區域，保持用戶瀏覽的一致性，避免了用戶進行網頁移動操作，提高了用戶體驗。在本發明實施例中，用戶可以通過多點接觸觸摸顯示器進行網頁縮放操作，也可以通過瀏覽器的縮放按鈕進行網頁縮放操作，針對不同的縮放操作方式，在縮放過程中可以選取不同的縮放中心點。在本發明實施例的一個優選實施方式中，在用戶通過多點接觸觸摸顯示器進行網頁縮放操作的情況下，第一獲取模塊10可以響應用戶通過多點接觸觸摸顯示屏輸入的縮放命令，獲取用戶接觸的多點的中心點，將用戶接觸的多點的中心點作為縮放中心點。在用戶通過縮放按鈕進行網頁縮放操作的情況下，第一獲取模塊10，可以響應用戶通過縮放按鍵輸入的縮放命令，將顯示窗口的中心點作為縮放中心點。響應用戶輸入的縮放命令，獲取縮放命令的縮放中心點之後，可以執行縮放命令，獲取縮放中心點在縮放後相對於網頁的第一坐標信息，在本發明實施例中，第一坐標信息可以標記為(Xf，Yf)，(Xf, Yf)為縮放後的縮放中心點相對於網頁的坐標信息。獲取到縮放中心點在縮放後相對於網頁的第一坐標信息後，可以以縮放中心為顯示窗口的中心，調整當前窗口的位置，使用戶縮放前瀏覽的區域顯示在窗口內的可視區域。在本發明實施例的一個優選實施方式中，第三獲取模塊30可以按照以下公式獲取縮放後顯示窗口相對於網頁的第二坐標信息X2 = Xf-ff/2 ；Y2 = Yf-H/2 ；其中，(X2，Y2)為顯示窗口的左上角頂點相對於網頁的坐標信息，(Xf, Yf)為上述第一坐標信息(即縮放後的縮放中心的坐標信息)，W為顯示窗口的寬度，H為顯示窗口的高度。進一步的，為了更精確地將縮放前用戶瀏覽的區域顯示在窗口，可以先定位縮放中心點所對應的網頁的節點區域，並獲取縮放中心點在節點區域中的位置比例，在調整縮放後的窗口位置時，可以根據獲取的比例位置進行調整。在本發明實施例的一個優選實施方式中，如圖4所示，該裝置還可以包括第四獲取模塊50，與第一獲取模塊10相連接，用於在執行縮放命令之前，獲取縮放中心點在網頁中所對應的節點區域中的位置比例；第二獲取模塊20，還用於獲取縮放後的節點區域相對於網頁的坐標區域信息；第三獲取模塊30，還用於根據上述節點區域在縮放後相對於網頁的坐標區域信息及獲取的位置比例，獲 取縮放後顯示窗口相對於網頁的第二坐標信息。鑑於上述優選實施方式，如圖5所示，第四獲取模塊50可以包括第一獲取單元502，用於獲取縮放前縮放中心點相對於網頁的第三坐標信息(Xpl，Ypl);定位單元504，與第一獲取單元502相連接，用於根據獲取的第三坐標信息，定位縮放中心點所對應的網頁的節點區域；第二獲取單元506，與定位單元504相連接，用於獲取節點區域相對於網頁的坐標區域(Xn，Yn) (ffn, Hn)，其中，(Xn，Yn)為節點區域的左上角頂點相對於網頁的坐標信息，Wn為節點區域的寬度，Hn為節點區域的高度；比例確定單元508，與第二獲取單元506相連接，用於根據第一獲取單元502獲取的第三坐標信息和第二獲取單元506獲取的節點區域相對於網頁的坐標區域，獲取縮放中心點在上述節點區域中的位置比例，其中，該位置比例包括水平方向的比例PercentX和垂直方向的比例PercentY PercentX = (Xpl-Xn) /ffn,PercentY = (Ypl-Yn)/Hn。鑑於上述優選實施方式，上述第二獲取模塊20，還用於獲取縮放後縮放中心點所對應的網頁的節點區域相對於所述網頁的坐標區域(Xm, Ym) (ffm, Hm),其中，(Xm, Ym)為該節點區域的左上角頂點相對於網頁的坐標信息，Wm為該節點區域的寬度，Hm為該節點區域的高度。上述第三獲取模塊30，還用於根據比例確定單元508和第二獲取模塊20得到的結果，按照以下公式獲取縮放後顯示窗口相對於網頁的第二坐標信息X2 = Xm+PercentX*ffm-ff/2 ；Y2 = Ym+PercentY*Hm-H/2 ；其中，(X2，Y2)為顯示窗口的左上角頂點相對於網頁的坐標信息，W為顯示窗口的寬度，H為顯示窗口的高度。根據本發明實施例，提供了一種瀏覽器，可以包括本發明實施例提供的上述網頁內容顯示的實現裝置。根據本發明實施例，還提供了一種可攜式電子設備，例如是移動終端，可以包括本發明實施例提供的上述裝置。通過本發明上述實施例提供的網頁內容的顯示方案，可以實現縮放後的網頁內容自動居中對齊，方便用戶瀏覽。對了更具體的描述本發明實施的效果，下面通過兩個具體實例，對本發明實施例的提供的網頁內容的顯示方案的效果進行描述。圖6是wap頁面放大前的網頁內容顯示的效果圖，用戶對如圖6所示的頁面進行多點觸摸放大，該縮放的中心點位於圖中的「瀏覽原圖」，放大之後區域發生變化，如圖7所示(圖7是wap頁面放大中的網頁內容顯示的效果圖)，通過本發明實施例提供的方案對該頁面進行重新折行排版，通過計算並移動視窗位置，將「瀏覽原圖」對準在屏幕中間處，達到如圖8所示的效果，圖8是wap頁面放大後並且自動居中對齊後的網頁內容實現的效果圖。圖9是www頁面縮小前的網頁內容顯示的效果圖，用戶對如圖9所示的頁面進行多點觸摸縮小，該縮放的中心點在「UC瀏覽器「那一段文本裡，然後放大之後區域發生變化，如圖10所示(圖10是WWW頁面縮小中的網頁內容顯示的效果圖)，通過本發明實施例提供的方案對該頁面進行重新折行排版，通過計算並移動視窗位置，將「UC瀏覽器」那段文本對準在屏.中間處，達到如圖11所不的效果，圖11是www頁面縮小後並且自動居中對齊後的網頁內容顯示的效果圖。從以上的描述中，可以看出，本發明實現了如下技術效果在接收到輸入的縮放命令後，獲取縮放命令的縮放中心點；執行縮放命令後，獲取縮放中心點在縮放後相對於網頁、的第一坐標信息；將縮放後的縮放中 心點作為當前顯示窗口的中心點，獲取縮放後顯示窗口相對於網頁的第二坐標信息；根據顯示窗口的第二坐標信息，顯示網頁在縮放後位於顯示窗口的內容。本發明實現了在網頁縮放後，將進行網頁縮放前用戶瀏覽的區域顯示在瀏覽器可視區域，保持用戶瀏覽的一致性，進一步的，可以先定位縮放中心點所對應的網頁的節點區域，並獲取縮放中心點在節點區域中的位置比例，在調整縮放後的窗口位置時，可以根據獲取的比例位置進行調整，實現了更精確地將縮放前用戶瀏覽的區域顯示在窗口。本發明避免了用戶進行網頁移動操作，提高了用戶體驗。顯然，本領域的技術人員應該明白，上述的本發明的各模塊或各步驟可以用通用的計算裝置來實現，它們可以集中在單個的計算裝置上，或者分布在多個計算裝置所組成的網絡上，可選地，它們可以用計算裝置可執行的程序代碼來實現，從而，可以將它們存儲在存儲裝置中由計算裝置來執行，並且在某些情況下，可以以不同於此處的順序執行所示出或描述的步驟，或者將它們分別製作成各個集成電路模塊，或者將它們中的多個模塊或步驟製作成單個集成電路模塊來實現。這樣，本發明不限制於任何特定的硬體和軟體結合。以上所述僅為本發明的優選實施例而已，並不用於限制本發明，對於本領域的技術人員來說，本發明可以有各種更改和變化。凡在本發明的精神和原則之內，所作的任何修改、等同替換、改進等，均應包含在本發明的保護範圍之內。
權利要求
1.一種網頁內容顯示的實現方法，其特徵在於，包括 在接收到輸入的縮放命令後，獲取所述縮放命令對應的縮放中心點； 執行所述縮放命令，獲取所述縮放中心點在縮放後相對於所述網頁的第一坐標信息；將縮放後的所述縮放中心點作為顯示窗口的中心點，並結合獲取的所述第一坐標信息，獲取縮放後所述顯示窗口相對於所述網頁的第二坐標信息； 根據所述顯示窗口的第二坐標信息，顯示所述網頁在縮放後位於所述顯示窗口的內容。
2.根據權利要求I所述的方法，其特徵在於，所述將縮放後的所述縮放中心點作為顯 示窗口的中心點，並結合獲取的所述第一坐標信息，獲取縮放後所述顯示窗口相對於所述網頁的第二坐標信息，包括 按照以下公式獲取縮放後所述顯示窗口相對於所述網頁的第二坐標信息X2 = Xf-ff/2 ；Y2 = Yf-H/2 ； 其中，(X2，Y2)為所述顯示窗口的左上角頂點相對於所述網頁的坐標信息，(Xf, Yf)為所述第一坐標信息，W為所述顯示窗口的寬度，H為所述顯示窗口的高度。
3.根據權利要求I所述的方法，其特徵在於， 在執行所述縮放命令之前，所述方法還包括獲取所述縮放中心點在所述網頁中所對應的節點區域中的位置比例； 獲取所述縮放中心點在縮放後相對於所述網頁的第一坐標信息，包括獲取縮放後的所述節點區域相對於所述網頁的坐標區域信息； 將縮放後的所述縮放中心點作為顯示窗口的中心點，並結合獲取的所述第一坐標信息，獲取縮放後所述顯示窗口相對於所述網頁的第二坐標信息，包括根據所述位置比例以及所述節點區域在縮放後相對於所述網頁的坐標區域信息，獲取縮放後所述顯示窗口相對於所述網頁的第二坐標信息。
4.根據權利要求3所述的方法，其特徵在於， 獲取所述縮放中心點在所述網頁中所對應的節點區域中的位置比例，包括 獲取縮放前所述縮放中心點相對於所述網頁的第三坐標信息(XpLYpl)； 根據獲取的所述第三坐標信息，定位所述縮放中心點所對應的所述網頁的所述節點區域； 獲取所述節點區域相對於所述網頁的坐標區域(Xn，Yn) (ffn, Hn)，其中，(Xn，Yn)為所述節點區域的左上角頂點相對於所述網頁的坐標信息，Wn為所述節點區域的寬度，Hn為所述節點區域的高度； 根據所述第三坐標信息和所述節點區域相對於所述網頁的所述坐標區域，獲取所述縮放中心點在所述節點區域中的所述位置比例，其中，所述位置比例包括水平方向的比例PercentX和垂直方向的比例PercentY PercentX = (Xpl-Xn)/ffn,PercentY = (Ypl-Yn)/Hn ； 獲取縮放後的所述節點區域相對於所述網頁的坐標區域信息，包括 獲取縮放後所述節點區域相對於所述網頁的坐標區域(Xm,Ym) (Wm,Hm),其中，(Xm,Ym)為所述節點區域的左上角頂點相對於所述網頁的坐標信息，Wm為所述節點區域的寬度，Hm為所述節點區域的高度； 根據所述節點區域在縮放後相對於所述網頁的坐標區域信息及所述位置比例，獲取縮放後所述顯示窗口相對於所述網頁的第二坐標信息，包括 按照以下公式獲取縮放後所述顯示窗口相對於所述網頁的第二坐標信息X2 = Xm+PercentX*ffm-ff/2 ；Y2 = Ym+PercentY*Hm-H/2 ； 其中，(X2，Y2)為所述顯示窗口的左上角頂點相對於所述網頁的坐標信息，W為所述顯示窗口的寬度，H為所述顯示窗口的高度。
5.根據權利要求3所述的方法，其特徵在於，所述節點區域為預先劃分的所述網頁的文本區域或圖片區域。
6.根據權利要求I至5中任一項所述的方法，其特徵在於，在接收到輸入的縮放命令後，獲取所述縮放命令對應的縮放中心點，包括 響應用戶通過多點觸摸輸入的所述縮放命令，獲取所述用戶接觸的多點的中心點，將所述中心點作為所述縮放中心點；或者 響應用戶通過縮放按鍵輸入的所述縮放命令，將所述顯示窗口的中心點作為所述縮放中心點。
7.—種網頁內容顯示的實現裝置，其特徵在於，包括 第一獲取模塊，用於在接收到輸入的縮放命令後，獲取所述縮放命令對應的縮放中心佔. 第二獲取模塊，用於執行所述縮放命令，獲取所述縮放中心點在縮放後相對於所述網頁的第一坐標信息； 第三獲取模塊，用於將縮放後的所述縮放中心點作為顯示窗口的中心點，並結合獲取的所述第一坐標信息，獲取縮放後所述顯示窗口相對於所述網頁的第二坐標信息； 顯示模塊，用於根據所述顯示窗口的第二坐標信息，顯示所述網頁在縮放後位於所述顯示窗口的內容。
8.根據權利要求7所述的裝置，其特徵在於，所述第三獲取模塊按照以下公式獲取縮放後所述顯示窗口相對於所述網頁的第二坐標信息X2 = Xf-ff/2 ；Y2 = Yf-H/2 ； 其中，(X2，Y2)為所述顯示窗口的左上角頂點相對於所述網頁的坐標信息，(Xf, Yf)所述第一坐標信息，W為所述顯示窗口的寬度，H為所述顯示窗口的高度。
9.根據權利要求7或8所述的裝置，其特徵在於， 所述裝置還包括第四獲取模塊，用於在執行所述縮放命令之前，獲取所述縮放中心點在所述網頁中所對應的節點區域中的位置比例； 所述第二獲取模塊，還用於獲取縮放後的所述節點區域相對於所述網頁的坐標區域信息； 所述第三獲取模塊，還用於根據所述節點區域在縮放後相對於所述網頁的坐標區域信息及所述位置比例，獲取縮放後所述顯示窗口相對於所述網頁的第二坐標信息。
10.根據權利要求9所述的裝置，其特徵在於， 所述第四獲取模塊，包括 第一獲取單元，用於獲取縮放前所述縮放中心點相對於所述網頁的第三坐標信息(XpLYpl)； 定位單元，用於根據獲取的所述第三坐標信息，定位所述縮放中心點所對應的所述網頁的所述節點區域； 第二獲取單元，用於獲取所述節點區域相對於所述網頁的坐標區域(Xn，Yn) (ffn, Hn)，其中，(Xn, Yn)為所述節點區域的左上角頂點相對於所述網頁的坐標信息，fc為所述節點區域的寬度，Hn為所述節點區域的高度；比例確定單元，用於根據所述第一獲取單元獲取的第三坐標信息和第二獲取單元獲取的所述節點區域相對於所述網頁的所述坐標區域，獲取所述縮放中心點在所述節點區域中的所述位置比例，其中，所述位置比例包括水平方向的比例PercentX和垂直方向的比例PercentY PercentX = (Xpl-Xn)/Wn,PercentY = (Ypl-Yn)/Hn ； 所述第二獲取模塊，還用於獲取縮放後所述節點區域相對於所述網頁的坐標區域(Xm，Ym) (Wm, Hm),其中，(Xm, Ym)為所述節點區域的左上角頂點相對於所述網頁的坐標信息，Wm為所述節點區域的寬度，Hm為所述節點區域的高度； 所述第三獲取模塊，還用於根據所述比例確定單元和所述第二獲取模塊得到的結果，按照以下公式獲取縮放後所述顯示窗口相對於所述網頁的第二坐標信息X2 = Xm+PercentX*ffm-ff/2 ；Y2 = Ym+PercentY*Hm-H/2 ； 其中，(X2，Y2)為所述顯示窗口的左上角頂點相對於所述網頁的坐標信息，W為所述顯示窗口的寬度，H為所述顯示窗口的高度。
11.一種瀏覽器，其特徵在於，包括權利要求7至10中任一項所述的裝置。
12.—種移動終端，其特徵在於，包括權利要求11所述的瀏覽器。
全文摘要
本發明公開了一種網頁內容顯示的實現方法、裝置、瀏覽器及移動終端。其中，該方法包括在接收到輸入的縮放命令後，獲取縮放命令對應的縮放中心點；執行縮放命令，獲取縮放中心點在縮放後相對於網頁的第一坐標信息；將縮放後的縮放中心點作為顯示窗口的中心點，並結合獲取的第一坐標信息，獲取縮放後顯示窗口相對於網頁的第二坐標信息；根據顯示窗口的第二坐標信息，顯示網頁在縮放後位於顯示窗口的內容。通過本發明，在網頁縮放後，將進行網頁縮放前用戶瀏覽的區域顯示在瀏覽器可視區域，避免了用戶進行網頁移動，提高了用戶體驗。
文檔編號G06F17/30GK102637198SQ20121004896
公開日2012年8月15日 申請日期2012年2月28日 優先權日2012年2月28日
發明者李海翔, 梁捷 申請人:優視科技有限公司