移動Web App開發

移動Web基礎知識

移動開發像素((Pixel)知識

css的一個像素只是一個抽象的單位，在不一樣的設備中表明的設備物理像素是不一樣的。

• px:css pixels,邏輯像素，瀏覽器使用的抽象單位；

• dp,pt:device independent pixels,設備無關像素,物理像素

• dpr:devicePixelRatio,設備像素縮放比
  計算公式：1px=（dpr）^2 *dp
  1px = dpr ^2 * dp 是平面上的像素換算，但實際開發當中使用更多的是長度上的換算：
  1px = dpr * dp。

• DPI:打印機每英寸能夠噴的墨汁點（印刷行業）

• PPI:屏幕每英寸像素數量，即 每英寸像素密度
  好比手機分辨率是1920*1080 手機尺寸5英寸
  ppi=開方(1920^2+1080^2) /5

• Retina屏(高清屏)：dpr都是>=2
  

Viewport視圖

沒有viewport，直接渲染，會使得排版混亂。viewport提供一個虛擬的頁面來渲染文檔，而後再縮放比例。

Viewport Meta標籤:

移動Web最佳viewport設置：
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">

• width:設置佈局viewport的特定值("device-width")

• initial-scale:設置頁面的初始縮放

• minimum-scale:最小縮放

• maximum-scale:最大縮放

• user-scalable:用戶可否縮放

設計移動Web

方案一: 根據設備的實際寬度來設計(經常使用)
手機寬320px, 咱們就拿320px設計
方案二: 1px = 1dp
縮放0.5, 根據設備的物理像素dp等於抽象像素px來設計. 1像素邊框和高清圖都不須要額外處理.

高效的移動Web佈局

Flexbox彈性盒子佈局

不定寬高的水平垂直居中佈局

.wrapper{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

flexbox版-不定寬高的水平垂直居中佈局

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

Flexbox彈性佈局屬性：

• flex:flex伸縮佈局；display:-webkit-flex;

• flex-direction: 伸縮流方向：row/column/row-reverse/column-reverse

• flex-wrap:伸縮換行，nowrap/wrap/wrap-reverse

• flex-flow:伸縮流方向與換行，flex-direction和flex-wrap屬性的縮寫版本。

• justify-content:主軸對齊方式：flex-start/flex-end/center/space-between/space-around

• align-items:伸縮項目行在側軸對齊方式：flex-start/flex-end/center/stretch/baseline

• align-self:伸縮項目自身在側軸對齊方法:flex-start/flex-end/center/baseline/stretch

• align-content:堆棧伸縮行,伸縮行在側軸對齊方式:flex-start/flex-end/center/space-between/space-around/stretch

• order:顯示順序:

• flex:伸縮性(伸縮項目的寬度/高度自動填充伸縮容器額外空間)：包含3個參數：flex-grow(擴展比率,默認0)/flex-shrink(收縮比率,默認1)/flex-basis(伸縮基準值，默認auto)

Flexbox彈性盒子佈局-兼容性
iOS可使用最新的flex佈局
android4.4如下，只能兼容舊版flexbox佈局
android4.4及以上，可使用最新flex佈局。

響應式佈局

響應式佈局：可讓一個網站兼容不一樣分辨率的設備，給用戶更好的視覺使用體驗。
格式：@media 媒體類型 and （媒體特性）{你的樣式}

@media screen and (max-width:480px){
 .ads {
   display:none;
  }
}

媒體類型：

• Screen-屏幕

• print-打印機

• handheld-手持設備

• all-通用

經常使用媒體查詢參數：

• device-width,device-height 屏幕寬高，物理

• width,height 渲染窗口寬度，可視

• orientation 設備方向，豎屏(portrait)和橫屏(landscape)展現的區別對待

• resolution 設備分辨率,不一樣於像素

響應式設計要點：
設計點1：百分比佈局
設計點2：彈性圖片：img {max-width:100%;}
設計點3：從新佈局，顯示與隱藏

移動Web特別樣式處理

高清圖片

在移動web頁面上渲染圖片，爲了不圖片產生模糊，圖片的寬高應該用物理像素單位渲染，即100*100的圖片，應該使用100dp*100dp.
width:(w_value/dpr)px;
height:(h_value/dpr)px;

一像素邊框

一樣是retina屏幕下的問題，根本緣由1px使用2dp渲染
解決方法：scaleY(.5)

.itemList li + li:before{
    position: absolute;
    top: -1px; 
    left: 0px; 
    content: '';
    width: 100%;
    height: 1px;
    border-top: 1px solid #d1d1d1;
    -webkit-transform: scaleY(0.5);

相對單位rem

爲了適應各大屏幕的手機，px略顯固定，不能根據尺寸的大小而改變，使用相對單位更能體驗頁面兼容性

em:根據父節點的font-size爲相對單位
rem:根據html的font-size爲相對單位
em在多層嵌套下變得很是難以控制；rem更加可以做爲全局統一設置的度量
不使用rem的狀況：font-size(字體大小)

多行文本溢出

單行文本溢出

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

多行文本溢出
一、WebKit瀏覽器或移動端的頁面
在WebKit瀏覽器或移動端（絕大部分是WebKit內核的瀏覽器）的頁面實現比較簡單，能夠直接使用WebKit的CSS擴展屬性(WebKit是私有屬性)-webkit-line-clamp 。
-webkit-line-clamp用來限制在一個塊元素顯示的文本的行數。 爲了實現該效果，它須要組合其餘的WebKit屬性。
常見結合屬性：

• display: -webkit-box; 必須結合的屬性 ，將對象做爲彈性伸縮盒子模型顯示 。

• -webkit-box-orient 必須結合的屬性 ，設置或檢索伸縮盒對象的子元素的排列方式 。

• text-overflow:ellipsis;，能夠用來多行文本的狀況下，用省略號「…」隱藏超出範圍的文本 。

display: -webkit-box !important;
overflow: hidden;
text-overflow: ellipsis;

-webkit-box-orient: vertical; // 方向垂直
-webkit-line-clamp: 2; // 自動截斷顯示2行

二、跨瀏覽器兼容的方案:
設置相對定位的容器高度，用包含省略號(…)的元素模擬實現；

.tab-paragraph {
    position: relative;
    line-height: 1.4em;
    height: 4.2em;//高度=行高*行數
    overflow: hidden;
.tab-paragraph::after {
    content: "...";
    position: absolute;
    bottom: 0;
    right: 0;
    font-weight: 600;
    padding: 0 1px 1px 5px;
    background: linear-gradient(to right,transparent,#fff 55%);
}

參考連接：多行文本溢出顯示省略號(…)全攻略

終端交互優化

Tap基礎事件

移動web頁面上的click事件響應都要延遲300ms

由來：
ios safari雙擊放大頁面，因爲瀏覽器大都具有這種特性，因此瀏覽器都約定在300毫秒的間隔來判斷是不是雙擊仍是單擊，超過300毫秒還沒第二次點擊瀏覽器才判斷這次點擊是單擊。
本意是好的,正常的邏輯實現,可是在現實的應用場景中,用戶每每會以爲 web app 的事件觸發不是那麼靈敏,有那麼一點延遲。
參考閱讀：5步解決移動設備上的300ms點擊延遲

300ms延遲怎麼破？使用Tap事件代替click事件

自定義Tap事件原理：

在touchstart、touchend時記錄時間、手指位置，在touchend時進行比較，若是手指位置爲同一位置(或容許移動一個很是小的位移值)且時間間隔較短(通常爲200ms),且過程當中不曾觸發touchmove，便可認爲觸發了手持設備上的"click"，通常稱它爲"tap"

移動端click事件響應慢ms,因此用tap事件替換click事件,tap事件可經過touchstart與touchend自定義,也可使用zepto.js實現.可是tap事件有bug(tap透傳),觸發以後過300ms後又觸發click事件

Tap「點透(穿透)」的bug

即點擊會觸發非當前層的點擊事件。

產生穿透事件的條件：
一、兩個dom在屏幕的垂直方向是重疊的，而且z-index不一樣。
二、採用touch系列的點擊事件去點擊朝外的dom，而且這個dom隱藏或者移開。
三、在下方的dom綁定了click或者默認的點擊事件（a標籤，buttom等）
只有知足上述條件纔會觸發穿透事件，就是點擊外dom，外dom消失，但下邊的dom也會觸發click事件（好比跳轉連接）
產生此現象的緣由：
由於click的300延遲，致使用戶體驗不佳，因此不少人都會採用touch系列代替click。
在點擊事件中，點擊的順序是這樣的：
touchstart > touchmove > touchend > click
而輪到click事件的時候還在再延遲了300毫秒，因此touchstart的觸發速度是遠大於click的，回到上述的產生穿透的條件中去
一、touchstart事件觸發，外層dom消失，但是點擊屏幕後會有個瀏覽器默認的click產生，首先就做用於當時click觸發時點擊的屏幕最外層的dom，即在重疊的條件下，zindex最大的dom，而後順着dom樹往上爬
二、由於有300毫秒的延遲，因此在第一步的touchstart後，外層dom就消失了，等300毫秒後click觸發了，等着他的dom倒是在下面那層的dom（由於此時這個dom已經在最上層了），因此本來在下面的這個dom就觸發了click事件。
因此說外層dom會消失是很重要的條件，若是外層dom沒有消失，那延遲的click觸發時仍是做用在外層的dom上，而外層dom沒綁定click事件。
這就是穿透的原理。

Tap透傳的解決方案
1.使用緩動動畫，過渡300ms的延遲
2.中檢測dom元素的加入，讓中間層接受這個"穿透"事件，稍後隱藏
3."上下"都使用tap事件，原理上解決tap透傳事件(但不可避免原生標籤的click事件)
4.取消click默認事件。
既然每次單擊是都會有個瀏覽器的click默認事件觸發，既然咱們不須要，那就把這個默認事件取消掉就行了，因此在js中加上這句話

if (ev.type == 'touchend') {
  ev.preventDefault();
}

5.改用Fastclick庫

觸摸touch

touch事件touch是針對觸屏手機上的觸摸事件。現今大多數觸屏手機webkit內核提供了touch事件的監聽，讓開發者能夠獲取用戶觸摸屏幕時的一些信息。
其中包括：touchstart,touchmove,touchend,touchcancel 這四個事件.touchstart,touchmove,touchend事件能夠類比於mousedown，mouseover
，mouseup的觸發。

觸摸touch常見事件及屬性

• touchstart ： 當手指觸摸到屏幕會觸發(已經有手指放屏幕上不會觸發)

• touchmove : 當手指在屏幕上移動時，會連續觸發；

• touchend : 當手指離開屏幕時，會觸發；

• touchcancel：系統取消touch時觸發(不經常使用)

除了常見的事件屬性外，觸摸事件包含專有的觸摸屬性：

• touches:跟蹤觸摸操做的touch對象數組

• targetTouches:特定事件目標的touch對象數組

• changeTouches:上次觸摸改變的touch對象數組
  每一個touch對象包含屬性：

• clientX:觸摸目標在視口中的X座標。

• clientY:觸摸目標在視口中的Y座標。

• identifier:標識觸摸的惟一ID。

• pageX:觸摸目標在頁面中的x座標(包含滾動)

• pageY:觸摸目標在頁面中的y座標(包含滾動)

• screenX:觸摸目標在屏幕中的x座標。

• screenY:觸摸目標在屏幕中的y座標。

• target:觸摸的DOM節點目標。

彈性滾動(IOS系統適用)

當客戶端的頁面滾動到頂部或底部的時候，滾動條會收縮並讓咱們多滑動必定距離，經過緩衝反彈的效果，帶給用戶良好的體驗。

移動web頁面也有這樣的效果，但滾動有幾種狀況須要考慮：

• body層滾動:(系統特殊化處理)
  自帶彈性滾動，overflow:hidden會失效，GIF和定時器暫停。

• 局部滾動：
  沒有彈性滾動，沒有滾動慣性，不流暢

局部滾動開啓彈性滾動：

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

Android不支持原生的彈性滾動！須要藉助第三方庫iScroll來實現。

下拉刷新

頂端下拉一小點距離，頁面彈性滾動向下

上拉加載

使用scroll事件，而不是touch事件(android有bug)

Web App打包工具：

基於HTML5+CSS3+JS開發Web App,經過打包工具將Web App變成ISO/Anroid應用。
常見的打包工具：

• Appcan

• phonegap

• appcelector

• Intel XDK(設計開發打包一體化工具)

常見Web App框架

Web APP優缺點：
致命缺陷：運行效率太差
純Web App應用參考："豆瓣音樂人"

Hybrid App：

如桌面平臺上的Hybrid App應用：酷我音樂盒/QQ
移動平臺上的Hybrid App:如QQ


Hybrid App優缺點

• 綜合了開發效率和運行效率

• 發版本方便

• 運行效率中等(切換engine交互效果)

• 須要寫一點原生代碼(至少2個平臺)

參考連接：

1. click300延遲與點擊穿透