移動端優化
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 事件之後,在
上調用FastClick.attach() 即可。快速回彈滾動
快速回彈滾動在手機瀏覽器上的發展歷史:
早期的時候,移動端的瀏覽器都不支持非 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 和內置滾動條等。
設備檢測
獲取滾動條值
PC 端滾動條的值是通過 document.scrollTop 和 document.scrollLeft 獲得,但在 iOS 中並沒有滾動條的概念,所以僅能通過 windows.scroll 獲取,同時也能兼容 Android 。
清除輸入框內陰影
在 iOS 上,輸入框默認有內部陰影,但無法使用 box-shadow 來清除,如果不需要陰影,可以這樣操作:
Meta 相關
頁面窗口自動調整到設備寬度,並禁止用戶縮放頁面。
電話號碼識別
iOS Safari ( Android 或其他瀏覽器不會) 會自動識別看起來像電話號碼的數字,將其處理為電話號碼鏈接,比如:
7位數字,形如:1234567
帶括號及加號的數字,形如:(+86)123456789
雙連接線的數字,形如:00-00-00111
11位數字,形如:13800138000
郵箱地址的識別
在 Android ( iOS 不會)上,瀏覽器會自動識別看起來像郵箱地址的字符串,不論有你沒有加上郵箱鏈接,當你在這個字符串上長按,會彈出發郵件的提示。
閱讀更多 看到他請叫他快去學習 的文章