2013年初接觸移動端，簡單做下總結，首先了解下移動web帶來的問題

裝置更新換代快——低端機遺留下問題、高階機帶來新挑戰
瀏覽器廠商不統一——相容問題多
網路更復雜——弱網路，頁面開啟慢
低端機效能差——頁面操作卡頓
HTML5新技術多——學習成本不低
未知問題——坑多

面對這些問題，一開始我們只能在未知中試錯，知道錯誤的方案才能更容易尋找正確的解決問題思路，2年多來，可看到移動web在業界不斷趨向於成熟，各種框架和解決方案不斷的湧現讓移動端開發不再是個噩夢。

這幾天把想到的一點經驗先羅列出來，後續會持續更新，這篇文章可以給剛接觸webapp開發的同學帶來幫助，任何疑問歡迎留言探討~

目錄（更新於20161114）

meta基礎知識

H5頁面視窗自動調整到裝置寬度，並禁止使用者縮放頁面

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

忽略將頁面中的數字識別為電話號碼

<meta name="format-detection" content="telephone=no" />

忽略Android平臺中對郵箱地址的識別

< 
meta name="format-detection" content="email=no" />

當網站新增到主螢幕快速啟動方式，可隱藏位址列，僅針對ios的safari

<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- ios7.0版本以後，safari上已看不到效果 -->

體驗demo，解決在主螢幕開啟頁面後，點選頁面連結不會跳轉到系統自帶的Safari

將網站新增到主螢幕快速啟動方式，僅針對ios的safari頂端狀態條的樣式

<meta  
name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- 可選default、black、black-translucent -->

viewport模板

viewport模板——通用

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<title>標題</title>
<link rel="stylesheet" href="index.css">
</head>

<body>
這裡開始內容
</body>

</html>

viewport模板 - target-densitydpi=device-dpi，android 2.3.5以下版本不支援

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=750, user-scalable=no, target-densitydpi=device-dpi"><!-- width取值與頁面定義的寬度一致 -->
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<title>標題</title>
<link rel="stylesheet" href="index.css">
</head>

<body>
這裡開始內容
</body>

</html>

常見問題

移動端如何定義字型font-family

中文字型使用系統預設即可，英文用Helvetica

/* 移動端定義字型的程式碼 */
body{font-family:Helvetica;}

移動端字型單位font-size選擇px還是rem

對於只需要適配少部分手機裝置，且解析度對頁面影響不大的，使用px即可

對於需要適配各種移動裝置，使用rem，例如只需要適配iPhone和iPad等解析度差別比較挺大的裝置

rem配置參考，適合視覺稿寬度為640px的：

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

html{font-size:10px}
@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}
@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}
@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}
@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}
@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}
@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}
@media screen and (min-width:800px){html{font-size:25px}}

移動端touch事件(區分webkit 和 winphone)

當用戶手指放在移動裝置在螢幕上滑動會觸發的touch事件

以下支援webkit

touchstart——當手指觸碰螢幕時候發生。不管當前有多少隻手指
touchmove——當手指在螢幕上滑動時連續觸發。通常我們再滑屏頁面，會呼叫event的preventDefault()可以阻止預設情況的發生：阻止頁面滾動
touchend——當手指離開螢幕時觸發
touchcancel——系統停止跟蹤觸控時候會觸發。例如在觸控過程中突然頁面alert()一個提示框，此時會觸發該事件，這個事件比較少用

TouchEvent

touches：螢幕上所有手指的資訊
targetTouches：手指在目標區域的手指資訊
changedTouches：最近一次觸發該事件的手指資訊
touchend時，touches與targetTouches資訊會被刪除，changedTouches儲存的最後一次的資訊，最好用於計算手指資訊

引數資訊(changedTouches[0])

clientX、clientY在顯示區的座標
target：當前元素

以下支援winphone 8

MSPointerDown——當手指觸碰螢幕時候發生。不管當前有多少隻手指
MSPointerMove——當手指在螢幕上滑動時連續觸發。通常我們再滑屏頁面，會呼叫css的html{-ms-touch-action: none;}可以阻止預設情況的發生：阻止頁面滾動
MSPointerUp——當手指離開螢幕時觸發

移動端click螢幕產生200-300 ms的延遲響應

移動裝置上的web網頁是有300ms延遲的，玩玩會造成按鈕點選延遲甚至是點選失效。

