1、 piexl 像素知識

640 * 1136的圖片能不能在iphone5上完全展示？
iphone5分辨率640*1136

邏輯像素與物理像素的關系
px邏輯像素：瀏覽器使用的抽象單位
dp，pt物理像素：設備無關像素
dpr：設備像素縮放比
計算公式：1px = (dpr)^2 * dp
iphone5的 dpr = 2；

DPI:打印機每英寸可以噴的墨汁點（印刷行業）
PPI:屏幕每英寸的像素數量，即單位英寸內的像素密度
目前，在計算機顯示設備參數描述上，二者意思一致
計算公式：以iphone5為例：ppi = √（1136^2 + 640^2）/4 = 326ppi（視網膜retina屏）
註意：單位為硬件像素（物理像素），非px
PPI越高，像素數越高，圖像越清晰。但可視度月低（小），系統默認縮放比越大。
retina屏（高清屏）：dpr都是>=2。

2、 viewport

手機瀏覽器默認為我們做了兩件事情：
① 頁面渲染在一個980px（ios）的viewport
② 縮放

為什麽要有viewport？
一個300多像素的屏幕，放一個1000多像素的頁面，會混亂，所以要先虛擬一個980像素的頁面，然後進行縮放。

度量|視口 visual viewport ==== 窗口縮放scale
布局 layout viewport

設計移動web，為什麽不使用默認的980px的布局viewport？
① 寬度不可控制，不同系統的設備默認值都可能不同
② 頁面縮小版顯示，交互不友好
③ 鏈接不可點
④ 有縮放，縮放後又有滾動
font-size為40px等於pc上12px同等物理大小，不規範

3、 meta標簽

移動web最佳viewport設置： 布局viewport = 設備寬度 = 度量viewport
<meta name=” viewport” content = “width=device-width, initial-scale = 1, user-scalable = no”>

4、 設計移動web

方案一：根據設備的實際寬度來設計（常用）（不縮放）

手機寬320px，我們就拿320px設計。

方案二：1px = 1dp，易解決高清問題

縮放0.5。根據設備的物理像素dp等於抽象像素px來設計。1px像素邊框和高清圖片都不需要額外處理。

以方案一為例，將pc端頁面改成適應移動端的頁面：

在移動開發過程中要學會做減法，一些不太重要的東西可以隱藏起來。

5、 使用什麽布局？

很多網站都是使用固定布局，以前凡客、淘寶也有段時間使用過流式布局，現在都改成固定布局。
但是固定布局不適合移動開發。

可以使用

① 響應式布局：responsive 高清圖片 retina px em rem
② flex彈性盒子布局：高效居中方案 等比例填充列行 background-size font-size 多行文本溢出

6、 flexbox彈性盒子布局

根據元素個數不同，自動填充
display:-webkit-flex; 表示使用彈性布局
子元素設置 flex:num; 占容器的比例

劃分方式：

① 等比劃分（flex:num;表示）

② 混合劃分（有固定的像素（eg：100px）與flex:num;混合在一起）

③ 不定寬高的水平垂直居中：

position：absolute；
top：50%；
left：50%；
transform：translate（-50%，-50%）；

flexbox版不定寬高的水平垂直居中：

.parent{
        justify-content :  center;      //子元素水平居中
        align-items :  center;          //子元素垂直居中
        display :  -webkit-flex;
}

flexbox彈性盒子布局，介於兼容性問題，建議使用舊版方案：

①新flex布局：

display :  -webkit-flex;
-webkit-fiex:  1;       //子元素的flex
justify-content :  center;
align-items :  center; 

②舊flexbox布局：

display :  -webkit-flex-box;
-webkit-fiex-box:  1;       //子元素的flex
box-pack :  center;
box-center:  center; 

一種垂直居中的hack：

（1）hack方式

li{
    line-height: 568px;
    vertical-align:middle;
}
li img{
    vertical-align:middle;
}

(2)更優雅的方式，對於高級瀏覽器來說

// 父元素
position:absolute;

// 子元素
li{
    display: table-cell;/*盒模型變成表格的元素*/
    vertical-align: middle;
}

(3)另一種垂直居中方式

li{
    display: -webkit-box;
    -webkit-box-pack:center;
    -webkit-box-align:center;
}

7、 響應式布局

開發一個頁面，在所有的設備上都能夠完美展示。

媒體查詢：@media screen and (max-width:100px) { }

媒體類型：screen（屏幕）

print（打印機）
handheld（手持設備）
all（通用）

常用媒體查詢參數：

width —— 視口寬高
height —— 視口寬高
device-width —— 設備的寬高
device- height —— 設備的寬高
orientation：檢查設備處於橫向（landscape）還是豎屏（portrait）

