移動端二三事【一】：移動端頁面重構基礎工做與注意事項。

如今的前端工做中，移動端的地位甚至已經超過了PC端，也趁着有時間，來全面總結一下移動端頁面重構的注意事項和一些小技巧。

話很少說，首先項目開始前，首先要進行總體規劃和準備工做。

一.總體規劃與準備

1.項目構建目錄

前端項目如火如荼的發展着，項目開發之初的準備工做也愈來愈複雜，IT項目的發展都是爲了更高效的開發，也就是易用性、高擴展性、高維護性三個方面。構建目錄時應就具體狀況進行分析，不外乎如下幾點：

（1）生產環境與發佈環境目錄（是否使用打包工具、編譯器等，例如webpack、less、sass、postCSS、babel，項目測試無誤後輸出發佈發佈環境。）

（2）構建工具目錄（gulp、grunt、webpack）

（3）模塊加載器目錄（require、sea、webpack）

（4）測試環境目錄

（5）真機調試（在此注意，瀏覽器端預覽是基於像素比和視口，對移動端設備大小進行的模擬，沒法徹底模擬移動端設備。）

若不使用額外工具，此項能夠忽略。以前經常使用gulp的browser-sync，會在gulp的構建目錄中存在。

（6）主文件目錄（大學時剛接觸前端可能就這一個目錄，在此用於自嘲 ^_^）

包括css目錄、js目錄、圖片、字體等。小項目中，第（3）條的加載器也可包含在此，此目錄具備靈活性。

（7）模板與路由等邏輯層目錄等（注意：此處針對於使用node.js爲後端語言的前端開發者，若後端語言爲php、java等可不做考慮）

node.js是趨勢，模板目錄以express+ejs爲例（鄙人只用過express），通常將ejs文件放於一個目錄之下，而路由文件放於route目錄之下，主文件（app.js）經路由分發後再route下拿到具體的邏輯文件進行執行，而後返回給瀏覽器端進行渲染（大多後端語言的模板都是如此）

2.選擇合適的技術棧

在此不做過多解釋，基於儘量高的開發與執行效率，根據公司要求或我的喜愛進行選擇。

3.頁面單位選型與佈局

單位的選型直接關係到頁面呈現的效果，根據個人經驗有如下幾種選擇：

（1）簡單粗暴的徹底使用媒體查詢

簡單粗暴但確實是想要什麼效果就有什麼效果，只要你不嫌麻煩。在追求高效開發的前端行業，這項選擇能夠抹去。

（2）純純的使用em

我的更喜歡在響應式的時候使用em在根節點用於區分PC端和移動端的基礎字體大小。不過，在純移動端也不乏爲一種不錯的解決方案。可是，由於em在計算字體大小時是相對於父節點的字體大小計算的，因此要處理好父節點的fontsize大小就顯得尤其重要，而一旦處理很差就會有牽一髮而動全身的趕腳。純純的使用em，我的不是很建議，由於一個節點使用em不但取決於父節點，更影響着子節點。獨立操做的空間稍顯不足。

（3）純純的使用rem

*使用js設置rem

(function(){
    var html = document.documentElement;
    var hWidth = html.getBoundingClientRect().width;
     html.style.fontSize = hWidth/15 + "px";
})()

*也可以使用媒體查詢設置根節點字體大小

但從想法上看，徹底的流體佈局，是最佳解決方案，但存在兼容性問題，如Chrome的最小字體爲12px，但其餘多數瀏覽器最小字體可在12像素下。真機調試時你就會發現，12像素是正經常使用戶可容忍的最小字體，但使用rem稍有不慎就會使字體小於12像素，所以，此選擇要求開發者時刻謹記最小字體的臨界大小。

（4）VW、VH（這裏的V指viewport）

VW：視口寬度的百分比。如1VW爲視口寬度的1%，VH同理；vmin視口寬度和視口高度中得最小值，vmax同理；

