行動端優化

行動端最佳化

click 的300ms 延遲回應

click 的300ms 延遲是由雙擊縮放(double tap to zoom)所導致的，由於用戶可以進行雙擊縮放或者雙擊滾動的操作，當用戶一次點擊屏幕之後，瀏覽器並不能立刻判斷用戶是確實要打開這個鏈接，還是想要進行雙擊操作。因此，行動裝置瀏覽器會等待 300 毫秒，以判斷使用者是否再次點擊了螢幕。

隨著響應式網頁逐漸增多，使用者使用雙擊縮放機會減少，這 300ms 的延遲就更不可接受了。瀏覽器開發人員也隨之提供相應的解決方案。這些方案在5 Ways to Prevent the 300ms Click Delay on Mobile Devices 中，被提及的包括「停用縮放」和「width=device-width」等方案，但這些方案並不完美，需要針對某些版本瀏覽器，又或僅在Android 的瀏覽器上使用。

所以這時候就需要一個更簡單通用的解決方案，其中 FT Labs 專門為解決行動裝置瀏覽器300 毫秒點擊延遲問題所開發的一個輕量級的庫 FastClick 就是很好的選擇。 FastClick 在偵測到 touchend 事件的時候，會透過 DOM 自訂事件立即觸發模擬 click 事件，並把瀏覽器在 300 毫秒之後真正觸發的 click 事件封鎖掉。

FastClick 的使用方法非常簡單，在 window load 事件之後，在 <body> 上呼叫FastClick.attach() 即可。

window.addEventListener( "load", function() {
    FastClick.attach( document.body );
}, false );

快速回彈滾動

快速回彈滾動在手機瀏覽器上的發展歷史：

1.早期的時候，行動端的瀏覽器都不支援非body 元素的滾動條，所以一般都藉助iScroll;

2.Android 3.0 / iOS 解決了非body 元素的滾動問題，但滾動條不可見，同時iOS 上只能透過2個手指進行滾動;

3.Android 4.0 解決了滾動條不可見及增加了快速回彈滾動效果，不過隨後這個特性又被移除；

4.iOS從5.0開始解決了滾動條不可見及增加了快速回彈滾動效果

如果想要為某個元素擁有Native 般的滾動效果，可以這樣操作：

.element {
    overflow: auto; /* auto | scroll */
    -webkit-overflow-scrolling: touch;
}
除了 iScroll 之外，还有一个更加强大的滚动插件 Swiper，支持 3D 和内置滚动条等。

設備檢測

// 这段代码引用自：https://github.com/binnng/device.js

var WIN = window;
var LOC = WIN["location"];
var NA = WIN.navigator;
var UA = NA.userAgent.toLowerCase();

function test(needle) {
  return needle.test(UA);
}

var IsTouch = "ontouchend" in WIN;
var IsAndroid = test(/android|htc/) || /linux/i.test(NA.platform + "");
var IsIPad = !IsAndroid && test(/ipad/);
var IsIPhone = !IsAndroid && test(/ipod|iphone/);
var IsIOS = IsIPad || IsIPhone;
var IsWinPhone = test(/windows phone/);
var IsWebapp = !!NA["standalone"];
var IsXiaoMi = IsAndroid && test(/mi\s+/);
var IsUC = test(/ucbrowser/);
var IsWeixin = test(/micromessenger/);
var IsBaiduBrowser = test(/baidubrowser/);
var IsChrome = !!WIN["chrome"];
var IsBaiduBox = test(/baiduboxapp/);
var IsPC = !IsAndroid && !IsIOS && !IsWinPhone;
var IsHTC = IsAndroid && test(/htc\s+/);
var IsBaiduWallet = test(/baiduwallet/);

取得捲軸值

PC 端捲軸的值是透過 document.scrollTop 和 document.scrollLeft 取得，但在iOS 中並沒有捲軸的概念，所以僅能透過windows.scroll 獲取，同時也能相容於Android 。

window.scrollYwindow.scrollX

清除輸入框內陰影

在 iOS 上，輸入框預設有內部陰影，但無法使用 box-shadow 來清除，如果不需要陰影，可以這樣操作：

input,
textarea {
    border: 0; /* 方法1 */
    -webkit-appearance: none; /* 方法2 */
}

Meta 相關

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

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

電話號碼識別

iOS Safari ( Android 或其他瀏覽器不會) 會自動識別看起來像電話號碼的數字，將其處理為電話號碼鏈接，例如：

7位數字，形如：1234567
帶括號及加號的數字，形如：(+86)123456789
雙連接線的數字，形如：00-00-00111
11位數字，形如：13800138000

<!-- 关闭电话号码识别： -->
<meta name="format-detection" content="telephone=no" />

<!-- 开启电话功能： -->
<a href="tel:123456">123456</a>

<!-- 开启短信功能： -->
<a href="sms:123456">123456</a>

郵箱地址的識別

在Android （ iOS 不會）上，瀏覽器會自動識別看起來像郵箱地址的字符串，不論有你沒有加上郵箱鏈接，當你在這個字串上長按，會彈出發送郵件的提示。

<!-- 关闭邮箱地址识别： -->
<meta name="format-detection" content="email=no" />

<!-- 开启邮件发送： -->
<a mailto:>mobile@gmail.com">mobile@gmail.com</a>

指定 iOS 的 safari 頂端狀態條的樣式

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