響應式設計設計點

設計點一：百分比布局

僅僅使用媒體查詢來適應不同固定寬度設計，只會從一組css到另一組css的切換。兩種設計之間沒有任何平滑漸變。只使用媒體查詢，布局有時會變得不可控制。
當然，這只是建議，也有一些頁面采用固定布局的情況下能夠很好的在一些沒有考慮過媒體查詢情況下的設備上很好的展示。

設計點二：彈性圖片

思路：無論何時，全都包在圖片的元素寬度範圍內，以最大的寬度同比完整的顯示圖片。

img{ max-height: 100% }

設計點三：重新布局，顯示與隱藏

當頁面達到手機屏幕寬度的時候，很多時候就要放棄一些傳統的頁面設計思想。力求頁面簡單，做如下處理：
① 同比例縮減元素尺寸
② 調整頁面結構布局
③ 隱藏冗余的元素
經常需要切換位置元素使用【絕對定位】，減少重繪提高渲染性能。

關於響應式設計的思考：

根據響應式設計的理念，一個頁面包含所有設備不同屏幕的樣式和圖片，當一個移動設備訪問一個響應式的頁面，就會下載pc，筆記本，ipad等不同設備對應的樣式。而這些樣式卻是冗余的，完全沒有用。
權衡利弊：性能不是最優，但是能減少重復開發。

8、 特殊樣式處理

（1） 高清圖片

在移動web頁面上渲染圖片，為了避免圖片產生模糊，圖片的寬度應該用物理像素單位渲染，即是100 * 100的圖片，應該使用100dp * 10dp。
width：（w_value/dpr）px；
height：（w_height/dpr）px；

（2） 一像素邊框

同樣是retina屏幕下的問題，根本原因：1px使用2dp渲染。
border：0.5px；（錯誤），僅僅ios8可以使用
通用方案：scaleY（0.5）

（3） 相對單位rem

為了適應各大屏幕的手機，px略顯固定，不能根據尺寸的大小而改變，使用相對單位更能體驗頁面兼容性。
em：是根據父節點的font-size為相對單位
rem：是根據html的font-size為相對單位
em在多層嵌套下，變得非常難以維護，rem更加能作為全局統一設置的度量
那麽，rem的基值設置為多少比較好？
回歸目的：為了適應各大手機屏幕
rem = screen.width / 20

不使用rem的情況：font-size

一般來講font-size是不應該使用rem的相對單位的。因為字體的大小是趨向於閱讀的實用性，並不適合於排版布局。
同理，趨向於一些固定的元素的特性。我們不使用rem而改為使用px去確保在不同屏幕上表現一致（跟rem的目的相反）。

（4） 多行文本溢出???

單行文本溢出，對title類的使用非常多，而多行文本類，在詳情介紹則用的比較多。

