一種移動端前端開發(fā)多屏適配方法
【專利摘要】本發(fā)明提供了一種移動端前端開發(fā)多屏適配方法，具體包括以下步驟：步驟1：通過JavaScript獲取移動端屏幕的設備像素縮放比值；步驟2：根據(jù)步驟1中獲得的設備像素縮放比值對應調整頁面屬性；步驟3：加載不同尺寸的圖片，并生成視覺稿；步驟4：前端開發(fā)時通過Sass的函數(shù)和混合宏將視覺稿中彈性元素的單位進行轉換，并生成最終效果圖。本發(fā)明將移動端的頁面內任何需要彈性適配的元素的尺寸均換算為rem進行布局；當頁面渲染時，根據(jù)頁面有效寬度進行計算，并對應調整rem的大小，動態(tài)縮放以達到適配的效果，有效解決了因為頁面寬度固定，無法滿足大小屏展示效果的問題。
【專利說明】
一種移動端前端開發(fā)多屏適配方法
技術領域
[0001]本發(fā)明涉及網(wǎng)頁設計技術領域，尤其涉及一種移動端前端開發(fā)多屏適配方法。
【背景技術】
[0002]傳統(tǒng)的APP開發(fā)轉向移動端Html5頁面開發(fā)，移動端設備發(fā)展迅猛，面對不同分辨率的手機，面對不同屏幕尺寸的手機，很難有比較好的辦法來實現(xiàn)移動端高清、多屏適配方案，傳統(tǒng)開發(fā)有如下幾種方法:1.固定頁面寬度，禁止縮放，這種方案頁面寬度固定，頁面單一，無法滿足多屏效果。2.固定高度，寬度自適應，以較小寬度的視覺稿作為參照布局，當屏幕變化時，拉伸或填充空白來補充容器。3.視覺稿、頁面寬度使用統(tǒng)一寬度，利用瀏覽器自身縮放來完成適配。傳統(tǒng)開發(fā)中存在很多問題，因此開發(fā)一種頁面自適應的解決方案迫在眉睫，如申請?zhí)枮?201310608370.9的中國專利公開了一種頁面布局自適應方法及裝置，該發(fā)明實施例插入用于調整頁面布局的程序代碼;基于插入的所述程序代碼，獲取移動終端的屏幕顯示寬度;根據(jù)獲取的屏幕顯示寬度，按照預設比例調整網(wǎng)頁的頁面顯示寬度;根據(jù)所述頁面顯示寬度，調整組成網(wǎng)頁頁面的各元素的顯示寬度，同時設置所述元素的顯示位置為浮動顯示，還提供了一種頁面布局自適應裝置，包括:代碼插入模塊，用于插入用于調整頁面布局的程序代碼;參數(shù)獲取模塊，用于基于插入的所述程序代碼，獲取移動終端的屏幕顯示寬度;布局調整模塊，用于根據(jù)獲取的屏幕顯示寬度，按照預設比例調整網(wǎng)頁的頁面顯示寬度;根據(jù)所述頁面顯示寬度，調整組成網(wǎng)頁頁面的各元素的顯示寬度，同時設置所述元素的顯示位置為浮動顯示。該發(fā)明通過程序代碼與預設比例來調整網(wǎng)頁的頁面寬度，可以達到一定的適配效果，但是不適用于所有的屏幕寬度，僅適用于預設比例的寬度，并且沒有考慮到網(wǎng)頁轉換時像素的問題，在實際使用的過程中仍存在較大的局限性。
[0003]又如申請?zhí)?201510679492.6的中國專利提供一種面向多終端的自適應網(wǎng)頁布局方法，包括如下步驟:步驟10、創(chuàng)建和編輯頁面布局的CSS，給CSS預設切換節(jié)點；步驟20、設置頁面的樣式布局架構，將圖標和標題嵌套進各自對應的功能模塊內；步驟30、編寫節(jié)點切換的JavaScript腳本，對終端屏幕的分辨率進行判斷并根據(jù)不同分辨率自動為網(wǎng)頁最外層的全局對象切換相應樣式的節(jié)點，呈現(xiàn)出對應的頁面布局。還提供了一種面向多終端的自適應網(wǎng)頁布局裝置，包括預設模塊、布局模塊和切換模塊:所述預設模塊:用于創(chuàng)建和編輯頁面布局的CSS，給CSS預設切換節(jié)點；所述布局模塊:用于設置頁面的樣式布局架構，并將圖標和標題嵌套進各自對應的功能模塊內；所述切換模塊:用于編寫節(jié)點切換的JavaScript腳本，對終端屏幕的分辨率進行判斷并根據(jù)不同分辨率自動為網(wǎng)頁最外層的全局對象切換相應樣式的節(jié)點，呈現(xiàn)出對應的頁面布局。該發(fā)明通過判斷終端屏幕的分辨率自動切換樣式節(jié)點，需要提前預設多種樣式，方法繁瑣，并且沒有考慮到普通屏與高清屏中設備像素縮放比等的差別，自適應頁面的效果不佳。