使用視口單位是真正意義上實現流體佈局的選擇，由於它除了基於視口大小外不受任何其餘因素影響。我的很看好視口單位的後續發展，畢竟是直截了當的根據響應式設計的。但因爲種種緣由，目前使用還不是很普遍，但在局部佈局或解決具體問題時時每每會起到點睛的效果。

（5）viewport縮放適配

固定頁面大小，根據設備大小進行縮放適配

(function(){
    var w = window.screen.width;
    var targetW = 320;
    var scale = w/targetW; //當前尺寸/目標尺寸
    var meta = document.createElement("meta");
    meta.name = "viewport";
    meta.content = "user-scalable=no,initial-scale="+scale+",minimum-scale="+scale+",maximum-scale="+scale+""
    document.head.appendChild(meta);
})();

（6）em+媒體查詢

建議使用，常規單位操做使用em，具體操做使用媒體查詢。

（7）rem+媒體查詢

建議使用，常規流體佈局操做使用rem，具體操做（如最大最小字體等）使用媒體查詢。

搭配使用是最佳選擇，特殊項目還須要具體分析，以上分析與建議創建在常規的純移動端項目中。

 二，頁面的基礎設置：

1.經常使用meta元標籤設置

<!--H5頁面窗口自動調整到設備寬度，並禁止用戶縮放頁面-->
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<!--網站開啓對web app程序的支持-->    
<meta name="apple-mobile-web-app-capable" content="yes" />
<!--在web app應用下狀態條（屏幕頂部條）的顏色,默認值爲default（白色），能夠定爲black（黑色）和black-translucent（灰色半透明）-->    
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!--禁用掉uc瀏覽器判斷到頁面上文字居多時，會自動放大字體優化移動用戶體驗。-->    
<meta name="wap-font-scale" content="no">
<!--忽略將頁面中的數字識別爲電話號碼-->    
<meta name="format-detection" content="telephone=no" />
<!--忽略Android平臺中對郵箱地址的識別-->    
<meta name="format-detection" content="email=no" />
<!-- QQ強制橫屏或豎屏顯示 -->
<meta name="x5-orientation" content="portrait|landscape"/>
<!-- QQ設置全屏 -->
<meta name="x5-fullscreen" content="true" />
<!-- UC強制豎屏或橫屏顯示 -->
<meta name="screen-orientation" content="portrait">
<!-- UC全屏顯示 -->
<meta name="full-screen" content="yes">
<!-- 禁止電話號碼和郵箱識別 -->
<meta name="format-detection" content="telephone=no, email=no" />

普通移動端的頭部：

    <meta charset="UTF-8">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
    <!--H5頁面窗口自動調整到設備寬度，並禁止用戶縮放頁面-->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <!--網站開啓對web app程序的支持-->
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <!--在web app應用下狀態條（屏幕頂部條）的顏色,默認值爲default（白色），能夠定爲black（黑色）和black-translucent（灰色半透明）-->
    <meta name="wap-font-scale" content="no">
    <!--禁用掉uc瀏覽器判斷到頁面上文字居多時，會自動放大字體優化移動用戶體驗。-->
    <meta name="format-detection" content="telephone=no" />
    <!--忽略將頁面中的數字識別爲電話號碼-->
    <meta name="format-detection" content="email=no" />
    <!--忽略Android平臺中對郵箱地址的識別-->
    <title>XXXX</title>
    <link rel="icon"  href="images/favor.png">

 

2.特殊css重置樣式

body * {
    -webkit-text-size-adjust: 100%;  /*取消橫豎屏的字體縮放*/
    -webkit-user-select: none; /*ios取消文字選中*/
}
a, 
input, 
button{
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);  /*取消標籤選擇高亮*/
}
input, 
button {
    /*ios取消圓角*/
    -webkit-appearance: none;   
    border-radius: 0;
}

3.清楚font bosting設置

webkit內核瀏覽器在智能判斷段落標籤字體可能會使用戶看不清楚時，會將字體智能放大。

解決方法：爲包含段落內容的標籤添加max-height。