以下是歷史原因，來源一個公司內一個同事的分享：

2007年蘋果釋出首款iphone上IOS系統搭載的safari為了將適用於PC端上大螢幕的網頁能比較好的展示在手機端上，使用了雙擊縮放(double tap to zoom)的方案，比如你在手機上用瀏覽器開啟一個PC上的網頁，你可能在看到頁面內容雖然可以撐滿整個螢幕，但是字型、圖片都很小看不清，此時可以快速雙擊螢幕上的某一部分，你就能看清該部分放大後的內容，再次雙擊後能回到原始狀態。

雙擊縮放是指用手指在螢幕上快速點選兩次，iOS 自帶的 Safari 瀏覽器會將網頁縮放至原始比例。

原因就出在瀏覽器需要如何判斷快速點選上，當用戶在螢幕上單擊某一個元素時候，例如跳轉連結<a href="#"></a>，此處瀏覽器會先捕獲該次單擊，但瀏覽器不能決定使用者是單純要點選連結還是要雙擊該部分割槽域進行縮放操作，所以，捕獲第一次單擊後，瀏覽器會先Hold一段時間t，如果在t時間區間裡使用者未進行下一次點選，則瀏覽器會做單擊跳轉連結的處理，如果t時間裡使用者進行了第二次單擊操作，則瀏覽器會禁止跳轉，轉而進行對該部分割槽域頁面的縮放操作。那麼這個時間區間t有多少呢？在IOS safari下，大概為300毫秒。這就是延遲的由來。造成的後果使用者純粹單擊頁面，頁面需要過一段時間才響應，給使用者慢體驗感覺，對於web開發者來說是，頁面js捕獲click事件的回撥函式處理，需要300ms後才生效，也就間接導致影響其他業務邏輯的處理。

解決方案：

fastclick可以解決在手機上點選事件的300ms延遲
zepto的touch模組，tap事件也是為了解決在click的延遲問題

觸控事件的響應順序

1、ontouchstart 
2、ontouchmove 
3、ontouchend 
4、onclick

解決300ms延遲的問題，也可以通過繫結ontouchstart事件，加快對事件的響應

什麼是Retina 顯示屏，帶來了什麼問題

retina：一種具備超高畫素密度的液晶屏，同樣大小的螢幕上顯示的畫素點由1個變為多個，如在同樣帶下的螢幕上，蘋果裝置的retina顯示屏中，畫素點1個變為4個

在高清顯示屏中的點陣圖被放大，圖片會變得模糊，因此移動端的視覺稿通常會設計為傳統PC的2倍

那麼，前端的應對方案是：

設計稿切出來的圖片長寬保證為偶數，並使用backgroud-size把圖片縮小為原來的1/2

//例如圖片寬高為：200px*200px，那麼寫法如下
.css{width:100px;height:100px;background-size:100px 100px;}

其它元素的取值為原來的1/2，例如視覺稿40px的字型，使用樣式的寫法為20px

.css{font-size:20px}

ios系統中元素被觸控時產生的半透明灰色遮罩怎麼去掉

ios使用者點選一個連結，會出現一個半透明灰色遮罩, 如果想要禁用，可設定-webkit-tap-highlight-color的alpha值為0，也就是屬性值的最後一位設定為0就可以去除半透明灰色遮罩

a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0;)}

部分android系統中元素被點選時產生的邊框怎麼去掉

android使用者點選一個連結，會出現一個邊框或者半透明灰色遮罩, 不同生產商定義出來額效果不一樣，可設定-webkit-tap-highlight-color的alpha值為0去除部分機器自帶的效果

a,button,input,textarea{
-webkit-tap-highlight-color: rgba(0,0,0,0;)
-webkit-user-modify:read-write-plaintext-only; 
}

-webkit-user-modify有個副作用，就是輸入法不再能夠輸入多個字元

另外，有些機型去除不了，如小米2

對於按鈕類還有個辦法，不使用a或者input標籤，直接用div標籤

winphone系統a、input標籤被點選時產生的半透明灰色背景怎麼去掉

<meta name="msapplication-tap-highlight" content="no">

webkit表單元素的預設外觀怎麼重置

通用

.css{-webkit-appearance:none;}

偽元素改變number型別input框的預設樣式

