免費(fèi)AI編程助手
5. 移動(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í)要打開這個(gè)鏈接，還是想要進(jìn)行雙擊操作。因此，移動(dòng)端瀏覽器就等待 300 毫秒，以判斷用戶是否再次點(diǎn)擊了屏幕。
隨著響應(yīng)式網(wǎng)頁逐漸增多，用戶使用雙擊縮放機(jī)會(huì)減少，這 300ms 的延遲就更不可接受了。瀏覽器開發(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?專門為解決移動(dòng)端瀏覽器 300 毫秒點(diǎn)擊延遲問題所開發(fā)的一個(gè)輕量級(jí)的庫(kù)?FastClick?就是很好的選擇。FastClick 在檢測(cè)到 touchend 事件的時(shí)候，會(huì)通過 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ā)展歷史：
- 早期的時(shí)候，移動(dòng)端的瀏覽器都不支持非 body 元素的滾動(dòng)條，所以一般都借助 iScroll;
- Android 3.0 / iOS 解決了非 body 元素的滾動(dòng)問題，但滾動(dòng)條不可見，同時(shí) iOS 上只能通過2個(gè)手指進(jìn)行滾動(dòng)；
- Android 4.0 解決了滾動(dòng)條不可見及增加了快速回彈滾動(dòng)效果，不過隨后這個(gè)特性又被移除；
- iOS從5.0開始解決了滾動(dòng)條不可見及增加了快速回彈滾動(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)條的值是通過?document.scrollTop?和?document.scrollLeft?獲得，但在 iOS 中并沒有滾動(dòng)條的概念，所以僅能通過 windows.scroll 獲取，同時(shí)也能兼容 Android 。
window.scrollY
window.scrollX清除輸入框內(nèi)陰影
在 iOS 上，輸入框默認(rèn)有內(nèi)部陰影，但無法使用 box-shadow 來清除，如果不需要陰影，可以這樣操作：
input,
textarea {
border: 0; /* 方法1 */
-webkit-appearance: none; /* 方法2 */
}Meta 相關(guān)
頁面窗口自動(dòng)調(diào)整到設(shè)備寬度，并禁止用戶縮放頁面
<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í)別看起來像電話號(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" />
<!-- 開啟電話功能： -->
<a href="tel:123456">123456</a>
<!-- 開啟短信功能： -->
<a href="sms:123456">123456</a>郵箱地址的識(shí)別
在 Android （ iOS 不會(huì)）上，瀏覽器會(huì)自動(dòng)識(shí)別看起來像郵箱地址的字符串，不論有你沒有加上郵箱鏈接，當(dāng)你在這個(gè)字符串上長(zhǎng)按，會(huì)彈出發(fā)郵件的提示。
<!-- 關(guān)閉郵箱地址識(shí)別： -->
<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 -->
更多建議：