移動(dòng)端優(yōu)化
移動(dòng)端優(yōu)化
click 的 300ms 延遲響應(yīng)
click 的 300ms 延遲是由雙擊縮放(double tap to zoom)所導(dǎo)致的，由于用戶可以進(jìn)行雙擊縮放或者雙擊滾動(dòng)的操作，當(dāng)用戶一次點(diǎn)擊屏幕之后，瀏覽器并不能立刻判斷用戶是確實(shí)要打開(kāi)這個(gè)鏈接，還是想要進(jìn)行雙擊操作。因此，移動(dòng)端瀏覽器就等待 300 毫秒，以判斷用戶是否再次點(diǎn)擊了屏幕。
隨著響應(yīng)式網(wǎng)頁(yè)逐漸增多，用戶使用雙擊縮放機(jī)會(huì)減少，這 300ms 的延遲就更不可接受了。瀏覽器開(kāi)發(fā)商也隨之提供相應(yīng)的解決方案。這些方案在5 Ways to Prevent the 300ms Click Delay on Mobile Devices 中，被提及的包括「禁用縮放」和「width=device-width」等方案，但這些方案并不完美，需要針對(duì)某些版本瀏覽器，又或僅在 Android 的瀏覽器上使用。
所以這時(shí)候就需要一個(gè)更簡(jiǎn)單通用的解決方案，其中 FT Labs 專門(mén)為解決移動(dòng)端瀏覽器 300 毫秒點(diǎn)擊延遲問(wèn)題所開(kāi)發(fā)的一個(gè)輕量級(jí)的庫(kù) FastClick 就是很好的選擇。FastClick 在檢測(cè)到 touchend 事件的時(shí)候，會(huì)通過(guò) DOM 自定義事件立即觸發(fā)一個(gè)模擬 click 事件，并把瀏覽器在 300 毫秒之后真正觸發(fā)的 click 事件阻止掉。
FastClick 的使用方法非常簡(jiǎn)單，在 window load 事件之后，在 <body> 上調(diào)用FastClick.attach() 即可。
window.addEventListener( "load", function() {
FastClick.attach( document.body );
}, false );快速回彈滾動(dòng)
快速回彈滾動(dòng)在手機(jī)瀏覽器上的發(fā)展歷史：
1.早期的時(shí)候，移動(dòng)端的瀏覽器都不支持非 body 元素的滾動(dòng)條，所以一般都借助 iScroll;
2.Android 3.0 / iOS 解決了非 body 元素的滾動(dòng)問(wèn)題，但滾動(dòng)條不可見(jiàn)，同時(shí) iOS 上只能通過(guò)2個(gè)手指進(jìn)行滾動(dòng)；
3.Android 4.0 解決了滾動(dòng)條不可見(jiàn)及增加了快速回彈滾動(dòng)效果，不過(guò)隨后這個(gè)特性又被移除；
4.iOS從5.0開(kāi)始解決了滾動(dòng)條不可見(jiàn)及增加了快速回彈滾動(dòng)效果
如果想要為某個(gè)元素?fù)碛?Native 般的滾動(dòng)效果，可以這樣操作：
.element {
overflow: auto; /* auto | scroll */
-webkit-overflow-scrolling: touch;
}
除了 iScroll 之外，還有一個(gè)更加強(qiáng)大的滾動(dòng)插件 Swiper，支持 3D 和內(nèi)置滾動(dòng)條等。
設(shè)備檢測(cè)
// 這段代碼引用自：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/);獲取滾動(dòng)條值
PC 端滾動(dòng)條的值是通過(guò) document.scrollTop 和 document.scrollLeft 獲得，但在 iOS 中并沒(méi)有滾動(dòng)條的概念，所以僅能通過(guò) windows.scroll 獲取，同時(shí)也能兼容 Android 。
window.scrollYwindow.scrollX
清除輸入框內(nèi)陰影
在 iOS 上，輸入框默認(rèn)有內(nèi)部陰影，但無(wú)法使用 box-shadow 來(lái)清除，如果不需要陰影，可以這樣操作：
input,
textarea {
border: 0; /* 方法1 */
-webkit-appearance: none; /* 方法2 */
}Meta 相關(guān)
頁(yè)面窗口自動(dòng)調(diào)整到設(shè)備寬度，并禁止用戶縮放頁(yè)面
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
電話號(hào)碼識(shí)別
iOS Safari ( Android 或其他瀏覽器不會(huì)) 會(huì)自動(dòng)識(shí)別看起來(lái)像電話號(hào)碼的數(shù)字，將其處理為電話號(hào)碼鏈接，比如：
- 7位數(shù)字，形如：1234567
- 帶括號(hào)及加號(hào)的數(shù)字，形如：(+86)123456789
- 雙連接線的數(shù)字，形如：00-00-00111
- 11位數(shù)字，形如：13800138000
<!-- 關(guān)閉電話號(hào)碼識(shí)別： --> <meta name="format-detection" content="telephone=no" /> <!-- 開(kāi)啟電話功能： --> <a href="tel:123456">123456</a> <!-- 開(kāi)啟短信功能： --> <a href="sms:123456">123456</a>
郵箱地址的識(shí)別
在 Android （ iOS 不會(huì)）上，瀏覽器會(huì)自動(dòng)識(shí)別看起來(lái)像郵箱地址的字符串，不論有你沒(méi)有加上郵箱鏈接，當(dāng)你在這個(gè)字符串上長(zhǎng)按，會(huì)彈出發(fā)郵件的提示。
<!-- 關(guān)閉郵箱地址識(shí)別： --> <meta name="format-detection" content="email=no" /> <!-- 開(kāi)啟郵件發(fā)送： --> <a mailto:>mobile@gmail.com">mobile@gmail.com</a>
指定 iOS 的 safari 頂端狀態(tài)條的樣式
<meta name="apple-mobile-web-app-status-bar-style" content="black" /> <!-- 可選default、black、black-translucent -->