移動端開發知識點總結 用CSS開啓硬件加速來提升網站性能（轉）

　　在去年的這個時候，開始慢慢接觸到移動端，接觸移動端並不早。但那時查找相關資料不是不少(沒技術，找不到)，只有在慢慢的摸索敲打代碼中尋找方法！記得那時一直糾結爲何別人的圖片在手機上那麼清晰，而咱們作的就那麼的模糊，後來聽過放大圖片，以後用代碼縮小，才保證在手機上清晰。(後面才瞭解到是DPI, retina 2x 的問題)。

　　廢話少說，進入正題！

如下爲移動端須要的知識點整理：

　　1）移動端屏幕多種多樣，DPI(像素密度)不一樣，越高圖像越清晰。而普通android手機和iphone手機的分辨率的基本比例1:2。 故此知道了爲何在蘋果上的圖標變模糊了， 由於默認被放大了兩倍大小來呈現頁面！

　　目前咱們的手機設計圖爲iphone5s的分辨率640*1136, 而在切圖的時候，使用320的寬度製做。爲什麼這樣呢？

　　緣由仍是由於retina屏的高分辨率，把縮小一倍大小，保證圖片的高清1:2比例。若是在條件容許，建議製做多套圖標，以後經過媒介引入。

詳細步驟介紹，參考大漠的： 走向視網膜（Retina）的Web時代

　　

　　2）viewport:可視區域，此方法有多個設置設置參數：

width = [pixel_value | device-width]       // 寬度(可選實際寬度值或者 第二個參數)
height = [ pixel_value |device-height]     // 高度
initial-scale = float_value            // 初始比例
minimum-scale =  float_value        // 最小比例
maximum-scale =  float_value        // 最大比例
user-scalable = [yes | no]            //是否縮放

此參數分別設置可視區域，比例大小，一般都使用以下代碼：

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

寬度採用設備的寬度，默認及最大最小比例都爲1，不容許縮放！ 正常咱們還會爲iphone手機設置以下參數：

<!-- iphone 狀態欄樣式 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- 離線應用（看需求而定 -->
<meta name="apple-mobile-web-app-capable" content="yes" /> 
<!-- 禁止識別電話號碼 -->
<meta name="format-detection" content="telephone=no"  />
<!-- iphone保存桌面應用,webapp -->
<meta name="apple-touch-fullscreen" content="YES" />

　　3）字體大小，在手機端中最好採用大小EM做爲製做單位，而不是PX。目前手機的分辨率繁多，有的手機字體默認是24px爲最小單位，有的則是16px。全部爲了統一字體，一般會在樣式中設置以下代碼：

html, body {
    font-size:100%
}

　　保證字體大小安裝默認的大小設置，然後，全部字體採用EM計算大小，這樣能夠保證在跨設備的時候，字體的不會有大小不一的請求。而字體PX到EM的換算方式，能夠參考大漠的：CSS中強大的EM

　　

　　4）流體佈局(fluid layout)，目前已知移動端設備屏幕過多，因此排版不能使用1024px之類的固定佈局，那何爲流體佈局呢？流體佈局的測量單位和固定佈局的測量單位不一樣，流體佈局採用的是百分比，也就是說隨着設備屏幕的變化，佈局的百分比也跟着相應的變化，提升了頁面的流動性。流體佈局及各類佈局介紹，參考大漠的：響應式設計：流體佈局

 

　　同時，流體佈局與媒介查詢關係密切，媒介屬性容許不一樣設備（如屏幕、打印機）指定不一樣的樣式表，以及根據設備的屏幕寬高等指定對應的樣式。流體佈局和媒介查詢相結合才能構建更好的移動端頁面。什麼？媒介查詢不知道，那麼請看大漠的文章介紹：CSS3 Media Queries

 

　　

　　移動端的知識點，其實說多很少，只是須要從以往的製做方式轉換過來！不少移動端相關的文字，在大漠的網站上都有相應的介紹，本文主要是整理所需的知識點，一下再介紹下移動端的部分注意問題：

 

　　1）字體選擇：iOS 4.0+ 使用英文字體 Helvetica Neue，以前的iOS版本降級使用 Helvetica。中文字體設置爲華文黑體STHeiTi。 

body {
    font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
}

　　2）設置全局的CSS樣式，避免圖中的長按彈出菜單與選中文本的行爲

a, img {
    -webkit-touch-callout: none; /* 禁止長按連接與圖片彈出菜單 */
}
html, body {
    -webkit-user-select: none;   /* 禁止選中文本（如無文本選中需求，此爲必選項） */
    user-select: none;
}

　　各類性能優化方面，參考：移動開發規範概述

　　3) 百分比大小，遇到padding / border致使頁面寬度不是預期的效果，可使用如下css樣式，改變盒子模型：

.box {
    box-sizing:border-box; /* 能夠不用在計算 padding 以及 border */
}

　　4）點擊<a>連接或者綁定click事件，會在移動端部分android機中出現一個虛擬邊框，使用如下CSS樣式，清除邊框：

a {
    -webkit-tap-highlight-color:rgba(255,0,0,0);
}

　　5）iphone 手機 input 輸入框出現奇怪的圓潤風格，iphone的默認風格，解決方法：

input {
    -webkit-appearance: none;
}

　　當時出現這個緣由，找了好長時間纔在一個外國很出名網站stackexchange 找到答案。原文：Turn off iPhone/Safari input element rounding

　　6）腳本問題，在移動端使用click事件，會有300ms的延遲，因此最好使用觸摸事件 touch. 請看：300毫秒點擊延遲的前因後果。 而移動端，最好不要使用jquery / jquery mobile 框架，緣由是由於太大對頁面性能很差，建議 zepto.js，語法jquery相似，快速上手。

　　7）涉及動畫，能夠考慮是否使用 translate3D 來觸發 GPU 加速，緣由是某些動畫在移動端中執行速度會出現卡頓現象，提升流暢度

.box {
     -webkit-transform: translate3d(0, 0, 0);
     -moz-transform: translate3d(0, 0, 0);
     -ms-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
}

　　如動畫過程有閃爍（一般發生在動畫開始的時候），能夠嘗試下面的Hack：

.box {
     -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
     -ms-backface-visibility: hidden;
     backface-visibility: hidden;
 
     -webkit-perspective: 1000;
     -moz-perspective: 1000;
     -ms-perspective: 1000;
     perspective: 1000;   
}

　　具體參考司徒正美文章：用CSS開啓硬件加速來提升網站性能（轉）， 未完，後續更新。。

 　　

　　總結：本文爲移動端相關資料整理，知識有限，歡迎各位批評指點！