關于移動端開發的一些總結

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（混合模式）

本文連結：http://www.cnblogs.com/xsilence/p/5774737.html

轉載于:https://www.cnblogs.com/xsilence/p/5774737.html