第134天：移動web開發的一些總結（二）

標籤：繪製   mob   ext   zepto   查詢參數   func   post   break   ali   

1、響應式布局

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

媒體查詢：@media screen and (max-width:100px) { }媒體類型：screen（螢幕）

print（印表機）
handheld（手持功能）
all（通用）

常用媒體查詢參數：

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

2、響應式設計設計點設計點一：百分比布局

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

設計點二：彈性圖片

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

img{ max-height: 100% }

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

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

關於響應式設計的思考：

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

3、 特殊樣式處理（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類的使用非常多，而多行文本類，在詳情介紹則用的比較多。

 1 //單行文本溢出… 2 .inaline { 3     overflow: hidden; 4     white-space: nowrap; 5     text-overflow: ellipsis; 6 } 7 //多行文本溢出… 8 .intwoline { 9     display: -webkit-box: !important;10     overflow: hidden;11 12     text-overflow: ellipsis;13     word-break: break-all;14 15     -webkit-box-orient: vertical;16 -webkit-line-clamp: 4;17 }

4、 終端互動最佳化對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。

5、 跨終端web

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

（1） 移動優先：

① 移動端的使用者和流量越來越多
② 各種螢幕讓我們更聚焦業務的本領
③ 行動裝置有更先進的人機互動體驗

（2） 多終端檢測（3） 介面：結構：通用介面，

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

6、零碎的細節

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

第134天：移動web開發的一些總結（二）