//單行文本溢出…
.inaline {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
//多行文本溢出…
.intwoline {
    display: -webkit-box: !important;
    overflow: hidden;

    text-overflow: ellipsis;
    word-break: break-all;

    -webkit-box-orient: vertical;
-webkit-line-clamp: 4;
}

9、 終端交互優化

對click事件say no

彈性滾動

上拉刷新

tap事件基礎

touch觸摸事件

下拉加載

300ms:

移動web頁面上的click事件響應都要慢上300ms
用300ms判斷是單擊還是雙擊

(1) tap基礎事件

300ms延遲怎麽破？tap事件代替click事件。自定義tao事件原理：
在touchstart、touchend的記錄時間、手指位置，在touchend時進行比較，如果手指位置為同一位置(或允許移動一個非常小的位移值)且時間間隔較短（一般認為是200ms），且過程中未曾觸發過touchmove，即可認為觸發了手持設備上的“click”，一般稱它為“tap”。

tap“點透”的bug： 有兩層，點擊第一層的時候，如果點擊的區域在第二層的範圍內，那麽第二層也會被觸發。（原因與300ms有關）

tap透傳的解決方案：
①使用緩存動畫，過渡300ms的延遲
②中間層dom元素的加入，讓中間層接收這個“穿透”事件，稍後隱藏
③“上下”都使用tap事件，原理上解決tap穿透事件，（但是不可避免原生標簽的click事件，如a，input）。
③ 改用Fastclick的庫（聽過最新的zepto已經fixed掉這個bug）

(2) Touch基礎事件

觸摸才是移動設備的交互的核心事件，支持多點觸摸。
touchstart：手指觸摸屏幕觸發（已經有手指放屏幕上不會出發）
touchmove：手指在屏幕上滑動，連續觸發
touchend：手指離開屏幕時觸發
touchcancel：系統取消touch時候觸發（不常用）eg：滑動頁面時來了一個電話或者其他系統事件

除常見的事件屬性外，觸摸事件包含專有的觸摸屬性：
touches：跟蹤觸摸操作的touch對象數組
targetTouches：特定事件目標的touch對象數組
changeTouches：上次觸摸改變的touch對象數組

一個小BUG： android只會觸發一次touchstart，一次touchmove，touchend不觸發。（4.0，4.1有，4.2修復沒有了，4.4開始又出現了）

解決方案： 在touchmove中加入：event.preventDefault（），可fixedBug。

但註意：event.preventDefault（）會導致默認行為不發生，如scroll，導致頁面不滾動！如果頁面帶有滾動條，就需要考慮更換解決方案。

(3) 彈性滾動，下拉刷新

①彈性滾動：當客戶端的頁面滾動到頂部或底部的時候，滾動條會收縮並讓我們多滑動一定距離。通過緩沖反彈的效果，帶給用戶良好的體驗。
移動web頁面也是擁有這樣的能力的，但滾動有幾種情況需要考慮：
body層滾動：（系統特殊化處理）
自帶彈性滾動，overflow：hidden失效，GIF和定時器暫停。
局部滾動：沒有彈性滾動，沒有滾動慣性，不流暢。
局部滾動開啟彈性滾動：

body {
    overflow:scroll;
    -webkit-overflow-scrolling:touch;
}

但註意：android不支持原生的彈性滾動！但可以借助三方庫iScroll來實現

②下拉刷新：頂端下拉一小點距離，頁面彈性滾動向下。
④ 上拉加載：使用scroll事件，而不是touch事件（android有bug）

(4) Canvas & GPU render【GPU 渲染】

優化技巧： canvas代替img標簽
drawImage（image，x，y）；canvas上繪制圖片
drawImage（image，x，y，width，height）；canvas上繪制縮放圖片

原因： img使用瀏覽器渲染，當圖片特別大且手機性能不是很好的情況下，會特別卡，通常表現在滑動圖片。因為沒有觸發物理設備本身的GPU（圖形處理器）渲染

image object：

① 預加載圖片：當設置img.src=””的時候，就表示請求加載圖片
② 圖片的按比例縮放

(5) css3 animation

當一個css3動畫結束時，我們可以監聽相關事件AnimationEnd，比如對於webkit來說，是webkitAnimationEnd。

10、 跨終端web

① 單域 - Media Query
② 單域 – 多模板
③ 多域 – 跳轉（很原始）
④ 多平臺 App

（1） 移動優先：

① 移動端的用戶和流量越來越多
② 各種屏幕讓我們更聚焦業務的本領
③ 移動設備有更先進的人機交互體驗

（2） 多終端檢測

（3） 接口：結構：通用接口，

接口模型：前端消費者；後端生產者；測試監督者

11、零碎的細節

1）CSS3動畫，代替DOM animation，效率更高，因為css3直接使用瀏覽器的GPU（圖形處理器）渲染

2） 當你給一個元素設置它的百分比寬度的時候，他需要一個比照，也就是父元素，但是當它沒有父的時候，需要給他一個絕對定位absolute值，但是在移動開發中，給整個整塊的頁面使用position: absolute;很占用內存，特別是當內容比較多的時候，會非常明顯。會有幾個後果：在ios下，會導致瀏覽器直接崩潰掉；在android下，會導致非常非常的卡。所以建議直接用js計算。

3）將圖片顯示到一排上，不使用浮動，使用-webkit-transform:translate3d(0,0,0); position: absolute;

4）new Date() * 1；// * 1 ，進行數值運算，轉換為數字形式的時間戳

5）

self.startX = evt.touches[0].pageX; //記錄開始的位移,touches包含著所有手指觸摸在屏幕上的點的集合
-webkit-backface-visibility:hidden;/* 防止閃白 */

6）更多圖片的優化，保留3個要使用的節點，當前的，上一個，下一個圖片的節點，剩余的不需要的刪除

7）jQuery Mobile（JQM jQMobile）
是jQuery在手機上和平板設備上的版本，是創建移動web app的框架。

8）2048制作過程中遇到的bug：（見9（2）touch基礎事件BUG）

// 手機上手指識別無用，chrome19827號錯誤：touchevent不被觸發。防止沒有正確使用preventDefault()
document.addEventListener(‘touchmove‘, function(event) {
    event.preventDefault();
});

10）使用Dropbox發布自己的web app
免費
限制： ① 靜態網站 ② 速度較慢（在國外） ③ 域名不宜記憶
11）web app、native app和hybrid app（混合模式）

第133天：移動端開發的一些總結