【發(fā)明內容】

[0004]為克服現(xiàn)有技術中存在的無法兼容多屏設備，做不到頁面統(tǒng)一且在高清屏下圖片模糊，無法解決像素邊框的問題，本發(fā)明提供了一種移動端前端開發(fā)多屏適配方法，其具體技術方案如下:
[0005]—種移動端前端開發(fā)多屏適配方法，包括以下步驟:
[000?]步驟1:通過JavaScript獲取移動端屏幕的設備像素縮放比值；
[0007]步驟2:根據(jù)步驟I中獲得的設備像素縮放比值對應調整頁面屬性；
[0008]步驟3:加載不同尺寸的圖片，并生成視覺稿；
[0009]步驟4:前端開發(fā)時將視覺稿中的彈性元素的單位進行轉換，并生成最終效果圖。
[0010]在此基礎上，所述步驟2中進一步包括:根據(jù)步驟I中獲得的設備像素縮放比值計算出HTML的基準值，進而相應的進行頁面屬性的調整。
[0011]在此基礎上，所述HTML的基準值=屏幕寬度*設備像素縮放比值/16。
[0012]在此基礎上，所述HTML的基準值與動態(tài)設備像素縮放比值——對應，并均寫入HTML0
[0013]在此基礎上，所述步驟2中還進一步包括:根據(jù)步驟I獲得的設備像素縮放比值動態(tài)設置頁面的viewport，進而相應的進行頁面屬性的調整。
[0014]在此基礎上，所述viewport根據(jù)不同的設備像素比值設置有不同的scale值。
[0015]在此基礎上，所述scale值=I/設備像素縮放比值。
[0016]在此基礎上，所述步驟4的具體步驟為通過Sass的函數(shù)和混合宏將視覺稿中彈性元素的單位進行轉換。
[0017]在此基礎上，所述視覺稿中彈性元素的單位為像素單位。
[0018]在此基礎上，所述步驟4中將像素單位轉換為rem。
[0019]與現(xiàn)有技術相比，本發(fā)明的有益效果是:
[0020]1、本發(fā)明通過JavaScript獲取移動端屏幕的設備像素縮放比值;并根據(jù)獲得的設備像素縮放比值對應調整頁面屬性;加載不同尺寸的圖片，并生成視覺稿;前端開發(fā)時將視覺稿中的彈性元素的單位進行轉換，并生成最終效果圖。本發(fā)明可以根據(jù)移動端屏幕動態(tài)縮放頁面，能夠滿足大小屏的展示效果，也給設計帶來無限的可能性。
[0021]2、本發(fā)明中通過Sass的函數(shù)和混合宏將視覺稿中彈性元素的單位進行轉換，該視覺稿中的彈性元素的尺寸均換算為rem進行布局，當頁面渲染時，根據(jù)頁面有效寬度進行計算，調整rem的大小，動態(tài)縮放以達到適配的效果，該頁面可以完美兼容多屏設備，并做到頁面的一致性。
[0022]3、本發(fā)明中根據(jù)設備像素縮放比來計算HTML的基準值和頁面viewport中的scale值，其中HTML的基準值=屏幕寬度*設備像素縮放比值/16 ,scale值=I/設備像素縮放比值，本發(fā)明可以解決圖片在普通屏和高清屏(retina)切換時，像素邊框和圖片模糊的問題。
[0023]4、本發(fā)明在進行頁面渲染時，根據(jù)頁面有效寬度計算來調整rem的大小，通過動態(tài)縮放以到達適配的效果，無需運用媒體差選來動態(tài)改變rem基數(shù)，可以兼容到所有設備的各種尺寸，因此可以節(jié)約更多的時間并提供更好的用戶體驗。
【附圖說明】
[0024]圖1是本發(fā)明一種移動端前端開發(fā)多屏適配方法的流程示意圖。
【具體實施方式】
[0025]以下結合附圖和實施例，對本發(fā)明進行進一步詳細說明。應當理解，此處所描述的具體實施例僅用以解釋本發(fā)明，并不用于限定本發(fā)明。
[0026]本發(fā)明披露了一種移動端前端開發(fā)多屏適配方法，如圖1所示為該方法的流程示意圖。本方法包括以下步驟:
[0027]步驟1:通過JavaScript獲取移動端屏幕的設備像素縮放比值；
[0028]步驟2:根據(jù)步驟I中獲得的設備像素縮放比值對應調整頁面屬性；
[0029]步驟3:加載不同尺寸的圖片，并生成視覺稿；
[0030]步驟4:前端開發(fā)時將視覺稿中的彈性元素的單位進行轉換，并生成最終效果圖。[0031 ] 具體的步驟1:通過JavaScript的window.devicePixelRat1來獲取移動端屏幕的設備像素縮放比值;在JavaScript文件中根據(jù)window.devicePixelRat1S卩可獲得屏幕的設備像素縮放比(dpr) ,window.devicePixeIRat1是設備上物理像素和設備獨立像素(device-1ndependent pixels(dips))的比例。公式表不為window.devicePixelRat1 =物理像素/dips。
[0032]具體的步驟2:根據(jù)步驟I中獲得的設備像素縮放比值對應調整頁面屬性，該頁面屬性包括HTML的基準值和頁面的viewport。因此步驟2中進一步包括:根據(jù)步驟I中獲得的設備像素縮放比值計算出HTML的基準值，進而相應的進行頁面屬性的調整。優(yōu)選的，所述HTML的基準值=屏幕寬度*設備像素縮放比值/16，優(yōu)選地，根據(jù)JavaScript文件中的document.documentElement.cl ientWidth獲取屏幕寬度，基于不同的設備，設備像素縮放比不斷變化，根據(jù)步驟I獲得的相應的設備像素縮放比，進而計算得出的HTML的基準值，該HTML的基準值與動態(tài)設備像素縮放比值一一對應，并將所有計算得出的HTML均寫入HTML中保存。步驟2中還進一步包括:根據(jù)步驟I獲得的設備像素縮放比值動態(tài)設置頁面的viewport，即設備的屏幕上用來顯示網(wǎng)頁的區(qū)域，進而相應的進行頁面屬性的調整。viewport根據(jù)不同的設備像素比值設置有不同的scale值，優(yōu)選的，scale值=1/設備像素縮放比值，其中scale的值隨著dpr變化可以解決I像素邊框的問題。根據(jù)設備像素縮放比動態(tài)設置頁面的viewport，進行縮放頁面，以達到高清的效果。
[0033]例如:當dpr= I Jt^fviewport設置為:
[0034]initial_scale = l ,max imum-s ca I e = I ,minimum-scale = I ；
[0035]當dpr = 2;此時viewport 設置為:
[0036]initial-scale = 0.5 ,maximum-scale = 0.5 ,minimum-scale = 0.5 ；
[0037]當dpr = 3;此時viewport 設置為:
[0038]initial-scale = 0.3333333333333333,maximum-scale = 0.3333333333333333，
[0039]minimum-scale = 0.3333333333333333 ；
[0040]其中dpr即為設備像素縮放比。如當dpr為2的情況下，設置頁面的scale值為0.5，這樣就能實現(xiàn)I像素的邊框。該I像素邊框是指物理I像素的邊框，在高分屏下的I像素是dpr*l像素的大小，通過viewport中的scale來縮放成物理I像素大小。I像素邊框是指物理I像素的邊框，在高分屏下的I像素是dpr* I像素的大小，通過，viewport中的scale來縮放成物理I像素大小。本發(fā)明可以解決圖片在普通屏和高清屏(retina)切換時，像素邊框和圖片模糊的問題。
[0041]具體的步驟3:加載不同尺寸的圖片，并生成視覺稿;例如:當dpr為I的時候加載跟屏幕像素相同比例的圖片；當dpr為2是，加載屏幕尺寸兩倍的圖片。根據(jù)dpr的不同加載不同的圖片，優(yōu)選地，根據(jù)C s s中的background-s i z e來改變圖片的大小。優(yōu)選地，本發(fā)明步驟3中還包括自動校正，通過尋找垂直和水平線條，根據(jù)線條的傾斜角度校正圖片。首先通過邊緣搜索算法對圖像預處理強調圖像邊界，然后將圖像進行變換，優(yōu)選地，使用HoughTransform對圖片進行變換，并其最終將圖片中各個相鄰像白色素連成的線段的角度和該線段離圖像中心的距離標出，優(yōu)選地，橫軸是角度，縱軸是線段離中心距離，顏色越亮表示這樣的線段越多。邊緣圖的一個點，對應著Hough參數(shù)空間中的一條正弦曲線，邊緣圖中的一條直線對應著參數(shù)空間的一個點，即點坐標到極坐標，而非直線坐標到極坐標。邊緣圖中所有點在參數(shù)空間畫出的曲線在參數(shù)空間中能在某幾個點處相交，這幾個點即對應著邊緣圖中的直線，把上述的峰值點代表的線段放回原圖像驗證，可以得到多組有效線段，根據(jù)前一步找到的線段角度，就可以對圖像進行有效的校正。
[0042]具體的步驟4:前端開發(fā)時將視覺稿中的彈性元素的單位進行轉換，并生成最終效果圖。優(yōu)選的，步驟4的具體步驟為通過Sass的函數(shù)和混合宏將視覺稿中彈性元素的單位進行轉換，步驟3中視覺稿中彈性元素的單位為像素單位(PX)。優(yōu)選的，步驟4中將所有彈性元素的單位如像素均轉換為rem，其中px像素(Pixel)為相對長度單位，像素px是相對于顯示器屏幕分辨率而言的，比較穩(wěn)定和精確，但在瀏覽器中放大或縮放瀏覽頁面時會出現(xiàn)頁面混亂的情況。Rem也是一個相對單位(root em，根em)，是相對HTML根元素。優(yōu)選的，Sass的函數(shù)和混合宏將視覺稿中彈性元素的單位進行轉換的具體步驟為:通過計算公式rem =視覺稿的px值/rem基數(shù)將視覺稿中彈性元素的單位進行轉換。將該視覺稿中的彈性元素的尺寸均換算為rem進行布局，當頁面渲染時，根據(jù)頁面有效寬度進行計算，調整rem的大小，動態(tài)縮放以達到適配的效果，無需運用媒體差選來動態(tài)改變rem基數(shù)，可以兼容到所有設備的各種尺寸，因此可以節(jié)約更多的時間并提供更好的用戶體驗。該頁面可以完美兼容多屏設備，并做到頁面的一致性。
[0043]本發(fā)明通過JavaScript獲取移動端屏幕的設備像素縮放比值;并根據(jù)獲得的設備像素縮放比值對應調整頁面屬性;加載不同尺寸的圖片，并生成視覺稿;前端開發(fā)時將視覺稿中的彈性元素的單位進行轉換，并生成最終效果圖。本發(fā)明可以根據(jù)移動端屏幕動態(tài)縮放頁面，能夠滿足大小屏的展示效果，也給設計帶來無限的可能性。本發(fā)明在進行頁面渲染時，根據(jù)頁面有效寬度計算來調整rem的大小，通過動態(tài)縮放以到達適配的效果，無需運用媒體差選來動態(tài)改變rem基數(shù)，可以兼容到所有設備的各種尺寸，因此可以節(jié)約更多的時間并提供更好的用戶體驗。
[0044]上述說明示出并描述了本發(fā)明的優(yōu)選實施例，如前所述，應當理解本發(fā)明并非局限于本文所披露的形式，不應看作是對其他實施例的排除，而可用于各種其他組合、修改和環(huán)境，并能夠在本文所述發(fā)明構想范圍內，通過上述教導或相關領域的技術或知識進行改動。而本領域人員所進行的改動和變化不脫離本發(fā)明的精神和范圍，則都應在本發(fā)明所附權利要求的保護范圍內。
【主權項】
1.一種移動端前端開發(fā)多屏適配方法，其特征在于:包括以下步驟: 步驟1:通過JavaScript獲取移動端屏幕的設備像素縮放比值； 步驟2:根據(jù)步驟I中獲得的設備像素縮放比值對應調整頁面屬性； 步驟3:加載不同尺寸的圖片，并生成視覺稿； 步驟4:前端開發(fā)時將視覺稿中的彈性元素的單位進行轉換，并生成最終效果圖。2.根據(jù)權利要求1所述的一種移動端前端開發(fā)多屏適配方法，其特征在于:所述步驟2中進一步包括:根據(jù)步驟I中獲得的設備像素縮放比值計算出HTML的基準值，進而相應的進行頁面屬性的調整。3.根據(jù)權利要求2所述的一種移動端前端開發(fā)多屏適配方法，其特征在于:所述HTML的基準值=屏幕寬度*設備像素縮放比值/16。4.根據(jù)權利要求3所述的一種移動端前端開發(fā)多屏適配方法，其特征在于:所述HTML的基準值與動態(tài)設備像素縮放比值一一對應，并均寫入HTML。5.根據(jù)權利要求1所述的一種移動端前端開發(fā)多屏適配方法，其特征在于:所述步驟2中還進一步包括:根據(jù)步驟I獲得的設備像素縮放比值動態(tài)設置頁面的viewport，進而相應的進行頁面屬性的調整。6.根據(jù)權利要求5所述的一種移動端前端開發(fā)多屏適配方法，其特征在于:所述V i ewpor t根據(jù)不同的設備像素比值設置有不同的s ca I e值。7.根據(jù)權利要求6所述的一種移動端前端開發(fā)多屏適配方法，其特征在于:所述scale值=I/設備像素縮放比值。8.根據(jù)權利要求1所述的一種移動端前端開發(fā)多屏適配方法，其特征在于:所述步驟4的具體步驟為通過Sass的函數(shù)和混合宏將視覺稿中彈性元素的單位進行轉換。9.根據(jù)權利要求8所述的一種移動端前端開發(fā)多屏適配方法，其特征在于:所述視覺稿中彈性元素的單位為像素單位。10.根據(jù)權利要求8所述的一種移動端前端開發(fā)多屏適配方法，其特征在于:所述步驟4中將像素單位轉換為rem。
【文檔編號】G06F17/30GK105912336SQ201610222577
【公開日】2016年8月31日
【申請日】2016年4月11日
【發(fā)明人】何中, 鞠海林, 戴建峰, 嚴偉, 顧永新, 張龍, 徐曉輝
【申請人】江蘇中威科技軟件系統(tǒng)有限公司