主頁 > 知識庫 > 移動端網(wǎng)頁大小自適應的實現(xiàn)方法

移動端網(wǎng)頁大小自適應的實現(xiàn)方法

熱門標簽:東莞人工外呼系統(tǒng)多少錢 400電話辦理尚景 周口導航地圖標注 默納克系統(tǒng)外呼顯示inns 400電話是在哪里申請 朝陽自動外呼系統(tǒng) 商丘電話自動外呼系統(tǒng)怎么收費 昌邑外呼系統(tǒng) 地圖標注地點下載

終于完成了手頭的項目,失蹤人口又回歸啦!在做項目的過程中,遇到很多值得思考的點,速速道來。 第一個遇到的就是網(wǎng)頁大小自適應的問題。

目前比較常用的方法有:

• 首先要讓頁面大小鋪滿屏幕又不能溢出。只需要在html<head>標簽內加入viewport(如下),參數(shù)分別表示:頁面寬度= 屏幕寬度,最大和最小伸縮比都是1,不允許用戶拉縮。

XML/HTML Code復制內容到剪貼板
  1. <meta name="viewport" content="width=device-width,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">  

• 百分比自適應:把長度單位轉換為百分比來表示,這樣在不同的寬度下,元素的長寬也會隨之變化。

優(yōu)點:寬度之間無縫銜接, 操作起來也相對比較方便。

缺點:字體大小需要另外一套自適應方法來調整;當屏幕寬度大于700px后,繼續(xù)按照百分比元素會偏大,這個時候調整起來會比較麻煩。

•rem、em自適應 :用媒體查詢的方法,確定在不同屏幕寬度下,改變<html>或<body>的fontsize。再用rem, em替代 px作為單位實現(xiàn)自適應。

優(yōu)點:可以根據(jù)不同屏幕寬度來設置,可以完美解決上面說的屏幕偏大時的比例問題。字體的大小也不存在問題。

缺點:根據(jù)寬度區(qū)間來設置,無法實現(xiàn)無縫變換。

--------------------------------------------------------------------------------

這些兼容方法各有優(yōu)缺點,都不算完美,怎樣才能把優(yōu)點結合在一起,同時避免缺點呢?

在參考淘寶網(wǎng)的自適應方法時,偶然發(fā)現(xiàn)頁面<html>的fontsize會根據(jù)屏幕的寬度自動調整,而且屏幕寬度和所設字體大小的商是一定的。

于是猜想它是用JS獲取屏幕寬度后,按照固定比例縮小后作為rem的單位長度實現(xiàn)自適應。

這不就是優(yōu)點全有滴解決方法嗎???請容許我激動一下下(☆_☆)

--------------------------------------------------------------------------------

JS代碼寫起來非常簡單,而且完美解決了用rem來設置無法達到無縫銜接的問題。

但移動端測試后問題就出現(xiàn)了,移動端safari在html加載完畢之前將JS以迅雷不及掩耳盜鈴之勢執(zhí)行了,在頁面沒有按照viewport設置好寬度前,JS就讀取了錯誤的寬度,導致元素變成原來的兩倍大0^0, 需要用setTimeout()解決問題。

--------------------------------------------------------------------------------

最終代碼

JavaScript Code復制內容到剪貼板
  1. Zepto(function($){   
  2.     var win = window,   
  3.         doc = document;   
  4.   
  5.     function setFontSize() {   
  6.         var winWidth =  $(window).width();   
  7.         // 640寬度以上進行限制   
  8.         var size = (winWidth / 640) * 100;   
  9.         doc.documentElement.style.fontSize = (size < 100 ? size : 100) + 'px' ;   
  10.     };   
  11.        
  12.     //防止在html未加載完畢時執(zhí)行,保證獲取正確的頁寬   
  13.     setTimeout(function(){   
  14.         // 初始化   
  15.         setFontSize();   
  16.            
  17.     }, 200);   
  18.     
  19. });  

最后補充用rem做自適應過程中發(fā)現(xiàn)的一個坑--當html設置較大的fontsize時,塊元素內的行內元素margin、padding會出現(xiàn)額外的值,解決辦法是把外面包的塊元素fontsize設置為0。

以上這篇移動端網(wǎng)頁大小自適應的實現(xiàn)方法就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持腳本之家。

原文地址:http://www.cnblogs.com/daisykoo/archive/2016/05/24/5522958.html

標簽:福建 沈陽 銅陵 阿拉善盟 那曲 湖南 健身房 揭陽

巨人網(wǎng)絡通訊聲明:本文標題《移動端網(wǎng)頁大小自適應的實現(xiàn)方法》,本文關鍵詞  移動,端,網(wǎng)頁,大小,自,適應,;如發(fā)現(xiàn)本文內容存在版權問題,煩請?zhí)峁┫嚓P信息告之我們,我們將及時溝通與處理。本站內容系統(tǒng)采集于網(wǎng)絡,涉及言論、版權與本站無關。
  • 相關文章
  • 下面列出與本文章《移動端網(wǎng)頁大小自適應的實現(xiàn)方法》相關的同類信息!
  • 本頁收集關于移動端網(wǎng)頁大小自適應的實現(xiàn)方法的相關信息資訊供網(wǎng)民參考!
  • 推薦文章