免費AI編程助手
5. 移動端優(yōu)化
移動端優(yōu)化
click 的 300ms 延遲響應
click 的 300ms 延遲是由雙擊縮放(double tap to zoom)所導致的，由于用戶可以進行雙擊縮放或者雙擊滾動的操作，當用戶一次點擊屏幕之后，瀏覽器并不能立刻判斷用戶是確實要打開這個鏈接，還是想要進行雙擊操作。因此，移動端瀏覽器就等待 300 毫秒，以判斷用戶是否再次點擊了屏幕。
隨著響應式網頁逐漸增多，用戶使用雙擊縮放機會減少，這 300ms 的延遲就更不可接受了。瀏覽器開發(fā)商也隨之提供相應的解決方案。這些方案在5 Ways to Prevent the 300ms Click Delay on Mobile Devices?中，被提及的包括「禁用縮放」和「width=device-width」等方案，但這些方案并不完美，需要針對某些版本瀏覽器，又或僅在 Android 的瀏覽器上使用。
所以這時候就需要一個更簡單通用的解決方案，其中?FT Labs?專門為解決移動端瀏覽器 300 毫秒點擊延遲問題所開發(fā)的一個輕量級的庫?FastClick?就是很好的選擇。FastClick 在檢測到 touchend 事件的時候，會通過 DOM 自定義事件立即觸發(fā)一個模擬 click 事件，并把瀏覽器在 300 毫秒之后真正觸發(fā)的 click 事件阻止掉。
FastClick 的使用方法非常簡單，在 window load 事件之后，在?<body>?上調用FastClick.attach()?即可。
window.addEventListener( "load", function() {
FastClick.attach( document.body );
}, false );快速回彈滾動
快速回彈滾動在手機瀏覽器上的發(fā)展歷史：
- 早期的時候，移動端的瀏覽器都不支持非 body 元素的滾動條，所以一般都借助 iScroll;
- Android 3.0 / iOS 解決了非 body 元素的滾動問題，但滾動條不可見，同時 iOS 上只能通過2個手指進行滾動；
- Android 4.0 解決了滾動條不可見及增加了快速回彈滾動效果，不過隨后這個特性又被移除；
- 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.scrollY
window.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 不會）上，瀏覽器會自動識別看起來像郵箱地址的字符串，不論有你沒有加上郵箱鏈接，當你在這個字符串上長按，會彈出發(fā)郵件的提示。
<!-- 關閉郵箱地址識別： -->
<meta name="format-detection" content="email=no" />
<!-- 開啟郵件發(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 -->
更多建議：