移動端頁面開發問題總結

    時間過的飛快，轉眼間作移動端已經將近兩個月時間了，在這兩個月中作了不少個頁面，有js，jq，還有頁面適配等相關內容，雖然一切看上去都很正常，但是總感受適配性不是特別好，這就致使在後續要作不少補救工做，甚至有的時候要靠犧牲頁面性能（直接用圖片）或細微調整設計稿來實現，長路漫漫啊~接下來就將工做中遇到的一些問題總結下來，以及對相似騰訊，京東，淘寶的頁面進行簡要分析。

   1.自適應

   在手機端頁頭咱們通常要加兩行代碼：

    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

    <meta content="telephone=no,email=no" name="format-detection">(禁止瀏覽器將數字識別爲電話號碼；)    

     這是網上主流的作法，設定viewport視口寬度等於設備的寬度，而且初始縮放比例爲1.0，同時禁止用戶縮放頁面。好比通常手機的device-width都爲320，即視口寬度爲320，假如頁面中某元素的尺寸直接用像素設定，而且超過320，那麼將不可以在窗口中徹底顯示，所以這時候咱們將寬度，高度改成百分比，字體也用相對單位em或rem，這樣也能更好的適應屏幕，但是問題來了，若是爲圖片，這問題很簡單，咱們能夠簡單粗暴的設定圖片的最大寬度或最小寬度，這樣能保證圖片再整個屏幕中的顯示效果一致。但是若是不是圖片的話，假如咱們給外層div寬度設爲90%，div裏有一行大字，大概佔div寬度的95%，字體大小用em（假設瀏覽器默認字體大小爲1em=16px），不一樣設備寬度的95%是不一樣的，這就意味着有的屏幕下字體會換行。。。固然，若是div寬度不是很大的話，咱們也能夠將寬度設爲XXem，不過貌似這樣還要不停的計算。固然我作移動端時間不長，若是理解有誤，請及時告訴我，以避免我誤入歧途。。。

   <meta id="screeMeta" name="viewport" content="width=640, initial-scale=1,minimum-scale=0.5, maximum-scale=0.5">

   這是咱們如今的作法，經過js來控制縮放。

<script type="text/javascript">
 
var sW=$(window).width();
//alert(sW);
if(sW>=640&&sW<720){
    $("#screeMeta").attr("content","width=640, initial-scale=1,minimum-scale=0.5, maximum-scale=0.5");
}else if(sW>=720&&sW<750){
    $("#screeMeta").attr("content","width=640, initial-scale=1,minimum-scale=0.5, maximum-scale=0.56");
}else if((sW>=750&&sW<800)){
    $("#screeMeta").attr("content","width=640, initial-scale=1,minimum-scale=0.5, maximum-scale=0.58");
}else if(sW>=800&&sW<1000){
    $("#screeMeta").attr("content","width=640, initial-scale=1,minimum-scale=0.5, maximum-scale=0.65");
}
</script>

     在製做的時候寬度，字號等均可以按照設計來直接進行設置，不過會有不少屏幕像素是大於640的，這就會在頁面中出現各類各樣的小縫隙，而後咱們在逐個解決。。

     下面看看騰訊，京東，淘寶都是怎麼作的~

這是京東的頁面設置，viewport設爲設備尺寸，在頁面中整個頁面（除導航外），設定了一個外圍容器viewport；css是這樣設置的：

min-width:300px;max-width:640px;margin:0px auto;padding:0 5px;頁面中高度，寬度百分比和實際像素都有，字號用的是px;

 

淘寶頁頭設置爲<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

頁面不少元素的寬度，高度設置用了rem單位設置。

 

淘寶頁頭設置爲<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

頁面不少元素的寬度，高度設置用百分比，字體用em，天貓與騰訊相似，不過字號爲px。

看來巧妙的佈局能解決不少適應問題

 

2.關於overflow兼容性問題

以前要作一個頁面，咱們從新設計了滾動條的樣式，與傳統滾動條形式徹底不一樣，因爲時間關係，直接找了一個插件，在前面的博文中有過介紹，經過簡單的設置後，在iphone中表現完美，

但是放到Android中，問題就來了，樣式沒有出來，並且滑動時會出現bug，（div設置overflow：auto）。查了不少資料也沒找到解決辦法，最後只能是在頁面加載最開始後判斷爲ios或andriod，

而後只有ios執行新滾動條樣式，andriod用默認樣式~（判斷ios或andriod，經過js的navigator來進行判斷）

3.關於動態生成元素的綁定事件

咱們知道，對於動態生成的元素通常用on方法綁定事件，好比click，咱們這樣寫document.on("click","#xx",function(){}),bug來了，再iphone6上點擊無效，百思不得其解，最後的解決辦法居然是。。。

給當前元素添加css屬性-cursor：pointer，緣由不詳，不過確實是能夠解決的~

4.iphone6彈出虛擬鍵盤

需求是這樣的，點擊輸入框，彈出虛擬鍵盤，而後輸入完成後彈窗（這時候其實虛擬鍵盤應該是滑出的過程），彈窗在整個頁面中居中，具體經過js計算，這時候發現iphone6僅僅是iphone6的彈窗外置會跑出窗口外~猜測多是高度計算問題，因而alert了計算所需的高度，發現當alert後肯定，彈窗位置正確，那就應該是事件執行時間問題了，我將彈窗彈出延遲100ms，即setTimeout（function（）{}，100），問題解決。

5.關於元素均勻分佈，能夠藉助box，flex屬性來解決。

 

好了，先寫到這裏，有想到的問題會陸續補充~