input[type=number]::-webkit-textfield-decoration-container {
    background-color: transparent;    
}
input[type=number]::-webkit-inner-spin-button {
     -webkit-appearance: none;
}
input[type=number]::-webkit-outer-spin-button {
     -webkit-appearance: none;
}

webkit表單輸入框placeholder的顏色值能改變麼

input::-webkit-input-placeholder{color:#AAAAAA;}
input:focus::-webkit-input-placeholder{color:#EEEEEE;}

webkit表單輸入框placeholder的文字能換行麼

ios可以，android不行~

在textarea標籤下都可以換行~

IE10（winphone8）表單元素預設外觀如何重置

禁用 select 預設下拉箭頭

::-ms-expand 適用於表單選擇控制元件下拉箭頭的修改，有多個屬性值，設定它隱藏 (display:none) 並使用背景圖片來修飾可得到我們想要的效果。

select::-ms-expand {
display: none;
}

禁用 radio 和 checkbox 預設樣式

::-ms-check 適用於表單複選框或單選按鈕預設圖示的修改，同樣有多個屬性值，設定它隱藏 (display:none) 並使用背景圖片來修飾可得到我們想要的效果。

input[type=radio]::-ms-check,input[type=checkbox]::-ms-check{
display: none;
}

禁用PC端表單輸入框預設清除按鈕

當表單文字輸入框輸入內容後會顯示文字清除按鈕，::-ms-clear 適用於該清除按鈕的修改，同樣設定使它隱藏 (display:none) 並使用背景圖片來修飾可得到我們想要的效果。

input[type=text]::-ms-clear,input[type=tel]::-ms-clear,input[type=number]::-ms-clear{
display: none;
}

禁止ios 長按時不觸發系統的選單，禁止ios&android長按時下載圖片

.css{-webkit-touch-callout: none}

禁止ios和android使用者選中文字

.css{-webkit-user-select:none}

打電話發簡訊寫郵件怎麼實現

打電話

<a href="tel:0755-10086">打電話給:0755-10086</a>

發簡訊，winphone系統無效

<a href="sms:10086">發簡訊給: 10086</a>

<a href="mailto:[email protected]">[email protected]</a>

模擬按鈕hover效果

移動端觸控按鈕的效果，可明示使用者有些事情正要發生，是一個比較好體驗，但是移動裝置中並沒有滑鼠指標，使用css的hover並不能滿足我們的需求，還好國外有個啟用移動端css的active效果。

直接在body上新增ontouchstart，同樣可啟用移動端css的active效果，比較推薦這種方式，程式碼如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<style type="text/css">
a{-webkit-tap-highlight-color: rgba(0,0,0,0);}
.btn-blue{display:block;height:42px;line-height:42px;text-align:center;border-radius:4px;font-size:18px;color:#FFFFFF;background-color: #4185F3;}
.btn-blue:active{background-color: #357AE8;}
</style>
</head>
<body ontouchstart>
<div class="btn-blue">按鈕</div>

</body>
</html>

或者：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<style type="text/css">
a{-webkit-tap-highlight-color: rgba(0,0,0,0);}
.btn-blue{display:block;height:42px;line-height:42px;text-align:center;border-radius:4px;font-size:18px;color:#FFFFFF;background-color: #4185F3;}
.btn-blue:active{background-color: #357AE8;}
</style>
</head>
<body>

<div class="btn-blue">按鈕</div>

<script type="text/javascript">
document.addEventListener("touchstart", function(){}, true)
</script>
</body>
</html>

相容性ios5+、部分android 4+、winphone 8

要做到全相容的辦法，可通過繫結ontouchstart和ontouchend來控制按鈕的類名

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<style type="text/css">
a{-webkit-tap-highlight-color: rgba(0,0,0,0);}
.btn-blue{display:block;height:42px;line-height:42px;text-align:center;border-radius:4px;font-size:18px;color:#FFFFFF;background-color: #4185F3;}
.btn-blue-on{background-color: #357AE8;}
</style>
</head>
<body>

<div class="btn-blue">按鈕</div>

<script type="text/javascript">
var btnBlue = document.querySelector(".btn-blue");
btnBlue.ontouchstart = function(){
    this.className = "btn-blue btn-blue-on"
}
btnBlue.ontouchend = function(){
    this.className = "btn-blue"
}
</script>
</body>
</html>

螢幕旋轉的事件和樣式

事件

window.orientation，取值：正負90表示橫屏模式、0和180表現為

【原】移動web資源整理